齐码.SKILL 是一套专为 Vibe Coding 设计的开源 Skills 集合，覆盖从「模糊想法」到「可运行产品」的完整链路。它包含 6 个相互关联的 Skills，确保每个环节都有标准化产出，让零基础用户也能做出兼具审美与规范的 AI 产品。

这套工具的核心设计理念是：每个 Skill 的入口一定是上一个 Skill 的产物，确保全流程对齐、规范一致。

为什么需要这套 Skills？

当前 Vibe Coding 的常见路径是把需求丢给 AI，等它生成一个产品。但实际操作中，开发者往往经历「做计划 → AI 写代码 → 反复返工 → 删掉重来」的循环。问题的根源不在于 AI 的代码生成能力——它已经足够好——而在于我们自身缺乏清晰的思路、产品设计的审美、合理的技术架构和全流程的纪律。

齐码.SKILL = vibe-idea → vibe-interaction → vibe-architecture → vibe-design → vibe-prototype → vibe-implement。

一、vibe-idea：从模糊念头到立项文档

产出：idea.md

vibe-idea 像一个帮你完善想法的产品经理，用业界公认的标准检验你的创意：

• 痛点验证：这个需求是真实存在还是自我臆想？谁会用在什么场景？
• MVP 定义：最小可跑版本是什么？如何衡量成功？
• 四维视角：从流变重构、成本坍缩、人即环境、可验证黑盒四个角度审视，推动颠覆性改造而非旧方案修补

业界共识是：人的瞬间想法 95% 有价值，但产品化后 75% 沦为鸡肋。这个 Skill 的作用就是用标准化的经验，让有价值的想法变成真正值得做的产品。

二、vibe-interaction：零歧义的交互文档

产出：interaction.md

这是整套系统中最核心的环节。vibe-interaction 将「用户每个页面点一下看到什么、触发什么」写到极其细致的程度，消除 AI 理解中的歧义。

交互分类法：定义了 11 种交互呈现方式——navigate、modal、confirm、drawer、popover、bottomsheet、toast、inline-expand、inline-edit、newtab、download。每个可点击元素只能选择其中一种，从源头掐断歧义。

规格表：每个交互元素都配有详细规格——触发条件、前置要求、执行步骤，以及 default、hover、pressed、disabled、loading、success、error 等状态下的视觉表现。

四种强制页面状态：加载中、空数据、出错、无权限——这些正是产品开发中最容易忽略和翻车的地方。

这个 Skill 的最终目标是让 AI 拿到的不再是一句「你看着做」，而是一份没有第二种解读的交互方案。

三、vibe-architecture：技术骨架派生

产出：architecture.md

根据交互文档的数据需求，自动推导出后端需要存储的数据、表结构设计、前后端接口定义。采用固定的技术栈，确保架构稳定可复用。

四、vibe-design：视觉准则固化

产出：design.md

视觉风格可从设计资源站（如 styles.refero.design）选择。下载对应的 DESIGN.md 后，齐码会产出一整套包含色系、样式、组件、字体、布局的视觉方案，所有后续页面必须严格遵循。

以 Cursor 的视觉风格为例：

生成的视觉方案覆盖完整的组件库和设计令牌（Design Tokens），确保审美一致且没有 AI 味。

五、vibe-prototype：页面原型生成

产出：prototypes/ 文件夹

vibe-prototype 根据 design.md 和 interaction.md，为每个页面（包括弹窗、子页面）构建明确的 AI 提示词，存储在 prompts 文件夹中。

将视觉规范导入画布后，每个页面的 prompt 传给 Stitch 生成原型。

所有原型下载后存入 prototypes/ 文件夹，并通过 prototypes/manifest.json 维护对齐标准。

最终效果：高级、稳定、标准。

六、vibe-implement：代码实现

到这一步才真正开始写代码。引入 Harness Engineering 方法，通过始终在上下文的检查流程确保「实现 = 设计」，一个不多、一个不少。

Skill 中内置了严格的校验机制，确保生成的代码与设计稿和交互文档完全对齐。

总结

齐码.SKILL 的本质是一套产品开发的纪律系统。它不替代你的创造力，而是确保从想法到产品的每一步都有标准可循、有据可查。对于 Vibe Coding 开发者来说，这是一套值得尝试的完整工作流。