Wiki 知识库

全部文档 / 标签: Figma MCP

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

在 Claude Code 中做设计(摆脱 AI 味)

作者分享了如何让 Claude Code 生成符合个人品牌风格的设计作品。他曾花两天与 Claude 争论字体和间距,后来发现关键在于:与其用文字描述想要的幻灯片,不如让 Claude 直接读取已有的设计参考。文章详细介绍了如何将 Figma 通过 MCP 连接到 Claude,包括创建账号、导入参考文件、复制特定 frame 的链接等步骤。作者强调,AI 工具失败的原因是没有'你的东西'可读,只要提供真实的设计参考文件或品牌规范(如色值、字体、间距),Claude 就能产出完全符合品牌风格的作品。

技术 › Claude Code Charlie Hills 2026-08-3014.4 KB 109.9K 108 78