fabrique

fabrique是一款面向设计师与创意工作者的开源模块化UI组件构建工具，基于Web技术栈（HTML/CSS/JS）开发，支持可视化拖拽组装、实时预览及代码导出，项目源码托管于GitHub，由法国设计技术社区Fabrique Collective维护，无商业闭源版本，不包含任何远程数据收集或用户行为追踪机制。

fabrique特色

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

fabrique亮点

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

fabrique玩法

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

fabrique点评

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