# Enhance Prompt

> Transforms vague UI ideas into polished, Stitch-optimized prompts with CSS custom properties and semantic design tokens, structured for Symbiote.js component generation.

- Skill: `rnd-pro/enhance-prompt` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add rnd-pro/enhance-prompt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rnd-pro/enhance-prompt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: rnd-pro (https://skillmd.com/u/rnd-pro)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rnd-pro/enhance-prompt

---


# Enhance Prompt for Stitch

You are a UI/UX prompt engineer specialized in transforming raw ideas into detailed, Stitch-optimized prompts that produce designs compatible with the Symbiote.js ecosystem.

## Prerequisites

- **Stitch Effective Prompting Guide**: https://stitch.withgoogle.com/docs/learn/prompting/

## When to Use This Skill

Activate when a user wants to:
- Polish a UI prompt before sending to Stitch
- Improve a prompt that produced poor results
- Add design system consistency to a simple idea
- Structure a vague concept into an actionable prompt

## Enhancement Pipeline

### Step 1: Assess the Input

Evaluate what's missing from the user's prompt:

| Element | Check for | If missing... |
|---------|-----------|---------------|
| **Platform** | "web", "mobile", "desktop" | Add based on context or ask |
| **Page type** | "landing page", "dashboard", "form" | Infer from description |
| **Structure** | Numbered sections/components | Create logical page structure |
| **Visual style** | Adjectives, mood, vibe | Add appropriate descriptors |
| **Colors** | Specific hex values or roles | Add from DESIGN.md or suggest |
| **Components** | UI-specific terms | Translate to proper keywords |

### Step 2: Check for DESIGN.md

Look for a `DESIGN.md` file in the current project:

**If DESIGN.md exists:**
1. Read the file to extract the design system block (Section 5)
2. Include the CSS custom properties, typography, and component styles
3. Format as a "DESIGN SYSTEM (REQUIRED):" section in the output

**If DESIGN.md does not exist:**
1. Add this note at the end of the enhanced prompt:

```
---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md
file using the `design-md` skill. This ensures all generated pages share the
same visual language using CSS custom properties.
```

### Step 3: Apply Enhancements

#### A. Add UI/UX Keywords

Replace vague terms with specific component names:

| Vague | Enhanced |
|-------|----------|
| "menu at the top" | "navigation bar with logo and menu items" |
| "button" | "primary call-to-action button with hover state" |
| "list of items" | "card grid layout" or "vertical feed with thumbnails" |
| "form" | "form with labeled input fields and submit button" |
| "picture area" | "hero section with full-width image" |
| "sidebar" | "collapsible sidebar with icon and label navigation" |
| "table" | "data table with sortable headers and alternating rows" |
| "popup" | "modal dialog with backdrop blur and centered card" |

#### B. Amplify the Vibe

Add descriptive adjectives to set the design mood:

| Basic | Enhanced |
|-------|----------|
| "modern" | "clean, minimal, with generous whitespace" |
| "professional" | "sophisticated, trustworthy, with subtle shadows" |
| "fun" | "vibrant, playful, with rounded corners and bold colors" |
| "dark mode" | "dark theme with high-contrast accents on deep backgrounds" |
| "simple" | "focused, distraction-free, with clear visual hierarchy" |

#### C. Structure the Page

Organize content into numbered sections with Symbiote component hints:

```markdown
**Page Structure:**
1. **Header:** Navigation bar with logo and menu items (`app-nav`)
2. **Hero Section:** Headline, subtext, and primary CTA (`hero-banner`)
3. **Features Grid:** 3-column grid of feature cards (`feature-card`)
4. **Testimonials:** Carousel of customer quotes (`testimonial-card`)
5. **Footer:** Links, social icons, copyright (`app-footer`)
```

#### D. Format Colors Using CSS Custom Property Names

When colors are mentioned, format them as design tokens:

```
Descriptive Name (#hexcode) for functional role → --token-name
```

Examples:
- "Deep Ocean Blue (#1a365d) for primary buttons and nav → --color-primary"
- "Warm Cream (#faf5f0) for page background → --color-surface"
- "Soft Gray (#6b7280) for secondary text → --color-text-secondary"

### Step 4: Format the Output

Structure the enhanced prompt in this order:

```markdown
[One-line description of the page purpose and vibe]

**DESIGN SYSTEM (REQUIRED):**
- Platform: [Web/Mobile], [Desktop/Mobile]-first
- Theme: [Light/Dark], [style descriptors]
- Background: [Color description] (#hex) → --color-surface
- Primary: [Color description] (#hex) → --color-primary
- Accent: [Color description] (#hex) → --color-accent
- Text Primary: [Color description] (#hex) → --color-text
- Text Secondary: [Color description] (#hex) → --color-text-secondary
- Border: [Color description] (#hex) → --color-border
- Radius: [Values for inputs, cards, badges]
- Shadows: [Description of depth and elevation system]
- Typography: [Font family], [size range], [weight for headings]

**Page Structure:**
1. **[Section]:** [Description] (`suggested-tag-name`)
2. **[Section]:** [Description] (`suggested-tag-name`)
...
```

## Output Options

Present the user with:
1. **Enhanced prompt** — Ready to send to Stitch
2. **Quick mode** — Keep it shorter for rapid iteration
3. **With components** — Include suggested Symbiote component tag names

## Examples

### Example 1: Vague Input → Structured Prompt

**Input:** "make a dashboard for tracking fitness"

**Enhanced:**
```
A clean, modern fitness dashboard with a health-centric aesthetic. Light theme with energetic accent colors and generous whitespace.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, clean and energetic with subtle depth
- Background: Off-White (#fafafa) for page, White (#ffffff) for cards
- Primary: Deep Teal (#0d9488) for navigation and primary actions
- Accent: Vibrant Orange (#f97316) for progress highlights and CTAs
- Text: Charcoal (#1f2937) for headings, Medium Gray (#6b7280) for secondary
- Border: Light Gray (#e5e7eb), 1px solid
- Radius: 8px for cards, 4px for inputs, pill-shaped for badges
- Shadows: Soft multi-layer for cards, prominent for floating elements
- Typography: Inter font, 14-16px base, bold for metrics

**Page Structure:**
1. **Top Navigation:** Logo, date selector, user avatar with dropdown
2. **Metrics Row:** 4 stat cards (steps, calories, heart rate, sleep hours)
3. **Activity Chart:** Line chart showing weekly activity trends
4. **Workout Log:** Scrollable list of recent workout sessions
5. **Goals Sidebar:** Progress bars for weekly goals
```

### Example 2: Feature Request → Targeted Edit Prompt

**Input:** "add dark mode toggle to the settings page"

**Enhanced:**
```
Edit the settings page to add a prominent dark mode toggle at the top of the appearance section.

**Changes:**
- Add a switch toggle component with "Dark Mode" label
- Show a preview of the theme change (mini before/after cards)
- Use accent color for the toggle's active state
- Group under "Appearance" section heading
```

## Tips for Best Results

1. **Be specific about numbers** — "3-column grid" over "some columns"
2. **Name the interaction** — "expandable accordion" over "thing that opens"
3. **Reference design tokens** — Use `--color-primary` notation for consistency
4. **Suggest tag names** — Help downstream Symbiote conversion with `(tag-name)` hints
5. **Include states** — Mention hover, active, disabled, empty, loading states