Stitch::Generate Design

Generate Design

Create new design screens from text descriptions, images, or mockups, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP.

[!NOTE]

Refer to your system prompt for instruction on handling MCP tool prefixes for

all tools mentioned in this skill (e.g., list_projects,

generate_screen_from_text, edit_screens).

🎨 Prompt Enhancement Pipeline

Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt.

1. Analyze Context

• Project: Use list_projects to find the correct projectId. If no

suitable project exists, create one using create_project.

• Design System: Check if a design system exists for the project via

list_design_systems. If one exists, design tokens (colors, fonts, roundness) are already applied at the project level — do NOT include any color, font, or theme instructions in the generation prompt. If none exists, delegate to the manage-design-system skill first before generating screens.

2. Refine UI/UX Terminology

Consult Design Mappings to replace vague terms.

• Vague: "Make a nice header"
• Professional: "Sticky navigation bar with glassmorphism effect and centered

logo"

Use Prompting Keywords for component names, adjective palettes, color roles, and shape descriptions.

3. Structure the Final Prompt

Format the enhanced prompt for Stitch. Focus exclusively on layout, content, and structure — never include colors, fonts, or theme instructions (these are handled by the manage-design-system skill at the project level).

For new screens, use this template:

[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

**PAGE STRUCTURE:**
1. **Header:** [Description of navigation and branding]
2. **Hero Section:** [Headline, subtext, and primary CTA]
3. **Primary Content Area:** [Detailed component breakdown]
4. **Footer:** [Links and copyright information]

For edits, be specific about what to change:

• Location: "Change the [primary button] in the [hero section]..."
• Visuals: "...to a darker blue (#004080) and add a subtle shadow."
• Structure: "Add a secondary button next to the primary one with the text

'Learn More'."

[!CAUTION]

Do NOT include hex codes, font names, color palettes, roundness values, or

any design system tokens in a generation prompt. These are applied at the

project level by the manage-design-system skill and will conflict if

duplicated. (For edit prompts, hex codes are acceptable for precise

color adjustments.)

4. Present AI Insights

After any tool call, always surface the outputComponents (Text Description and Suggestions) to the user.

See examples/enhanced-prompt.md for a full before/after prompt enhancement example.

--------------------------------------------------------------------------------

Steps

Determine the Mode

Decide which flow to use based on the user's request:

• User wants to create from a text description → Generate from Text flow
• User provides an image, screenshot, or mockup → Generate from Image flow
• User wants to modify an existing screen → Edit flow
• User wants layout/color/content variations → Generate Variants flow

---

Generate from Text Flow (New Screen)

1. Enhance the User Prompt

Apply the Prompt Enhancement Pipeline above.

2. Identify the Project

Use list_projects to find the correct projectId if it is not already known.

3. Generate the Screen

Call the generate_screen_from_text tool with the enhanced prompt and the designSystem ID (if found in Step 1).

{
  "projectId": "...",
  "prompt": "[Your Enhanced Prompt]",
  "designSystem": "assets/...", // Optional: Pass if found in Step 1
  "deviceType": "DESKTOP"  // Options: MOBILE, DESKTOP, TABLET
}

4. Present AI Feedback

Always show the text description and suggestions from outputComponents to the user.

5. Download Design Assets

After generation, download the HTML and screenshot urls from outputComponents to the .stitch/designs directory.

• Naming: Use the screen ID or a descriptive slug for the filename.
• Tools: Use curl -o via run_command or similar.
• Directory: Ensure .stitch/designs exists.

6. Review and Refine

• If the result is not exactly as expected, continue with the Edit flow

to make targeted adjustments.

• Do NOT re-generate from scratch unless the fundamental layout is wrong.

---

Generate from Image Flow (Image/Mockup → Design)

Use this flow when the user provides an image, screenshot, or design mockup to recreate in Stitch.

1. Identify the Project

Use list_projects to find the correct projectId. If no suitable project exists, create one using create_project.

2. Upload the Image

Delegate to the upload-to-stitch skill to upload the image to the project. This creates a new screen with the image as its content.

3. Refine with Edit

Once uploaded, use list_screens to find the newly created screenId, then call edit_screens with a descriptive prompt to refine the design:

{
  "projectId": "...",
  "selectedScreenIds": ["<uploaded-screen-id>"],
  "prompt": "[Describe what to adjust, enhance, or recreate from this mockup]"
}

[!TIP]

For best results, describe the intent behind the image rather than just saying

"make it look like this". For example: "This is a dashboard mockup — recreate

it with a proper data table, sidebar navigation, and chart widgets."

4. Present AI Feedback

Always show the text description and suggestions from outputComponents to the user.

5. Download Design Assets

Download the HTML and screenshot urls from outputComponents to the .stitch/designs directory.

• Naming: Use the screen ID or a descriptive slug for the filename.
• Tools: Use curl -o via run_command or similar.
• Directory: Ensure .stitch/designs exists.

---

Edit Flow (Modify Existing Screen)

1. Identify the Screen

Use list_screens or get_screen to find the correct projectId and screenId.

2. Formulate the Edit Prompt

Apply the Prompt Enhancement Pipeline, focusing on specificity:

• Location: "Change the color of the [primary button] in the [hero

section]..."

