交付占比
根据妙创项目 246 个 Agent 对话归纳，从4月开始逐渐转向代码
| 交付 | 占比 | 说明 |
|---|---|---|
| demo | 20–25% | ui-demo、Hero 沙盒、InfiniteBloom 参数面板、FlowGallery 调参面板 |
| 生产代码 | 75–80% | 组件迁移、交互微调、落地页、画布贴层、表格体系等，直接进 src/，可构建、可联调、可合并 |
常用工作流
先验 Demo — 视觉占主导、可解耦后端 API 的需求。先写好 UI，再让开发补接口细节。例如首页 Shader、SD 流程。
框架精装修 — 功能逻辑主导的需求，结构先行、像素后至。开发先搭框架，我再接手做 UI 迭代与精修。例如画布与项目架构、账户资金体系。
小功能高速优化 — 改动点明确时，直接改完交给开发测试上线。对比git更新的内容，让AI输出改动总结，是一个能向研发高效同步代码更新的方法。
Vibe 案例探讨
框架精装修：结构先行、像素后至。
PM产品开头：文档开始，搭配Demo，描述清楚功能 https://07435b8c616e44efb0dff2efd3871fb5.tc-nanjing.share.codebuddy.woa.com/； 这个阶段多方一起评审，主要关注功能合理性
Dev研发先行：快速搭建框架，跑通功能；下面是研发实现的版本
Design设计介入：视觉优化
小改动 — 换图标、调简单布局、Shadcn 组件案例：复制网页上的 Tailwind 值到 IDE 搜索，定位组件后对照文档手调，保存即预览。
大改动 — 功能重构用 Figma 草图 + 辅助说明最高效。交互的本质是翻译，草图就是设计师的翻译方式。
以资金划转升级为例：
- 开发 / 产品语言：资金调整、可分配现金、分配与回收
- 用户语言：像银行账户间转账
草图不必像素级对齐——跟 AI 协作可以从逻辑开始构建。有时 AI 还会补上你没想到的细节，例如「快捷填入按钮」（注入用户效率层的提示词）。
解决生产问题
关注组件抽象，记录职责与关键更新
让 AI 生产组件时，同步检查模块增删、职责更替、接口变化，写一份架构说明：目录结构、设计决策、变更日志。
沉淀时可以一句话触发：总结今天设计优化，沉淀到 .agent/design-log → 结构化复盘 + AGENTS.md 索引更新。
如何提高 Vibe Code 匹配度
上下游要有一套设计和开发共识的基础设施：
- Token 与组件框架 — Tailwind Global CSS 已够用；个人习惯
Primitive→Semantic两层 token - AI Rule — 声明参考视觉规范、优先使用 UI 组件，给 AI 路径依赖
- 组件库 — 大部分基于 shadcn；不够时让 AI 基于 React 另搭
跟研发承接很顺：产出即 React + Tailwind + 完整类型，没有「设计稿标注 → 开发还原」损耗，Git 版本管理也好用。
跟产品的沟通成本有时会上升：缺少唯一设计稿 URL 时，约定 preview 环境 + 录屏 作为评审入口。
上下文与复利沉淀
必须喂给 AI 的上下文（优先级降序）
- 模块 / 组件 MD 文档 — 架构、边界、变更日志
- Design-log — 按日设计摘要，避免重复踩坑
- 组件参考 — 例如：参考某页某组件，实现类似功能
- 妙创项目视觉规范（通常已隐含在 Rule 里）
Prompt 话术
版本管理
| 层级 | 机制 | 用途 |
|---|---|---|
| Git | commit + branch + PR | 代码真相源、blame、回滚 |
| CLAUDE.md 变更日志 | 模块内 dated bullets | 快速理解「这页为什么长这样」 |
| design-log/ | 按日设计摘要 | 跨模块复盘、评审附件 |
| ui-demo | #anchor 组件快照 | 组件 API 与视觉的 living catalog |
| 参数持久化 | localStorage keys（InfiniteBloom v6…） | 视觉调参快照，非版本库但可复现 |
| preview 部署 | dev / staging URL | 对外评审替代 Figma link |