迭代精修思维：为什么stitch-skills中编辑优于重新生成
【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills
在 AI 设计生成领域，stitch-skills是一套面向 Google Stitch 的 Agent Skills（智能体技能库），让你用一句自然语言就能让 AI 生成和修改界面设计。但很多人踩过一个坑：设计效果差 5% 时，就推倒重来、重新生成整个屏幕。结果风格漂移、布局全变，反而越改越糟。本文讲清楚这套"编辑优于重新生成"的迭代精修（Iterative Refinement）思维，以及如何用 stitch-skills 把它落地。
先说结论：重新生成的隐性代价
重新生成（Regenerate）看起来省事，实际上有三个代价：
| 代价 | 说明 |
|---|---|
| 🎲 风格漂移 | 每次重roll都是一次"掷骰子"，已满意的部分可能被推翻 |
| ⏱️ 时间成本 | 生成整屏需要等待，而局部编辑只动一小块 |
| 📉 上下文丢失 | 之前定下的布局结构、内容层级全部重来 |
所以 stitch-skills 在 generate-design 技能 中写了一条硬性规则：
除非整体布局根本错了，否则不要从头重新生成，而是走编辑流程做针对性调整。
这是整个项目的核心设计哲学：生成一次定骨架，之后只做手术式精修。
官方内置的"迭代精修"工作流
stitch-skills 把"编辑优先"做成了三条清晰流程，全部由 stitch::generate-design 技能驱动：
1️⃣ Edit 流程：只改要改的地方
当你说"把登录页的按钮颜色改成深蓝，再加一个'记住我'复选框"时，技能会：
- 通过
list_screens精准定位到目标屏幕； - 按"位置 → 视觉 → 结构"三段式组织编辑提示词，例如：
- 位置："修改 hero 区域的主按钮"
- 视觉："改成更深的蓝色（#004080），加轻微阴影"
- 结构："在旁边加一个'了解更多'次级按钮"
- 调用
edit_screens应用修改，其余元素一律保持不变。
技能还提醒：一次只改一处（One edit at a time），比丢一大串修改清单效果好得多。
2️⃣ Variant 流程：一次试探 3 个方向
拿不准哪种布局更好？用generate_variants工具生成 1~5 个变体，还能控制"创意幅度"：
REFINE：微调EXPLORE：平衡探索REIMAGINE：大胆重构
原屏幕始终保留，你只是在"试方向"而不是"赌结果"——这正是精修思维的体现。
3️⃣ 生成提示词里不放颜色？对，这是关键
一个容易误解的点：新建屏幕时，提示词只写布局和内容，不写颜色、字体。因为视觉主题由项目级设计系统统一接管（见 manage-design-system 技能）。而编辑时则允许写精确的 hex 色值，方便做像素级的精修。
写"手术刀式"编辑提示词：enhance-prompt 技能
很多人编辑效果不好，问题出在提示词太模糊。enhance-prompt 技能 专门干这件事：把"加个搜索框"这种模糊想法，转换成结构化的精修指令。
它的转换逻辑非常值得借鉴：
| 模糊说法 | 增强后 |
|---|---|
| "菜单在顶上" | "带 logo 和菜单项的导航栏" |
| "按钮" | "主行动号召按钮" |
| "物品列表" | "卡片网格布局" |
针对编辑请求，它会强制补全五个维度：位置、样式、图标、占位符、交互行为，并在结尾声明"这是一次针对性编辑，只改这一处，保留所有现有元素"。想学完整示范，可以读 enhanced-prompt 示例。
stitch-loop：把精修思维放大到整个网站
如果说上面的流程精修的是"单屏"，那么 stitch-loop 技能 精修的是"整个网站"。它用接力棒（Baton）模式实现多页迭代：
- 📋 读取
.stitch/next-prompt.md（接力棒文件），拿到当前页面任务； - 🎨 用 Stitch 生成该页，每次提示词都携带同一份 DESIGN.md 设计系统，保证多页风格一致；
- 🔗 把页面接入站点导航，修好链接；
- ✍️ 写下下一页任务，更新接力棒，循环继续。
这里的精髓在于：页面是增量累积的，从不推倒重来。已有的.stitch/metadata.json记录着所有屏幕的 ID，后续迭代只做"编辑已有"和"新增缺失"，绝不动已完成的页面。可参考 接力棒示例文件。
想进一步强化风格上限，可以搭配 design-md 技能 从现有屏幕反推出设计规范，或用 taste-design 技能 生成一份"反 AI 俗套"的高质感设计系统。
快速上手：两步开始迭代精修
前提：已按官方指引配置好 Stitch MCP 服务器。
# 整体验证过的项目，推荐全局安装技能 git clone https://gitcode.com/GitHub_Trending/st/stitch-skills然后按需装入你的编码智能体（Claude Code / Cursor 等）：
npx skills add google-labs-code/stitch-skills装好后的日常节奏就是三句话：
- 首次："生成一个登录页"（走 Generate 流程）
- 精修："把 hero 区按钮改成深蓝，加个记住我"（走 Edit 流程）
- 试探："给我 3 个布局变体"（走 Variants 流程）
仓库里每个技能都遵循统一的 Agent Skills 开放标准目录结构，方便自行扩展：
skills/<技能名>/ ├── SKILL.md — 智能体的"任务手册" ├── scripts/ — 校验与联网脚本 ├── resources/ — 检查清单与风格知识库 └── examples/ — 高质量参考示例总结
stitch-skills 最有价值的不是一堆工具，而是它反复强调的那套思维：
- ✅生成定骨架：结构错了才重来；
- ✅编辑做精修：位置、视觉、结构分开描述，一次一处；
- ✅变体探方向：保留原件，批量试错；
- ✅设计系统管风格：多页一致，避免每次重roll的漂移。
把"重新生成"当成最后的选项，把"迭代精修"当成默认动作——这就是从"掷骰子式 AI 设计"走向"可控设计工程"的分水岭。
【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