• Visuals: "...to a darker blue (#004080) and add a subtle shadow."
• Structure: "Add a secondary button next to the primary one with the text

'Learn More'."

3. Apply the Edit

Call the edit_screens tool.

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Your targeted edit prompt]"
}

4. Present AI Feedback

Always show the text description and suggestions from outputComponents to the user.

5. Download Design Assets

After editing, download the updated HTML and screenshot urls from outputComponents to the .stitch/designs directory, overwriting previous versions to ensure the local files reflect the latest edits.

• Naming: Use the screen ID or a descriptive slug for the filename.
• Tools: Use curl -o via run_command or similar.
• Directory: Ensure .stitch/designs exists.

6. Update Project Metadata

After downloading assets, update .stitch/metadata.json to reflect any changes (e.g., updated screen titles or new screen IDs from the edit). The metadata file tracks all screens, their device types, and design system info. See the manage-design-system skill's examples/metadata.json for the format.

7. Verify and Repeat

• Check the output screen to see if the changes were applied correctly.
• If more polish is needed, repeat the edit flow with a new specific prompt.

---

Generate Variants Flow (Explore Variations)

Use this flow when the user wants to explore alternative layouts, color schemes, or content variations of an existing screen.

1. Identify the Screen

Use list_screens or get_screen to find the correct projectId and screenId.

2. Configure Variant Options

Call the generate_variants tool with the appropriate options:

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Describe the direction for variants]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

Variant Options:

• `variantCount`: 1–5 variants (default: 3)
• `creativeRange`: REFINE (subtle), EXPLORE (balanced), or REIMAGINE

(radical)

• `aspects`: Focus on specific dimensions — LAYOUT, COLOR_SCHEME,

IMAGES, TEXT_FONT, TEXT_CONTENT, or leave empty for all

3. Present AI Feedback

Always show the text description and suggestions from outputComponents to the user.

4. Download Design Assets

Download the variant HTML and screenshot urls from outputComponents to the .stitch/designs directory.

• Naming: Use the screen ID or a descriptive slug for the filename.
• Tools: Use curl -o via run_command or similar.
• Directory: Ensure .stitch/designs exists.

--------------------------------------------------------------------------------

💡 Tips

• Be structural: Break the page down into header, hero, features, and

footer in your prompt.

• Content first: Describe what each section contains (text, images, CTAs)

rather than how it looks.

• Iterative Polish: Prefer editing for targeted adjustments over full

re-generation.

• No theme leakage: Never put hex codes, font names, or color roles in a

generation prompt — the design system handles all visual styling.

• Specify interactions: Mention hover states, animations, and click behavior

rather than visual styling.

• Keep edits focused: One edit at a time is often better than a long list of

changes.

• Reference components: Use professional terms like "navigation bar", "hero

section", "footer", "card grid".

• Precise colors in edits: Use hex codes for exact color matching when

editing existing screens.

📚 References

• Design Mappings — UI/UX keywords and

atmosphere descriptors.

• Prompting Keywords — Technical terms Stitch

understands best.

• Enhanced Prompt Example — Before/after prompt

enhancement.

Example: Prompt Enhancement

User Input (Vague)

"Make a landing page for my fitness app called 'Pulse'. It should have a

place for features and a hero section."

---

Enhanced Prompt (Stitch-Optimized)

[!NOTE]

This prompt contains NO colors, fonts, or theme instructions — those are

handled by the project's design system. The prompt focuses exclusively on

layout, structure, and content.

