界面工坊是什么?
界面工坊把几个决定 —— 起步风格、调节留白与强度的性格盘、品牌色、字体和动效 —— 变成一整套设计系统,并在真实页面上实时预览:设置页、数据表格、完整组件库和精选产品标本。
全部在浏览器里运行。没有模型,也不上传:主题、实时预览和交付包都在你的设备上生成。
满意后下载一个 ZIP:35 个共享 React 组件(Base UI)、明暗两套语义变量、设计规范和校验脚本,连同复制的接入指令一起交给编码 Agent。它是起步套件而不是完整设计工具,Agent 仍需检查与验收结果。
怎么用
- 1从五种起步风格里选一种:柔和、精密、纸感、通透或趣味。
- 2拖动性格盘调留白与强度,再选品牌色、中性色、字体和动效。
- 3在样式标本、设置页、数据页和完整组件库之间切换预览,浅色深色都看一遍。
- 4细调单个组件样式族、字号、圆角、边框、阴影和动效,并检查对比度。
- 5登录后下载主题包,复制给编码 Agent 的接入指令。
常见问题
- 下载到的是什么?
- 一个含 29 个文件的 ZIP:共享 React 组件、带明暗两套 --kv-* 语义变量的 theme.css、JSON 与 DTCG 格式的 token、Tailwind 与 shadcn 变量桥接、设计系统规范、可运行的页面范例,以及两个本地校验脚本(verify.mjs 和 check-usage.mjs)。
- 我的设计会被上传吗?
- 不会。编辑、预览和打包都在浏览器里完成。草稿只保存在本机 7 天,方便你下次接着改。
- 组件包支持哪些框架?
- 组件基于 React 18.2–19,复杂交互使用 Base UI。其他框架需要适配,交付包里写明了这一点,Agent 不会误以为可以直接用。
- 为什么下载需要登录?
- 设计和预览无需账号、完全免费;下载交付包需要一个免费账号。
- 它能代替 Figma 这类设计工具吗?
- 不能。它擅长快速定下一套一致的界面主题并交给编码 Agent。字体使用系统字体,只检查基础对比度色对,不等于完整的无障碍认证;富文本、树结构等复杂组件仍需在套件基础上扩展。