fabrique

Fabrique 是一款专为设计师与创意工作者打造的开源模块化 UI 构建工具，基于 HTML/CSS/JS 技术栈，支持可视化拖拽、实时预览与代码导出。项目由法国 Fabrique Collective 社区维护，源码公开于 GitHub，无商业闭源版本，且不包含任何用户数据收集或行为追踪功能。

核心特性一览

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

突出优势解析

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

软件特色

1. 基于纯前端技术栈，不绑定框架，兼容性不错，用起来比较省事。

2. 组件面板拖拽搭建，属性实时调整，操作直观，上手容易。

3. 内置三套系统主题，一键切换并导出 CSS 变量，方便风格统一。

4. 支持组件嵌套，打包成复合组件并定义接口，后续复用方便。

5. 代码视图与选中组件联动，显示完整结构，支持手动编辑即时反馈。

软件亮点

1. 由法国社区维护，源码完全公开，无闭源版本，透明度高。

2. 不收集用户数据也不做追踪，隐私安全方面比较放心。

3. 专注设计系统落地，把 Figma 决策转化为代码，弥合设计与开发断层。

4. 代码生成逻辑透明，插件机制开放，开发者可灵活定制。

软件优势

1. 中小团队构建轻量设计系统的门槛降了，不用从零搞一套复杂工具。

2. 输出结果可直接集成前端项目，无需额外转换，节省时间。

3. 导出标准化 .zip 包，包含 README 和配置，交付更规范。

4. 只专注静态 UI 原型与组件规范，不涉 SSR 或框架特性，定位清晰。

软件用法

1. 左侧组件面板拖元素到画布，在属性面板调整标签、CSS 变量和交互状态。

2. 组件可嵌套组合，打包成复合组件并定义公开接口，方便重复调用。

3. 右侧代码视图同步显示 HTML 和 CSS-in-JS，可手动修改并实时看到变化。

4. 内置三套主题，一键切换并导出对应 CSS 变量包，切换配色很方便。

5. 团队协作时导出 .zip 包，前端直接集成，省去中间转换步骤。