作者以截图美化工具 RicoScreenshot 为案例，完整拆解了 Vibe Coding 的六步工作流：读懂项目、建立视觉规范、规划功能、开发实现、视觉交互调整、测试上线。文章强调每个环节做正确的事：先用 AGENTS.md 让 AI 理解项目架构，用 DESIGN.md 统一视觉规则，用 TODO.md 管理需求和进度；开发阶段一次只做一个功能，并重视亲自使用后的体验判断。该流程基于开源项目 image-beautifier 二次开发，纯前端实现，适合作为新手的第一次完整项目练习。
作者开源了 RICOUI DESIGN，一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档，集中记录品牌的颜色、字体、间距、组件规则与设计约束，人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md，浏览内置品牌设计参考库，可通过 AI 从公开网站生成初稿，并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案，强调以 DESIGN.md 作为唯一源文件维护设计规范。
