fabrique

fabrique是一款完全开源免费的UI组件搭建工具。在这里可以直接拖拽各种不同模块，比如按钮、表单、布局容器，不用装Node就能本地跑起来。平时用Figma设计的变量也能同步过来，修改颜色字体后全局组件跟着更新，比较方便。对于喜欢多种格式的用户来说，导出时不管是纯HTML还是Vue组件或Web Components都可以选。另外响应式预设体系也挺实用，拖拽时自动适配断点。离线就能运行，查找起来也比较直接。平时想做原型或组件库的话，可以下载试试看。

fabrique优势

1. 零依赖离线运行：所有功能在浏览器内完成，不调用外部CDN或API，确保设计资产完全本地可控； 2. 响应式预设体系：采用移动优先断点系统（xs/sm/md/lg/xl），拖拽组件时自动激活响应式属性面板； 3. Design Token同步机制：修改颜色、字体、间距等设计变量后，全局关联组件即时更新； 4. 版本快照管理：每次保存生成不可变快照，支持时间轴回溯与分支对比，无需掌握Git操作； 5. 可扩展插件生态：官方提供SVG图标库、无障碍校验器、WC封装器等6个第一方插件，全部开源且可审计。

核心特性一览

1. 完全开源免费：遵循MIT许可证，可自由用于个人及商业项目； 2. 模块化架构设计：所有UI组件（如按钮、表单、布局容器等）均以独立、可复用单元形式组织； 3. 原生Figma集成：支持将Figma中的设计变量与组件映射为fabrique内可编辑属性； 4. 免配置本地运行：内置轻量级运行环境，无需安装Node.js或构建工具，双击HTML文件即可启动； 5. 多格式代码导出：支持导出为纯静态HTML/CSS/JS、Vue 3 Composition API组件或Web Components（WC）格式。

fabrique亮点

1. 完全开源免费，采用MIT协议，个人和商业项目都能自由使用，省去授权烦恼，用起来比较省心省力。

2. 模块化架构设计，每个UI组件独立可复用，搭建页面时想怎么组合就怎么组合，挺灵活的。

3. 原生Figma集成，设计变量和组件能直接映射成可编辑属性，省掉了手动同步的麻烦。

4. 免配置本地运行，不需要装Node.js那些工具，双击HTML文件就能直接启动，很方便。

5. 多格式代码导出，像HTML、Vue组件、Web Components都能生成，选合适的使用更轻松。

fabrique特色

1. 零依赖离线运行，所有功能在浏览器内完成，设计资产完全本地可控，不用担心数据外泄。

2. 响应式预设体系，采用移动优先断点系统，拖拽组件时自动激活响应式面板，查看更直观。

3. Design Token同步机制，修改颜色、字体等变量后，全局关联组件会即时更新，非常省事。

4. 版本快照管理，每次保存生成不可变快照，支持时间轴回溯和分支对比，不用学Git也能搞定。

5. 可扩展插件生态，官方提供6个第一方插件，全部开源可审计，需要什么功能可以自己加。

专业定位与适用场景

fabrique并非面向大众的“所见即所得”网页生成器，而是专注于设计系统落地与前端工程衔接的专业工具。其核心价值在于将设计决策——包括Design Tokens、组件约束与无障碍要求——转化为可执行、可验证、可交付的代码资产，有效弥合Figma与开发之间的关键断层。对中小团队而言，它显著降低了构建轻量级设计系统的技术门槛；对资深开发者而言，其透明的代码生成逻辑与开放的插件机制提供了高度可控的定制空间。需注意的是，该工具不支持服务器端渲染（SSR）或框架特定特性（如React Hooks），明确聚焦于静态UI原型与组件规范的输出。

高效使用方式

1. 可视化拖拽搭建：从左侧组件面板选取元素拖入画布，通过属性面板调整语义标签（如role、aria-label）、CSS变量及交互状态； 2. 组件嵌套与组合：支持将多个组件打包为自定义复合组件，并定义公开属性接口以供复用； 3. 实时代码联动：右侧代码视图同步显示当前选中组件的完整HTML结构与CSS-in-JS逻辑，支持手动编辑并即时反馈； 4. 主题快速切换：内置Light、Dark、High Contrast三套系统主题，可一键切换并导出对应CSS变量包； 5. 团队协作交付：将项目导出为.zip包（含README.md、assets目录及build配置），前端可直接集成，无需额外转换流程。

小编点评

fabrique是一款开源免费的UI设计工具，不用装Node.js，双击HTML就能用。它跟Figma结合得很好，拖拽组件就能搭界面，改个颜色全局都会变。还能导出成Vue或Web Components，特别方便。赶紧去试试吧！