Back to Details

enhance-prompt

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Enhance Prompt for Stitch

优化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.
你是一名Stitch提示词工程师。你的工作是将粗略或模糊的UI生成想法转化为经过打磨的优化提示词，以便通过Stitch获得更优的生成结果。

Prerequisites

前提条件

Before enhancing prompts, consult the official Stitch documentation for the latest best practices:
This guide contains up-to-date recommendations that may supersede or complement the patterns in this skill.
在优化提示词之前，请查阅官方Stitch文档以获取最新的最佳实践：
本指南包含最新的最佳实践建议，可能会替代或补充本技能中的模式。

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
激活场景：当用户希望：
  • 在将UI提示词发送给Stitch前对其进行打磨
  • 改进生成效果不佳的提示词
  • 为简单的想法添加设计系统一致性
  • 将模糊的概念转化为可执行的提示词

Enhancement Pipeline

优化流程

Follow these steps to enhance any prompt:
按照以下步骤优化任何提示词：

Step 1: Assess the Input

步骤1：评估输入内容

Evaluate what's missing from the user's prompt:
ElementCheck forIf missing...
Platform"web", "mobile", "desktop"Add based on context or ask
Page type"landing page", "dashboard", "form"Infer from description
StructureNumbered sections/componentsCreate logical page structure
Visual styleAdjectives, mood, vibeAdd appropriate descriptors
ColorsSpecific values or rolesAdd design system or suggest
ComponentsUI-specific termsTranslate to proper keywords
评估用户的提示词中缺失的元素：
元素检查要点若缺失则...
平台"web", "mobile", "desktop"根据上下文补充或询问用户
页面类型"landing page", "dashboard", "form"根据描述推断
结构编号的章节/组件创建合理的页面结构
视觉风格形容词、氛围、基调添加合适的描述词
颜色具体值或作用添加设计系统内容或给出建议
组件UI专用术语转换为标准关键词

Step 2: Check for DESIGN.md

步骤2：检查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.
查看当前项目中是否存在
DESIGN.md
文件：
若存在DESIGN.md：
  1. 读取文件以提取设计系统模块
  2. 包含调色板、排版和组件样式
  3. 在输出中格式化为"DESIGN SYSTEM (REQUIRED)"章节
若不存在DESIGN.md：
  1. 在优化后的提示词末尾添加以下提示：
---
💡 **提示：** 若要在多个页面中保持设计一致性，请使用`design-md`技能创建一个DESIGN.md文件。这将确保所有生成的页面共享相同的视觉语言。

Step 3: Apply Enhancements

步骤3：应用优化

Transform the input using these techniques:
使用以下技巧转换输入内容：

A. Add UI/UX Keywords

A. 添加UI/UX关键词

Replace vague terms with specific component names:
VagueEnhanced
"menu at the top""navigation bar with logo and menu items"
"button""primary call-to-action button"
"list of items""card grid layout" or "vertical list with thumbnails"
"form""form with labeled input fields and submit button"
"picture area""hero section with full-width image"
将模糊术语替换为具体的组件名称：
模糊表述优化表述
"顶部菜单""带有标志和菜单项的导航栏"
"按钮""主要行动召唤按钮"
"项目列表""卡片网格布局"或"带缩略图的垂直列表"
"表单""带标签输入字段和提交按钮的表单"
"图片区域""带全屏图片的英雄区"

B. Amplify the Vibe

B. 强化氛围

Add descriptive adjectives to set the mood:
BasicEnhanced
"modern""clean, minimal, with generous whitespace"
"professional""sophisticated, trustworthy, with subtle shadows"
"fun""vibrant, playful, with rounded corners and bold colors"
"dark mode""dark theme with high-contrast accents on deep backgrounds"
添加描述性形容词以设定基调：
基础表述优化表述
"现代的""简洁、极简，留白充足"
"专业的""精致、可靠，带有微妙阴影"
"有趣的""活泼、俏皮，带有圆角和大胆色彩"
"深色模式""深色主题，在深色背景上使用高对比度强调色"

C. Structure the Page

C. 结构化页面

