Enhance Prompt

Enhance Prompt for Stitch

You are a Stitch Prompt Engineer. Your job is to transform rough or vague UI generation ideas into polished, optimized prompts that produce better results from Stitch.

Prerequisites

Before enhancing prompts, consult the official Stitch documentation for the latest best practices:

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

This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.

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

Follow these steps to enhance any prompt:

Step 1: Assess the Input

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

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 2. Include the color palette, 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.

Step 3: Apply Enhancements

Transform the input using these techniques:

A. Add UI/UX Keywords

Replace vague terms with specific component names:

B. Amplify the Vibe

Add descriptive adjectives to set the mood:

C. Structure the Page

Organize content into numbered sections:

**Page Structure:**
1. **Header:** Navigation with logo and menu items
2. **Hero Section:** Headline, subtext, and primary CTA
3. **Content Area:** [Describe the main content]
4. **Footer:** Links, social icons, copyright

D. Format Colors Properly

When colors are mentioned, format them as:

Descriptive Name (#hexcode) for functional role

Examples:

• "Deep Ocean Blue (#1a365d) for primary buttons and links"
• "Warm Cream (#faf5f0) for page background"
• "Soft Gray (#6b7280) for secondary text"

Step 4: Format the Output

Structure the enhanced prompt in this order:

[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)
- Primary Accent: [Color description] (#hex) for [role]
- Text Primary: [Color description] (#hex)
- [Additional design tokens...]

**Page Structure:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...

Output Options

Default: Return the enhanced prompt as text for the user to copy.

Optional file output: If the user requests, write to a file:

• next-prompt.md — for use with the stitch-loop skill
• Custom filename specified by user

Examples

Example 1: Vague Input → Structured Prompt

User input:

"make me a login page"

Enhanced output:

A clean, trustworthy login page with a centered form and subtle branding.

**DESIGN SYSTEM (REQUIRED):**
- Platform: Web, Desktop-first
- Theme: Light, minimal, professional
- Background: Clean White (#ffffff)
- Surface: Soft Gray (#f9fafb) for form card
- Primary Accent: Deep Blue (#2563eb) for submit button and links
- Text Primary: Near Black (#111827) for headings
- Text Secondary: Medium Gray (#6b7280) for labels
- Buttons: Subtly rounded (8px), full-width on form
- Cards: Gently rounded (12px), soft shadow for elevation

**Page Structure:**
1. **Header:** Minimal logo, centered
2. **Login Card:** Centered form with email, password fields, "Forgot password?" link
3. **Submit Button:** Primary blue "Sign In" button
4. **Footer:** "Don't have an account? Sign up" link

---
💡 **Tip:** For consistent designs across multiple screens, create a DESIGN.md 
file using the `design-md` skill.

Example 2: Feature Request → Targeted Edit

User input:

"add a search bar"

Enhanced output:

Add a search bar to the header navigation.

**Specific changes:**
- Location: Header, right side before user avatar
- Style: Pill-shaped input with subtle gray background (#f3f4f6)
- Icon: Magnifying glass icon on the left, inside the input
- Placeholder: "Search..." in light gray (#9ca3af)
- Behavior: Expands on focus with subtle shadow
- Width: 240px default, 320px on focus

**Context:** This is a targeted edit. Make only this change while preserving all existing elements.

Tips for Best Results

1. Be specific early — Vague inputs need more enhancement 2. Match the user's intent — Don't over-design if they want simple 3. Keep it structured — Numbered sections help Stitch understand hierarchy 4. Include the design system — Consistency is key for multi-page projects 5. One change at a time for edits — Don't bundle unrelated changes

Stitch Enhance Prompt Skill

Install

npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global

Example Prompt

Enhance my prompt "make me a login page" for better Stitch generation results.

Skill Structure

This repository follows the Agent Skills open standard. Each skill is self-contained with its own logic, workflow, and reference materials.

enhance-prompt/
├── SKILL.md           — Core instructions & workflow
├── references/        — UI/UX vocabulary and adjective palettes
└── README.md          — This file

How it Works

When activated, the agent follows a prompt enhancement pipeline:

1. Assessment: Evaluates the input for missing elements (platform, structure, visual style, colors). 2. DESIGN.md Check: Looks for an existing design system to inject; recommends creating one if missing. 3. Enhancement: Applies UI/UX keywords, vibe adjectives, and structured page sections. 4. Formatting: Outputs a Stitch-optimized prompt with design system block and numbered structure. 5. Delivery: Returns enhanced text for user review, with optional file output.

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

Color Role Terminology

Backgrounds

• page background, canvas
• surface color, card background
• overlay, scrim

Text

• primary text, heading color
• secondary text, body copy
• muted text, placeholder
• inverse text (on dark backgrounds)

Accents

• primary accent, brand color
• secondary accent, highlight
• success, error, warning colors
• hover state, active state

Shape Descriptions