--- name: enhance-prompt version: 1.1.0 description: Transforms vague UI/feature requests into structured, optimized prompts with design system awareness. Use when generating prompts for UI implementation, feature specification, or design-to-code translation. Triggers on tasks requiring prompt refinement, UI specification, or design system integration. license: MIT category: Frameworks tags: - prompt-engineering - ui-specification - design-system - frontend - react agents: - planner - frontend-pro - architect - developer tools: - Read - Write invoked_by: "Skill({ skill: 'enhance-prompt' })" user_invocable: true metadata: author: google-labs-code source: google-labs-code/stitch-skills verified: false lastVerifiedAt: 2026-02-22T00:00:00.000Z --- # Enhance Prompt Transform vague UI and feature requests into structured, optimized prompts with design system awareness. Based on the Google Labs Stitch Skills prompt enhancement pipeline. ## When to Apply Use this skill when: - A user request describes a UI feature vaguely ("make a nice login page") - You need to generate implementation prompts from loose requirements - Translating design mockups or wireframes into actionable specs - Integrating design system tokens into component specifications - Scaffolding page layouts from high-level descriptions ## 4-Step Enhancement Pipeline ### Step 1: Assess Intent Analyze the raw request to identify: - **Core objective**: What is the user trying to build? - **Implicit requirements**: What is assumed but not stated? - **Target audience**: Who will use this UI? - **Interaction patterns**: What user flows are implied? **Example:** ``` Raw: "Add a settings page" Assessment: - Core: User preferences management interface - Implicit: Navigation integration, form validation, save/cancel actions - Audience: Authenticated users - Interactions: View current settings, modify, save, receive confirmation ``` ### Step 2: Check DESIGN.md Look for a `DESIGN.md` or equivalent design system file in the project root or docs directory. Extract: - **Color tokens**: Primary, secondary, accent, semantic colors - **Typography scale**: Font families, sizes, weights, line heights - **Spacing system**: Base unit, scale (4px, 8px, 12px, 16px, etc.) - **Component inventory**: Available pre-built components - **Layout patterns**: Grid system, breakpoints, container widths If no design system file exists, generate reasonable defaults based on the project's existing patterns (check `tailwind.config.*`, `theme.*`, or CSS custom properties). **Lookup order:** 1. `DESIGN.md` in project root 2. `docs/design-system.md` 3. `tailwind.config.ts` / `tailwind.config.js` theme section 4. CSS custom properties in global styles 5. shadcn/ui theme configuration (if present) ### Step 3: Apply Enhancements Transform the raw request by applying these enhancement layers: #### 3a. Add Specificity Replace vague terms with specific component names and patterns: | Vague Term | Specific Replacement | | --------------- | ------------------------------------------------------------------------- | | "nice" | Clean layout with consistent spacing, proper visual hierarchy | | "modern" | Card-based layout, rounded corners, subtle shadows, micro-interactions | | "responsive" | Mobile-first grid (1-col mobile, 2-col tablet, 3-col desktop) | | "fast" | Skeleton loading states, optimistic updates, prefetched data | | "user-friendly" | Clear labels, inline validation, helpful error messages, focus management | | "beautiful" | Design-system-compliant colors, balanced whitespace, typography scale | | "simple" | Single-column layout, minimal navigation, progressive disclosure | | "interactive" | Hover states, transitions, keyboard navigation, ARIA attributes | #### 3b. Inject Design Tokens Insert design system values into the specification: ``` Enhanced: "Use the primary color (--color-primary / colors.primary.500) for the submit button. Apply spacing-4 (16px) between form fields. Use the heading-2 typography preset for section titles." ``` #### 3c. Scaffold Layout Structure Generate a structural layout for the page/component: ``` Page Layout: Header: Breadcrumb navigation + page title Body: Sidebar (desktop only): Section navigation Main Content: Section 1: [Primary feature area] Section 2: [Secondary feature area] Section 3: [Related actions] Footer: Save/Cancel actions (sticky on mobile) ``` #### 3d. Add Interaction Specifications Specify loading states, error states, empty states, and transitions: - **Loading**: Skeleton placeholder matching final layout - **Error**: Inline error messages with retry action - **Empty**: Helpful illustration + primary action CTA - **Success**: Toast notification + state update - **Transitions**: 200ms ease-in-out for element appearance ### Step 4: Format Output Produce the enhanced prompt in this structured format: ```markdown ## Enhanced Specification: [Feature Name] ### Objective [1-2 sentences describing the precise goal] ### Design System Integration - Colors: [specific tokens] - Typography: [specific presets] - Spacing: [specific scale values] - Components: [reusable components to use] ### Layout Structure [ASCII or markdown layout diagram] ### Component Breakdown 1. [Component name] - [purpose] - [key props/state] 2. [Component name] - [purpose] - [key props/state] ### Interaction States - Loading: [description] - Error: [description] - Empty: [description] - Success: [description] ### Accessibility Requirements - Keyboard navigation: [specifics] - Screen reader: [ARIA labels/roles] - Focus management: [focus trap/restore behavior] ### Responsive Behavior - Mobile (< 640px): [layout] - Tablet (640-1024px): [layout] - Desktop (> 1024px): [layout] ``` ## Complete Example **Raw Request:** "Build a dashboard for our analytics" **Enhanced Output:** ```markdown ## Enhanced Specification: Analytics Dashboard ### Objective Build a data visualization dashboard displaying key business metrics with real-time updates, date range filtering, and exportable reports. ### Design System Integration - Colors: --color-primary for active states, --color-success/warning/danger for metric status indicators - Typography: heading-1 for page title, heading-3 for card titles, body-sm for metric labels - Spacing: gap-6 between metric cards, padding-4 inside cards - Components: Card, Select (date picker), Button, Badge, Skeleton ### Layout Structure [Nav] [Page Title + Date Range Selector + Export Button] [KPI Card] [KPI Card] [KPI Card] [KPI Card] <- 4-col grid [Line Chart (2/3 width)] [Pie Chart (1/3 width)] <- 2-col split [Data Table (full width)] <- sortable, paginated ### Component Breakdown 1. KPICard - Displays single metric with trend indicator - { label, value, change, status } 2. DateRangeSelector - Preset ranges + custom date picker - { range, onRangeChange } 3. TrendChart - Line/area chart for time series data - { data, dateRange, metric } 4. DistributionChart - Pie/donut for categorical data - { data, metric } 5. MetricsTable - Sortable, paginated data table - { columns, data, sortBy, page } ### Interaction States - Loading: Skeleton cards (pulse animation) matching final dimensions - Error: Error banner with retry button, individual chart error boundaries - Empty: "No data for selected range" with suggestion to expand range - Success: Smooth number transitions (count-up animation) on data refresh ### Accessibility Requirements - Keyboard navigation: Tab through cards, charts have data table alternatives - Screen reader: Chart descriptions via aria-label, live region for metric updates - Focus management: Date picker focus trap, return focus on close ### Responsive Behavior - Mobile (< 640px): Single column, KPI cards stack vertically, charts full width - Tablet (640-1024px): 2-col KPI grid, charts stack vertically - Desktop (> 1024px): 4-col KPI grid, side-by-side charts ``` ## Anti-Patterns - Do NOT skip Step 2 (design system check) -- prompts without design tokens produce inconsistent UI - Do NOT leave vague terms unresolved -- "nice" is not a specification - Do NOT generate prompts without interaction states -- every view has loading, error, and empty states - Do NOT ignore accessibility -- every enhanced prompt must include keyboard and screen reader specs - Do NOT hardcode pixel values -- always reference design system tokens or relative units ## Iron Laws 1. **ALWAYS** analyze the original prompt for ambiguities and implicit assumptions before enhancing — never enhance a prompt whose scope you haven't verified with the caller. 2. **NEVER** add requirements that weren't implicit or explicit in the original — enhancement clarifies and structures; it does not invent scope. 3. **ALWAYS** preserve the original intent — an enhanced prompt that redirects to a different goal is a rewrite, not an enhancement. 4. **NEVER** produce an enhanced prompt longer than necessary to resolve ambiguities — verbosity in prompts reduces AI response quality; keep it focused. 5. **ALWAYS** include success criteria in the enhanced prompt — a prompt without acceptance criteria cannot be evaluated as done or not done. ## Memory Protocol (MANDATORY) After using this skill, record learnings using `MemoryRecord`: ```javascript MemoryRecord({ type: 'pattern', text: 'enhance-prompt: [describe what design system pattern or prompt structure worked well]', area: 'frontend', }); ``` Write decisions to `.claude/context/memory/decisions.md` when choosing between design system approaches. Write issues to `.claude/context/memory/issues.md` when DESIGN.md is absent and fallback patterns were used.