Overall Purpose: A high-energy, modern landing page for 'Pulse', a fitness tracking application. The page should feel powerful, motivating, and high-performance.

PLATFORM: Web, Desktop-first

PAGE STRUCTURE: 1. Header: Minimalist navigation with Pulse logo (left) and "Start Training" primary call-to-action button (right). 2. Hero Section: Large, emotive fitness photography background. Headline: "Elevate Every Beat." Sub-headline: "Track, analyze, and crush your fitness goals with Pulse." Primary CTA button: "Get Started". 3. Feature Grid: Three-column responsive card grid highlighting:

• Real-time Tracking: Live stats from your wearable.
• AI Coaching: Personalized workouts based on your performance.
• Community Challenges: Compete with friends and stay motivated.

4. Social Proof Section: Horizontal slider showing "Trusted by 500,000+ athletes" with partner logos. 5. Footer: Quick links (Training, Pricing, Support), social icons, and legal text.

--- 💡 Tip: Notice how the enhanced prompt describes structure and content without specifying hex codes, font families, or color roles. The design system (created via the manage-design-system skill) handles all visual theming at the project level.

Design Mappings & Descriptors

Use these mappings to transform vague user requests into precise, high-fidelity design instructions.

UI/UX Keyword Refinement

Atmosphere & "Vibe" Descriptors

Add these adjectives to set the mood and aesthetic philosophy:

Geometry & Shape Translation

Convert technical values into physical descriptions for Stitch:

• Pill-shaped: Used for rounded-full elements (buttons, tags).
• Softly rounded: Used for rounded-xl (12px) or rounded-2xl (16px) containers.
• Sharp/Precise: Used for rounded-none or rounded-sm elements.
• Glassmorphism: Semi-transparent surfaces with background blur and thin borders.

Depth & Elevation

• Flat: No shadows, focus on color blocking and borders.
• Whisper-soft: Diffused, light shadows for subtle lift.
• Floating: High-offset, soft shadows for elements that appear high above the surface.
• Inset: Inner shadows for pressable or nested elements.

UI/UX Keywords Reference

Progressive disclosure reference for common UI terminology and adjective palettes.

Component Keywords

Navigation

• navigation bar, nav menu, header
• breadcrumbs, tabs, sidebar
• hamburger menu, dropdown menu
• back button, close button

Content Containers

• hero section, hero banner
• card, card grid, tile
• modal, dialog, popup
• accordion, collapsible section
• carousel, slider

Forms

• input field, text input
• dropdown, select menu
• checkbox, radio button
• toggle switch
• date picker, time picker
• search bar, search input
• submit button, form actions

Calls to Action

• primary button, secondary button
• ghost button, text link
• floating action button (FAB)
• icon button

Feedback

• toast notification, snackbar
• alert banner, warning message
• loading spinner, skeleton loader
• progress bar, step indicator

Layout

• grid layout, flexbox
• sidebar layout, split view
• sticky header, fixed footer
• full-width, contained width
• centered content, max-width container

Adjective Palettes

Minimal / Clean

• minimal, clean, uncluttered
• generous whitespace, breathing room
• subtle, understated, refined
• simple, focused, distraction-free

Professional / Corporate

• sophisticated, polished, trustworthy
• corporate, business-like, formal
• subtle shadows, clean lines
• structured, organized, hierarchical

Playful / Fun

• vibrant, colorful, energetic
• rounded corners, soft edges
• bold, expressive, dynamic
• friendly, approachable, warm

Premium / Luxury

• elegant, luxurious, high-end
• dramatic, bold contrasts
• sleek, modern, cutting-edge
• exclusive, boutique, curated

Dark Mode

• dark theme, night mode
• high-contrast accents
• soft glows, subtle highlights
• deep backgrounds, muted surfaces

Organic / Natural

• earthy tones, natural colors
• warm, inviting, cozy
• textured, tactile, handcrafted
• flowing, organic shapes

Interaction & Behavior Keywords

Animations

• smooth entry animation, slide-in
• fade transition, cross-fade
• micro-interaction, bounce effect
• skeleton loader, shimmer effect

Responsiveness

• responsive layout, adaptive grid
• mobile-first, desktop-first
• breakpoint, viewport
• stacked layout, side-by-side

User Flows

• progressive disclosure, step indicator
• expandable section, collapsible panel
• infinite scroll, pagination
• drag and drop, swipe gesture

Shape Descriptions