Wiki 知识库

全部文档 / 作者: 饭团儿 / 标签: 设计系统

2 篇
清除

如何 Vibe 一个自己的设计组件库,作为设计 Harness 的第一步

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

技术 › 前端 饭团儿 2026-09-1112.9 KB 10.8K 86 84

设计 Harness:从 design.md 到可维护的上下文工程

文章以 Atlassian 与 Vercel 的实践案例为切入点,探讨 AI Agent 在产品设计任务中的上下文工程问题。对比实验显示,单一 design.md 文件在原型生成等轻量场景中表现出色,但在真实工程环境中会导致 token 消耗激增、耗时更长且不稳定。文章提出以代码库访问权限为分岔点的两条路径:仓库外的轻量三层支撑体系与仓库内的完整工程 Harness。随后系统阐述了设计上下文的五层架构——意图层、真源层、披露层、约束层和反馈层,并详细说明搭建流程:建立评估基线、编写最小意图文件、沉淀结构化真源等,强调机械可判定规则应交由工具链执行,语言模型只处理模糊判断。

技术 › Harness Engineering 🍙fan 2026-09-0541.5 KB 23.7K 183 85