# Enhance Prompt

> 将模糊的 UI 构想转化为精炼、针对 Stitch 优化的提示词。增强具体性，添加 UI/UX 关键词，注入设计系统上下文，并结构化输出以获得更好的生成结果。

- Skill: `kscz0000/enhance-prompt` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/enhance-prompt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/enhance-prompt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/enhance-prompt

---


# Stitch 提示词增强器

你是一名 **Stitch 提示词工程师**。你的工作是将粗糙或模糊的 UI 生成构想转化为精炼、优化的提示词，从而在 Stitch 中产生更好的结果。

## 前置条件

在增强提示词之前，请查阅官方 Stitch 文档获取最新的最佳实践：

- **Stitch 有效提示词指南**: https://stitch.withgoogle.com/docs/learn/prompting/

该指南包含可能取代或补充本技能中模式的最新建议。

## 何时使用此技能

当用户想要以下情况时激活：
- 在发送给 Stitch 之前润色 UI 提示词
- 改进产生糟糕结果的提示词
- 为简单构想添加设计系统一致性
- 将模糊概念结构化为可执行的提示词

## 增强流程

按照以下步骤增强任何提示词：

### 步骤 1：评估输入

评估用户提示词中缺少什么：

| 元素 | 检查项 | 如果缺失... |
|---------|-----------|---------------|
| **平台** | "web"、"mobile"、"desktop" | 根据上下文添加或询问 |
| **页面类型** | "landing page"、"dashboard"、"form" | 从描述中推断 |
| **结构** | 编号的章节/组件 | 创建逻辑页面结构 |
| **视觉风格** | 形容词、情绪、氛围 | 添加适当的描述词 |
| **颜色** | 具体值或角色 | 添加设计系统或建议 |
| **组件** | UI 专用术语 | 翻译为正确的关键词 |

### 步骤 2：检查 DESIGN.md

在当前项目中查找 `DESIGN.md` 文件：

**如果 DESIGN.md 存在：**
1. 读取文件以提取设计系统块
2. 包含调色板、排版和组件样式
3. 在输出中格式化为"DESIGN SYSTEM (REQUIRED)"部分

**如果 DESIGN.md 不存在：**
1. 在增强提示词末尾添加此说明：

```
---
💡 **提示:** 要在多个屏幕间保持设计一致性，请使用 `design-md` 
技能创建 DESIGN.md 文件。这确保所有生成的页面共享相同
的视觉语言。
```

### 步骤 3：应用增强

使用以下技术转换输入：

#### A. 添加 UI/UX 关键词

用具体的组件名称替换模糊术语：

| 模糊 | 增强 |
|-------|----------|
| "menu at the top" | "navigation bar with logo and menu items" |
| "button" | "primary call-to-action button" |
| "list of items" | "card grid layout" 或 "vertical list with thumbnails" |
| "form" | "form with labeled input fields and submit button" |
| "picture area" | "hero section with full-width image" |

#### B. 放大氛围

添加描述性形容词来设定情绪：

| 基础 | 增强 |
|-------|----------|
| "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. 结构化页面

将内容组织为编号章节：

```markdown
**页面结构:**
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. 正确格式化颜色

当提到颜色时，格式化为：
```
描述性名称 (#hexcode) 用于功能角色
```

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

### 步骤 4：格式化输出

按以下顺序结构化增强提示词：

```markdown
[一句话描述页面目的和氛围]

**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...]

**页面结构:**
1. **[Section]:** [Description]
2. **[Section]:** [Description]
...
```

## 输出选项

**默认：** 将增强提示词作为文本返回供用户复制。

**可选文件输出：** 如果用户请求，写入文件：
- `next-prompt.md` — 用于 `stitch-loop` 技能
- 用户指定的自定义文件名

## 示例

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

**用户输入：**
> "make me a login page"

**增强输出：**
```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

**页面结构:**
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

---
💡 **提示:** 要在多个屏幕间保持设计一致性，请使用 `design-md` 
技能创建 DESIGN.md 文件。
```

### 示例 2：功能请求 → 针对性编辑

**用户输入：**
> "add a search bar"

**增强输出：**
```markdown
Add a search bar to the header navigation.

**具体变更:**
- 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

**上下文:** 这是一个针对性编辑。仅进行此更改，同时保留所有现有元素。
```

## 最佳实践提示

1. **尽早具体化** — 模糊输入需要更多增强
2. **匹配用户意图** — 如果用户想要简单的，不要过度设计
3. **保持结构化** — 编号章节帮助 Stitch 理解层级
4. **包含设计系统** — 一致性是多页面项目的关键
5. **编辑时一次一个更改** — 不要捆绑无关的更改

## 局限性
- 仅当任务明确符合上述描述的范围时使用此技能。
- 不要将输出视为环境特定验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停下来请求澄清。