Wiki 知识库

全部文档 / 标签: Storybook

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

前端 UI/UX 设计:一套从灵感到落地的资源地图

作者整理了自己收藏的大量前端 UI/UX 设计资源,并借助 Codex 分类归纳,形成一张面向实际工作的资源地图。文章将设计资源分为五类:真实产品案例(UXSnaps、Mobbin、SaaSFrame)、设计模式与拆解(Design Spells、Component Gallery)、设计系统与 Design Token、组件实现(Base UI、React Aria、shadcn/ui 等)以及质量验收(WCAG 无障碍、性能测试)。作者强调有效的使用顺序是:真实案例提供证据、设计原则解释原因、设计系统形成约束、组件资源加速实现、无障碍与性能完成验收,帮助读者从'抄视觉'升级为'有理由的设计'。

技术 › 前端 meng shao 2026-08-2624.0 KB 29.9K 227 84