enhance-prompt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

将模糊的UI和功能需求转换为具备设计系统感知能力的结构化优化提示词，基于Google Labs Stitch Skills提示词增强流水线开发。

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

符合以下情况时可使用本能力：

用户需求对UI功能的描述模糊（比如“做一个好看的登录页”）
你需要基于松散的需求生成可用于实现的提示词
将设计稿或线框图转换为可执行的规格说明
将设计系统令牌集成到组件规格中
基于高层级描述搭建页面布局框架

4-Step Enhancement Pipeline

四步增强流水线

Step 1: Assess Intent

步骤1：评估意图

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

分析原始请求，识别以下信息：

核心目标：用户想要搭建什么功能？
隐含需求：哪些内容是默认需要但未明确说明的？
目标受众：哪些用户会使用这个UI？
交互模式：隐含了哪些用户流程？

示例：

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

步骤2：检查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:

```
DESIGN.md
```
in project root
```
docs/design-system.md
```
```
tailwind.config.ts
```
/
```
tailwind.config.js
```
theme section
CSS custom properties in global styles
shadcn/ui theme configuration (if present)

DESIGN.md

或等效的设计系统文件，提取以下信息：

颜色令牌：主色、辅助色、强调色、语义色
排版体系：字体族、字号、字重、行高
间距系统：基础单位、缩放比例（4px、8px、12px、16px等）
组件清单：可用的预制组件
布局模式：网格系统、断点、容器宽度

如果不存在设计系统文件，基于项目现有模式生成合理的默认值（可检查

tailwind.config.*

、

theme.*

或CSS自定义属性）。

查找优先级：

项目根目录下的
```
DESIGN.md
```
```
docs/design-system.md
```
```
tailwind.config.ts
```
/
```
tailwind.config.js
```
的theme配置段
全局样式中的CSS自定义属性
shadcn/ui主题配置（如果存在）

Step 3: Apply Enhancements

步骤3：应用增强规则

Transform the raw request by applying these enhancement layers:

通过以下增强层转换原始请求：

3a. Add Specificity

3a. 增加明确性

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

将模糊术语替换为具体的组件名称和模式：

模糊术语	明确替换内容
"nice"	间距一致、视觉层级合理的简洁布局
"modern"	卡片式布局、圆角、柔和阴影、微交互
"responsive"	移动端优先网格（移动端1列、平板2列、桌面端3列）
"fast"	骨架屏加载状态、乐观更新、数据预取
"user-friendly"	清晰的标签、行内校验、友好的错误提示、焦点管理
"beautiful"	符合设计系统规范的颜色、均衡的留白、统一的排版体系
"simple"	单列布局、极简导航、渐进式展示
"interactive"	悬停状态、过渡动画、键盘导航、ARIA属性

3b. Inject Design Tokens

3b. 注入设计令牌

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."

将设计系统值插入到规格说明中：

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

3c. 搭建布局结构

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)

为页面/组件生成结构化布局：

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

3d. 添加交互规格

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

定义加载状态、错误状态、空状态和过渡效果：

加载：与最终布局匹配的骨架屏占位
错误：带重试操作的行内错误提示
空状态：引导性插图+主操作CTA
成功：Toast通知+状态更新
过渡：元素出现采用200ms ease-in-out动画

Step 4: Format Output

步骤4：格式化输出

Produce the enhanced prompt in this structured format:

markdown

undefined

按照以下结构化格式生成增强后的提示词：

markdown

undefined

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]

Colors: [specific tokens]
Typography: [specific presets]
Spacing: [specific scale values]
Components: [reusable components to use]

Layout Structure

[ASCII or markdown layout diagram]

Component Breakdown

[Component name] - [purpose] - [key props/state]
[Component name] - [purpose] - [key props/state]

[Component name] - [purpose] - [key props/state]
[Component name] - [purpose] - [key props/state]

Interaction States

Loading: [description]
Error: [description]
Empty: [description]
Success: [description]

Loading: [description]
Error: [description]
Empty: [description]
Success: [description]

Accessibility Requirements

Keyboard navigation: [specifics]
Screen reader: [ARIA labels/roles]
Focus management: [focus trap/restore behavior]

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]

undefined

Mobile (< 640px): [layout]
Tablet (640-1024px): [layout]
Desktop (> 1024px): [layout]

undefined

Complete Example

完整示例

Raw Request: "Build a dashboard for our analytics"

Enhanced Output:

markdown

undefined

原始请求： "Build a dashboard for our analytics"

增强输出：

markdown

undefined

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

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

KPICard - Displays single metric with trend indicator - { label, value, change, status }
DateRangeSelector - Preset ranges + custom date picker - { range, onRangeChange }
TrendChart - Line/area chart for time series data - { data, dateRange, metric }
DistributionChart - Pie/donut for categorical data - { data, metric }
MetricsTable - Sortable, paginated data table - { columns, data, sortBy, page }

KPICard - Displays single metric with trend indicator - { label, value, change, status }
DateRangeSelector - Preset ranges + custom date picker - { range, onRangeChange }
TrendChart - Line/area chart for time series data - { data, dateRange, metric }
DistributionChart - Pie/donut for categorical data - { data, metric }
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

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

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

undefined

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

undefined

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

不要跳过步骤2（设计系统检查）—— 没有设计令牌的提示词会生成不一致的UI
不要保留未处理的模糊术语—— “好看”不是合格的规格说明
不要生成没有交互状态的提示词—— 每个视图都有加载、错误和空状态
不要忽略可访问性—— 每个增强后的提示词都必须包含键盘和屏幕阅读器相关规格
不要硬编码像素值—— 始终引用设计系统令牌或相对单位

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.

始终在增强前分析原始提示词的模糊点和隐含假设—— 永远不要增强你尚未和调用方确认范围的提示词。
绝不添加原始需求中没有隐含或明确说明的要求—— 增强是澄清和结构化内容，而不是凭空创造需求范围。
始终保留原始意图—— 偏离原有目标的增强提示词是重写，不是增强。
绝不生成超出消歧义所需长度的提示词—— 过于冗长的提示词会降低AI响应质量，保持内容聚焦。
始终在增强提示词中包含成功标准—— 没有验收标准的提示词无法判断是否完成。

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.

使用本能力后，通过

MemoryRecord

记录学习内容：

javascript

MemoryRecord({
  type: 'pattern',
  text: 'enhance-prompt: [describe what design system pattern or prompt structure worked well]',
  area: 'frontend',
});

在不同设计系统方案间做选择时，将决策写入

.claude/context/memory/decisions.md

。当不存在DESIGN.md且使用了 fallback 模式时，将问题写入

.claude/context/memory/issues.md

。