如何 Vibe 一个自己的设计组件库,作为设计 Harness 的第一步
作者作为探索 AI 与设计工程化的设计师,复盘了三次搭建自有设计组件库的尝试:第一次直接基于 shadcn/ui 纯 vibe 开发,因现成视觉规范黑盒与覆盖负担而放弃;第二次回到 Figma 定义颜色、变量与基础组件,通过 Figma MCP 交给 AI 批量转换代码,并按视觉骨架将组件分类,但自搭预览环境成为维护包袱;第三次引入 Base UI 无头组件库接管行为结构、以语义 Token 命名视觉规则、用 Storybook 建立反馈回路,一天完成组件库开发。文章总结出关键经验:把设计判断抽象为可命名的 Token 契约、选用无审美包袱的无头底座、用切片沙箱建立反馈回路,为后续 Design Harness 打下稳固基石。