建设一套小牛业务组件库 + 设计规范体系,使 AI 能通过自然语言直接生成符合设计规范的可用代码。 核心解决的问题:

  • 设计侧:AI 生成页面时,组件库里没有的东西 AI 会自己”编”,导致样式不符合规范,设计稿无法出完整页面
  • 研发侧:样式规范靠口头传递,AI 生成代码后需要大量人工走查
  • 协作:设计改 Figma → 研发手动翻译代码,信息损耗大 底层技术组件用无头样式组件库,本平台在其之上承载小牛设计语言适配 + 业务组件 + 开发约束 + Skills。

无头样式组件库

无头样式组件库调研 无头样式组件库 Ant Design 组件能力对比 token 设计调研 组件库分级规范 (L1-L3)

现在遇到的问题是:场景化 token,该什么时候,用到哪个组件,这个并没有很清晰的认知,如果要复刻设计稿这样的一个样式,就必须得一个一个细对:这个 icon 用什么大小,这个 icon 在这个容器的布局在哪里,与其他组件的间距,子组件与父组件的间距这些。都需要细节调整,如果用口喷的话其实效率不如 Figma 设计稿高。

所以这样延伸出来的一个问题是:本质上设计这边的工作流并没有发生实际性改变,只是从之前的单纯输出设计稿,到用设计稿来组织布局语言+Coding Agent 来直接生成代码这一步了。这样的好处是:省去了走查的沟通成本+开发消耗成本,但是增加了设计这边的工作量,与此同时减少了开发这里的工作量。

Vibe Design Playbook SDD 设计沉淀