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.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
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.
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
If no design system file exists, generate reasonable defaults based on the project's existing patterns (check tailwind.config.*, theme.*, or CSS custom properties).
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:
Raw Request: "Build a dashboard for our analytics"
Enhanced Output:
## 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 Breakdown1. 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
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.
NEVER add requirements that weren't implicit or explicit in the original — enhancement clarifies and structures; it does not invent scope.
ALWAYS preserve the original intent — an enhanced prompt that redirects to a different goal is a rewrite, not an enhancement.
NEVER produce an enhanced prompt longer than necessary to resolve ambiguities — verbosity in prompts reduces AI response quality; keep it focused.
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:
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.
