“实用工具与提示增强”不是单独的前端运行时模块，而是一组面向 Agent 的辅助技能，主要服务于 Stitch 设计工作流里的前期整理、提示词打磨、设计规范生成和多页面站点迭代。
它解决的不是“生成一个按钮”这类局部问题，而是这些更常见的场景：
DESIGN.md，导致每次生成页面时视觉风格不一致。这个模块通常和以下能力配合使用：
stitch::generate-design：根据文本或图片生成 / 编辑 Stitch 设计。stitch::manage-design-system：上传并应用 DESIGN.md。stitch::code-to-design：从已有前端代码迁移到 Stitch 设计。stitch-utilities 插件中的辅助技能：提示词优化、设计规范生成、站点生成循环等。DESIGN.md、优化提示词和站点生成计划DESIGN.md 是设计系统的文件接口DESIGN.md 是这个模块最重要的中间产物。它把“设计风格”从自然语言描述变成可复用的项目资产。
一个典型的 DESIGN.md 会包含：
markdown# Design System
## Brand
- Product name:
- Positioning:
- Personality:
- Target users:
## Visual Direction
- Overall style:
- Mood:
- Density:
- Layout principles:
## Color Tokens
- Primary:
- Secondary:
- Background:
- Surface:
- Text:
- Border:
- Success:
- Warning:
- Error:
## Typography
- Font direction:
- Display:
- Heading:
- Body:
- Caption:
## Spacing
- Base unit:
- Section spacing:
- Card padding:
- Form spacing:
## Components
### Buttons
### Cards
### Navigation
### Forms
### Empty States
### Modals
## Accessibility
- Contrast:
- Focus states:
- Touch target:
- Motion:
## Stitch Usage Notes
- Preferred screen sizes:
- Reusable patterns:
- Avoid:在 Stitch 工作流里，它的作用类似“设计系统说明书”：
DESIGN.md。stitch::manage-design-system 上传到 Stitch。这样可以减少常见问题：
提示词优化能力会把粗糙描述拆成更稳定的设计生成输入。
例如原始需求：
text帮我做一个高级一点的 AI 记账 App 首页，适合年轻人。
优化后会补齐这些维度：
textCreate a mobile app home screen for an AI-powered personal finance tracker. Platform: - iOS mobile app - 390x844 viewport Audience: - Young professionals, 22–35 - Users who want quick spending insights without complex accounting setup Visual direction: - Premium, calm, trustworthy - Soft gradients, high contrast financial data cards - Clean spacing, rounded cards, subtle depth - Avoid cartoonish illustrations or overly corporate banking style Screen content: - Top greeting with user name - Monthly spending summary - AI insight card explaining one spending pattern - Category breakdown - Recent transactions - Primary CTA: “Ask AI about my spending” - Bottom tab navigation Design constraints: - Use a modern fintech style - Maintain strong readability for numbers - Use accessible color contrast - Keep the layout scannable within one screen
优化后的提示词更适合交给 stitch::generate-design，因为它明确了：
完整站点生成循环适合官网、营销页、SaaS 产品站、活动页、文档站等多页面设计。
它通常按下面的顺序工作：
DESIGN.md。例如一个 B2B SaaS 官网会被拆成：
text- Home - Product - Pricing - Customers - Blog - Contact Sales
每个页面不会孤立生成，而是带着统一的品牌和组件规范进入 Stitch。
“高品质设计规范生成”用于把主观要求转成设计评审标准。
比如用户说：
text要有 Apple 官网那种高级感。
模块不会只保留这句话，而是会拆成更明确的质量标准：
textQuality bar: - Large intentional whitespace - Clear hierarchy with one dominant message per viewport - Premium product imagery or abstract visual system - Restrained color palette - High-quality typography rhythm - Minimal decoration - Subtle motion hints only where useful - Strong alignment and grid consistency - No crowded sections - No generic stock SaaS layout
这些标准可以继续用于：
DESIGN.md推荐按插件方式安装完整能力：
bashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
Cursor 工作区安装：
bashnpx plugins add google-labs-code/stitch-skills --scope workspace --target cursor
Codex 可以先添加 marketplace：
bashcodex plugin marketplace add google-labs-code/stitch-skills --ref main \ --sparse .agents/plugins \ --sparse plugins/stitch-design \ --sparse plugins/stitch-build \ --sparse plugins/stitch-utilities
然后按需安装：
bashnpx skills add google-labs-code/stitch-skills
查看插件和技能帮助：
bashnpx plugins --help
npx skills --help这些技能需要 Agent 环境中已经配置好 Stitch MCP server。
也就是说，下面这些事情不是模块自己完成的：
模块负责组织提示词、设计系统文档和生成流程；真正和 Stitch 通信由 Agent 通过 MCP server 完成。
适合用于生成 DESIGN.md 和站点设计计划。
markdown# Product Brief
Product: FlowLedger
FlowLedger is an AI bookkeeping app for freelancers and small studios.
Audience:
- Freelancers
- Designers
- Consultants
- Small creative teams
Main value:
- Automatically categorizes income and expenses
- Explains cashflow in plain language
- Helps users prepare for tax season
Tone:
- Calm
- Smart
- Friendly
- Premium but not corporate
Pages needed:
- Landing page
- Features
- Pricing
- Login
- Dashboard preview输出通常包括：
DESIGN.md适合用于提示词优化。
text做一个自由职业者记账产品的网站，现代一点，有 AI 感。
输出通常是结构化 prompt：
markdown# Optimized Stitch Prompt
Create a modern marketing website for an AI bookkeeping product for freelancers.
## Page
Landing page
## Audience
Freelancers, consultants, designers, and small creative studios.
## Visual direction
Premium fintech, calm, intelligent, friendly. Use clean cards, soft gradients,
clear financial data visualization, and generous spacing.
## Sections
1. Hero with headline, subheadline, product UI preview, and primary CTA
2. Trust indicators
3. AI bookkeeping features
4. Cashflow insight section
5. Tax preparation benefit section
6. Pricing teaser
7. Final CTA
## Constraints
- Avoid generic crypto or banking visuals
- Avoid crowded dashboard screenshots
- Keep typography highly readable
- Make the CTA visible above the fold适合用于完整站点生成循环中的迭代。
text首页太像普通 SaaS 模板了。希望更像给创意自由职业者用的产品， 减少企业蓝，多一些温暖、轻量、工作室感。Hero 区域要更有记忆点。
输出通常是修正后的方向：
markdown# Revision Direction
## Problems
- Current style feels too corporate
- Blue-heavy palette weakens the creative freelancer positioning
- Hero lacks a distinctive visual metaphor
## Adjustments
- Move from corporate blue to warm neutral + mint accent
- Use studio desk / invoice flow / AI assistant metaphor
- Introduce hand-crafted but polished visual details
- Keep layout premium and uncluttered
## Updated Prompt Notes
- Use warm off-white background
- Add soft green and amber accents
- Include invoice cards transforming into organized cashflow insights
- Avoid enterprise dashboard clichésDESIGN.md下面示例使用 Claude Code。前提是：
npx。bashmkdir stitch-utility-demo
cd stitch-utility-demo
cat > brief.md <<'EOF'
# Product Brief
Product: FlowLedger
FlowLedger is an AI bookkeeping app for freelancers and small creative studios.
Audience:
- Freelancers
- Independent designers
- Consultants
- Small creative teams
Core value:
- Automatically categorizes income and expenses
- Explains cashflow in natural language
- Helps users prepare for taxes
- Reduces bookkeeping anxiety
Tone:
- Calm
- Smart
- Friendly
- Premium but not corporate
Visual preferences:
- Warm neutral background
- Soft green accent
- Clear financial cards
- Minimal but not cold
- Avoid traditional bank styling
Initial screens:
- Landing page
- Pricing page
- Login page
- Dashboard overview
EOFbashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
DESIGN.mdbashclaude -p "$(cat <<'EOF'
Use the Stitch utilities and prompt-enhancement workflow.
Read ./brief.md and create a project-level DESIGN.md.
The DESIGN.md should include:
- Brand positioning
- Visual direction
- Color tokens
- Typography guidance
- Spacing and layout rules
- Core components
- Accessibility rules
- Stitch generation notes
- Things to avoid
Write the result to ./DESIGN.md.
EOF
)"bashsed -n '1,220p' DESIGN.md生成的 DESIGN.md 可以继续用于 stitch::manage-design-system，再应用到后续设计生成任务中。
bashcat > rough-prompt.txt <<'EOF'
帮我做一个 AI 记账 App 的官网，现代一点，高级一点，适合自由职业者。
EOFbashclaude -p "$(cat <<'EOF'
Use the Stitch prompt enhancement utility.
Read ./rough-prompt.txt and rewrite it as a high-quality Stitch design prompt.
The output should include:
- Product context
- Target audience
- Page type
- Visual direction
- Required sections
- Component details
- Copy direction
- Accessibility constraints
- Negative constraints
Write the result to ./optimized-stitch-prompt.md.
EOF
)"bashcat optimized-stitch-prompt.md优化后的文件可以直接作为 stitch::generate-design 的输入。
bashcat > site-brief.md <<'EOF'
# Site Brief
Product: FlowLedger
Category: AI bookkeeping for freelancers
Goal:
Create a polished marketing website that converts freelancers to sign up
for a free trial.
Required pages:
- Home
- Features
- Pricing
- Login
- Dashboard preview
Brand:
- Calm
- Trustworthy
- Warm
- Smart
- Not corporate
Important messages:
- Understand your cashflow instantly
- Let AI categorize expenses
- Prepare for tax season without panic
- Designed for freelancers, not accountants
EOFbashclaude -p "$(cat <<'EOF'
Use the Stitch full-site generation loop planning workflow.
Read ./site-brief.md and create:
1. ./DESIGN.md
2. ./site-map.md
3. ./page-prompts/home.md
4. ./page-prompts/features.md
5. ./page-prompts/pricing.md
6. ./page-prompts/login.md
7. ./page-prompts/dashboard-preview.md
8. ./quality-checklist.md
Each page prompt should be ready to use with stitch::generate-design.
Keep the visual system consistent across all pages.
EOF
)"如果当前目录还没有 page-prompts，可以先创建：
bashmkdir -p page-promptsbashfind page-prompts -type f -maxdepth 1 -print -exec sed -n '1,120p' {} \;接下来可以逐个把 page-prompts/*.md 交给 stitch::generate-design 生成页面设计。
这个例子适合在正式生成页面之前先确定“设计质量线”。
bashcat > quality-goal.md <<'EOF'
We want the FlowLedger website to feel premium, calm, and highly trustworthy.
It should not look like a generic SaaS landing page.
It should appeal to freelancers and small creative studios.
The design should feel modern but warm, with excellent readability.
EOFbashclaude -p "$(cat <<'EOF'
Use the high-quality design specification utility.
Read ./quality-goal.md and create ./quality-checklist.md.
The checklist should cover:
- Visual hierarchy
- Layout quality
- Typography
- Color usage
- Component polish
- Content clarity
- Conversion quality
- Accessibility
- Things that would make the design feel generic
EOF
)"bashcat quality-checklist.md这份清单可以在每轮 Stitch 生成后使用：
bashclaude -p "$(cat <<'EOF'
Review the generated design direction against ./quality-checklist.md.
List the top issues and rewrite the next Stitch prompt to fix them.
EOF
)"text1. 使用实用工具从 brief.md 生成 DESIGN.md 2. 使用 stitch::manage-design-system 上传 DESIGN.md 3. 使用 stitch::generate-design 生成首页 4. 根据 quality-checklist.md 检查结果 5. 优化 prompt 后继续生成 Features / Pricing / Login
适合：
text1. 输入一句粗糙需求 2. 生成结构化 Stitch prompt 3. 使用 stitch::generate-design 生成 3 个设计变体 4. 对比变体并抽取共同的设计系统 5. 生成 DESIGN.md
适合：
text1. 输入产品简报 2. 生成 site-map.md 3. 生成 DESIGN.md 4. 为每个页面生成 page prompt 5. 逐页生成 Stitch 设计 6. 检查导航、CTA、视觉系统是否一致
适合：
DESIGN.md 编写建议不推荐：
markdownThe brand should be modern and beautiful.
推荐：
markdownThe brand should feel calm, financially trustworthy, and friendly to independent workers. It should avoid corporate banking aesthetics and instead use warm neutrals, soft green accents, and clear cashflow-focused data cards.
不推荐：
markdownPrimary color: green
推荐：
markdownPrimary:
- Soft mint green
- Used for primary CTAs, positive cashflow indicators, and selected navigation states
- Should feel fresh and calm, not neon or crypto-like不推荐：
markdownButtons should be rounded.
推荐：
markdownButtons:
- 12px radius
- Primary button uses mint background with dark text
- Hover state slightly deepens the mint tone
- Disabled state uses low-contrast neutral fill
- Minimum touch target: 44px heightStitch 生成时，“不要什么”通常和“要什么”一样重要。
markdownAvoid:
- Generic blue SaaS gradients
- Overly dense financial dashboards
- Crypto-style neon charts
- Stock photos of business people
- Tiny unreadable transaction tables
- Decorative AI sparkles on every section这个模块可以在本地生成 Markdown 文件、提示词和计划，但真正创建 Stitch 项目、上传设计系统、生成设计页面，需要 Stitch MCP server 正常配置。
如果 MCP 没有配置好，常见表现是：
DESIGN.md。模块可以帮你补全结构，但不能替你决定：
如果输入信息太少，Agent 可能会用常见模式补齐。正式项目里建议先给出：
DESIGN.md 不宜过度冗长DESIGN.md 是给设计生成流程使用的，不是品牌手册全集。
建议保留：
不建议塞入：
一次性要求生成完整站点时，最好不要只看最终结果。
推荐每轮检查：
完整站点生成更适合“计划 → 生成 → 审查 → 修正”的循环，而不是一次性完成。
“高级”“现代”“极简”这类词单独使用很容易失效。
更稳定的写法是：
text高级，面向独立设计师，温暖、留白充足、像高端生产力工具。
而不是：
text高级，像 Apple。
因为后者缺少行业、用户和内容约束，生成结果可能只学到表层风格。
README 中说明过 Stitch Design Skills 经常存在技能间依赖。如果只选择性安装某几个 skill，需要确认相关依赖也一起安装。
如果不确定，推荐直接安装完整插件套件：
bashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
或者通过 Codex marketplace 拉取：
bashcodex plugin marketplace add google-labs-code/stitch-skills --ref main \ --sparse .agents/plugins \ --sparse plugins/stitch-design \ --sparse plugins/stitch-build \ --sparse plugins/stitch-utilities
一个使用这个模块的项目，可以把下面这些文件纳入版本管理：
text. ├── brief.md ├── DESIGN.md ├── site-map.md ├── quality-checklist.md └── page-prompts ├── home.md ├── features.md ├── pricing.md ├── login.md └── dashboard-preview.md
这样做的好处是：
DESIGN.md 生成更多页面。