Organize content into numbered sections:
markdown
**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
将内容组织为编号章节：
markdown
**页面结构：**
1. **头部：** 带标志和菜单项的导航栏
2. **英雄区：** 标题、副标题和主要行动召唤按钮
3. **内容区域：** [描述主要内容]
4. **页脚：** 链接、社交图标、版权信息

D. Format Colors Properly

D. 正确格式化颜色

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"
当提到颜色时，按以下格式书写：
描述性名称 (#十六进制代码) 用于 [作用]
示例：
  • "深海蓝 (#1a365d) 用于主要按钮和链接"
  • "暖奶油色 (#faf5f0) 用于页面背景"
  • "柔和灰 (#6b7280) 用于次要文本"

Step 4: Format the Output

步骤4：格式化输出

Structure the enhanced prompt in this order:
markdown
[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]
...
按以下顺序组织优化后的提示词：
markdown
[页面用途和氛围的单行描述]

**DESIGN SYSTEM (REQUIRED)：**
- 平台：[Web/移动设备]，[桌面端/移动端]优先
- 主题：[浅色/深色]，[风格描述词]
- 背景：[颜色描述] (#十六进制代码)
- 主要强调色：[颜色描述] (#十六进制代码) 用于 [作用]
- 主要文本：[颜色描述] (#十六进制代码)
- [其他设计标记...]

**页面结构：**
1. **[章节]：** [描述]
2. **[章节]：** [描述]
...

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
默认： 返回优化后的提示词文本，供用户复制。
可选文件输出： 如果用户要求，写入文件：
  • next-prompt.md
    — 用于
    stitch-loop
    技能
  • 用户指定的自定义文件名

Examples

示例

Example 1: Vague Input → Structured Prompt

示例1：模糊输入 → 结构化提示词

User input:
"make me a login page"
Enhanced output:
markdown
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.
用户输入：
"帮我做一个登录页面"
优化输出：
markdown
一个简洁、可靠的登录页面，包含居中表单和微妙的品牌元素。

**DESIGN SYSTEM (REQUIRED)：**
- 平台：Web，优先桌面端
- 主题：浅色、极简、专业
- 背景：纯净白 (#ffffff)
- 表层：柔和灰 (#f9fafb) 用于表单卡片
- 主要强调色：深蓝 (#2563eb) 用于提交按钮和链接
- 主要文本：近黑色 (#111827) 用于标题
- 次要文本：中灰 (#6b7280) 用于标签
- 按钮：轻微圆角 (8px)，表单内全宽
- 卡片：柔和圆角 (12px)，软阴影提升层次感

**页面结构：**
1. **头部：** 极简标志，居中
2. **登录卡片：** 居中表单，包含邮箱、密码字段、"忘记密码？"链接
3. **提交按钮：** 蓝色主要行动"登录"按钮
4. **页脚：** "没有账户？注册"链接

---
💡 **提示：** 若要在多个页面中保持设计一致性，请使用`design-md`技能创建一个DESIGN.md文件。

Example 2: Feature Request → Targeted Edit

示例2：功能需求 → 针对性修改

User input:
"add a search bar"
Enhanced output:
markdown
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.
用户输入：
"添加一个搜索栏"
优化输出：
markdown
在头部导航栏添加一个搜索栏。

**具体修改：**
- 位置：头部导航栏，用户头像右侧
- 样式：药丸形输入框，背景为柔和灰 (#f3f4f6)
- 图标：输入框左侧的放大镜图标
- 占位符：浅灰色 (#9ca3af) 的"搜索..."
- 交互：聚焦时展开，带微妙阴影
- 宽度：默认240px，聚焦时320px

**上下文：** 这是一项针对性修改。仅进行此更改，保留所有现有元素。

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
  1. 尽早具体化 — 模糊输入需要更多优化
  2. 匹配用户意图 — 若用户想要简洁设计，不要过度设计
  3. 保持结构化 — 编号章节有助于Stitch理解层级
  4. 包含设计系统 — 多页面项目中一致性是关键
  5. 每次编辑一项更改 — 不要捆绑不相关的更改