/mochi-redesign
一种引导式重设计工作流。它不应用固定的外观，而是应用一个固定的流程：理解人物、找到一个概念、构建一个小型设计系统、把所有重要内容以卡片形式铺满首屏、将细节放入丰富的弹出框和专属页面、撰写诚实的文案、并在展示前按真实屏幕尺寸验证每一个变更。
该流程源自一个真实的作品集，该作品集通过多轮所有者反馈，从简单的单栏模板逐步演变为bento风格站点。每一轮的经验教训（哪些有效、哪些被拒绝、哪些出错）已编码到下文及references/目录中。
输出结果绝不能看起来像该技能来源的站点。同样的纪律，不同的身份：新的概念、新的字体、新的颜色、新的标志性细节。如果你发现自己在仅仅因为“技能如此”而使用金盏花笔触、吉祥物或bento网格，请停下来，重新回到阶段一。
如何运行它
参数为可选自由文本，例如 /mochi-redesign client/ 或 /mochi-redesign 仅首页，保持博客不变。
按顺序执行各个阶段。每个阶段结束于一个关卡：向所有者展示结果（截图，而非描述），等待他们的反馈后再继续。当多个未经审阅的决策累积起来时，重设计就会失败。
| 阶段 | 首先阅读 | 关卡 |
|---|---|---|
| 0. 信息收集与审计 | references/01-intake-audit.md | 所有者确认目标、受众、范围，以及哪些内容不能改变 |
| 1. 概念与系统 | references/02-concept-system.md | 所有者选择一个方向；设计令牌已记录 |
| 2. 内容真实性 | references/03-content.md | 所有者批准文案（不夸大） |
| 3. 首屏 | references/04-layout.md | 在每个目标尺寸下都能适配一个笔记本屏幕 |
| 4. 细节层 | references/05-interaction.md | 弹出框内部可滚动，锁定页面，无布局偏移 |
| 5. 次要页面 | references/06-content-pages.md | 列表页和阅读页与系统匹配 |
| 6. 媒体（可选） | references/07-media.md | 真实的演示视频，已压缩，仅在视口中播放 |
| 7. 打磨与质量保障 | references/08-qa.md | 剪辑检查通过，双主题，移动端，代码检查，构建 |
| 8. 交付 | references/09-feedback-and-handoff.md | 清晰的差异对比，设计文档已更新，所有者决定是否提交 |
references/10-anti-patterns.md 是第一次创建时犯下的错误列表。在阶段一之前阅读一次，在阶段七之前再次阅读。
不可妥协的原则
- 变更前先查看。 阅读现有代码，运行站点，在目标尺寸下截图。绝不能仅从代码进行重设计。
- 每个站点只有一个身份。 概念来源于主体（人或产品实际上是什么），而不是来自潮流或本技能的起源。
- 所有重要内容都在首屏。 访问者应该在不滚动的情况下看到“谁”、“做什么”和“证据”（最好的作品）。细节位于一次点击之外，而非向下滚动五个屏幕。
- 诚实的文案。 不能包含所有者无法在面试中坦然面对的任何声明。优先使用“练习过”、“做过”、“在合适的地方使用”，而不是“每个”、“总是”、“全都”。用数字和已交付的产品来证明，而非使用形容词。
- 在尺寸上验证，而非在脑中想象。 每个视觉变更之后都要执行剪辑检查（
scripts/clip-check.mjs）并至少截图一张。切勿就一个你没有实际查看过的变更报告“已完成”。 - 小规模、可逆的步骤。 一次更改一件事，展示它，倾听。如果所有者两次拒绝同一件事，停止猜测：提供2–3个带有预览的具体选项，让他们选择。如果他们要求回退，精确恢复之前的版本，而不是“差不多就行”的重建。
- 不要破坏线上功能。 保持旧路由正常工作，不接触无关页面，不重新格式化你不需要更改的文件（格式化程序的变动会掩盖真正的差异），在未经要求的情况下不提交或推送。
- 可访问性基本要求。 键盘可到达，可见的焦点，真正的按钮和链接，尊重
prefers-reduced-motion，在双主题下检查对比度，不通过悬停单独传达重要信息。
“完成”的标准是什么
- 首屏适配一个笔记本屏幕（1280×720 到 1920×1080），内容无裁剪，无水平滚动，且有清晰的视觉焦点。
- 一个小型、书面形式的设计系统（设计令牌、字体、圆角、动效规则），每个新组件都使用它。
- 卡片打开丰富的细节（对话框或页面），而非长滚动。
- 所有者逐行审批通过的文案。
- 次要页面（列表页、阅读页、案例研究）感觉像同一个站点。
- 仓库中有一份设计文档（
DESIGN.md或类似文件），描述系统和决策，以便下一个人（或代理）保持一致性。
本技能包含的文件
SKILL.md 此文件：工作流、关卡、规则
references/01-intake-audit.md 要问的问题，如何审计当前站点
references/02-concept-system.md 寻找概念；设计令牌、字体、标志性细节
references/03-content.md 编写真实、可扫描、重点突出的文案
references/04-layout.md 首屏bento布局和卡片配方
references/05-interaction.md 对话框、悬停、动效、小惊喜
references/06-content-pages.md 让人继续阅读的博客/列表/阅读页面
references/07-media.md 录制真实工作的演示视频和预告片
references/08-qa.md 视口矩阵、剪辑检查、主题、可访问性
references/09-feedback-and-handoff.md 与所有者迭代；干净地收尾
references/10-anti-patterns.md 第一次哪里出错了，以及修复方法
scripts/clip-check.mjs CDP脚本：裁剪卡片、溢出、折行适配
scripts/shots.mjs CDP脚本：按视口和主题截图
templates/ 框架无关的代码片段（React + Tailwind）