Fabric 设计系统生成模式实战从需求一键产出生产级 CSS Design Tokens【免费下载链接】FabricFabric is an open-source framework for augmenting humans using AI. It provides a modular system for solving specific problems using a crowdsourced set of AI prompts that can be used anywhere.项目地址: https://gitcode.com/GitHub_Trending/fa/Fabric本文以 Fabric 仓库内置的 create_design_system 模式 为研究对象剖析该 AI 模式如何把一段简单的产品需求或既有设计描述转化成一套可直接粘贴进现代前端项目的 CSS 设计系统Design Tokens。读完本文你将掌握该模式的完整输出契约色彩、字体、间距、组件令牌与阴影五层结构、底层加载与变量注入机制以及如何在 Fabric CLI 中把它接入日常工作流。一、这个模式解决什么问题create_design_system是 Fabric 在data/patterns下收录的一类AI 提示词即产品功能的模式Pattern。它把资深设计系统架构师的思考过程固化成可复用的提示词输入品牌色、字体偏好、间距习惯、组件清单等任意形态的描述甚至是一份已有页面的视觉截图描述输出一套基于 CSS 自定义属性Custom Properties、暗色模式优先Dark Mode First、可直接复制使用的设计令牌。它给出的角色定位是You are an expert design systems architect任务承诺是immediately usable in any modern web project。也就是说这个模式的目标不是生成整页 HTML而是产出前端工程最底层、可复用的视觉常量层。Fabric 中模式的目录规范在 Fabric 仓库中每个模式都是一个独立目录位于 data/patterns/ 下目录内至少包含一个system.md。从仓库结构与 patterns.go 的读取逻辑getFromDB拼接patterns/name/system.md路径可以确认data/patterns/ └── create_design_system/ ├── system.md # 发给 LLM 的完整指令角色、步骤、输出格式、输出规则 └── user.md # 可选存放需要注入的用户侧补充上下文system.md会被当作 LLM 的 system 消息 / 完整提示主体加载很多模式如summarize、explain_code还带可选的user.md承载额外的用户输入模板。本仓库的 create_design_system/system.md 目前只提供了system.md其 user.md 若存在仅用于承接输入这也是大量纯生成类模式的标准形态。二、在 Fabric 中运行该模式Fabric 模式的使用方式是把输入内容通过管道或参数交给 CLI再用--pattern指定模式名# 方式一把需求文本通过 stdin 管道输入 echo 为一个 AI 笔记产品设计设计系统主色为靛蓝 #4F46E5偏好简洁、圆角大、间距舒适 \ | fabric --pattern create_design_system # 方式二直接传参指定输入文本 fabric -p create_design_system 某产品logo 是橙色 #F97316需要支持深色模式 # 方式三流式输出边生成边看结果长输出建议使用 echo ... | fabric --stream --pattern create_design_system常用辅助参数来源见 README.md 的 CLI 参数说明--pattern, -p指定要使用的模式名称--listpatterns, -l列出全部可用模式--updatepatterns, -U从上游同步更新内置模式不会动你的自定义模式--dry-run不真正调用模型仅打印模式模板 输入拼接后的最终提示词用于调试模式构造是否正确--stream流式输出结果。运行时Fabric 会先把模板里所有模板变量与{{input}}占位符处理完毕再把拼好的完整提示词发送给所选大模型具体机制见本文第六节。与其它模式组合使用create_design_system同样可以和 Fabric 的 strategies如cot组合以增强推理质量echo 终端主题工具 UI品牌色深灰荧光绿 \ | fabric --strategy cot --pattern create_design_system它与 web 前端目录 中 Svelte 版 Web UI 的组合场景是先用本模式生成 token 层再在组件里通过var(--...)消费这些令牌实现换肤与暗色模式统一管理。三、模式内置的六步方法论STEPS该模式的system.md在# STEPS一节定义了生成链路这是它稳定产出高质量结果的原因也是用户向它提供输入时应当对齐的信息结构分析输入从需求中拆出品牌色、字体、间距、组件需求四类信息建立语义化色彩系统要求同时支持浅色light与深色dark两种模式定义现代排版刻度typography scale建立间距与尺寸刻度为常见 UI 组件建立组件令牌buttons、cards、inputs 等补充工具类说明便于快速开发时直接消费。这六步直接映射到输出模板的六大节。换句话说模式既规定了怎么想STEPS又规定了长什么样OUTPUT FORMAT因此输出高度可预期。四、输出契约详解设计系统五大令牌层# OUTPUT FORMAT给出了严格的输出骨架## Design System: [Name]标题随后依次是五段 CSS 代码块。下面逐层拆解并说明每一层为什么这样设计。1. Color Tokens色彩令牌色彩层分四组#value是留给模型根据输入填入的占位色值品牌色--brand-primary / --brand-secondary / --brand-accent语义色--color-success / --color-warning / --color-error / --color-info对应状态反馈中性色阶--neutral-100最浅到--neutral-900最深默认按暗色模式的底色取值——即最深的 900 作为暗色画布底语义化背景 / 文本 / 边框全部通过var(...)引用中性色阶例如--bg-primary: var(--neutral-900)、--text-primary: var(--neutral-100)、--border-color: var(--neutral-700)。这正是模板在OUTPUT INSTRUCTIONS里强调的Use semantic naming--bg-primary not --dark-bg消费方永远只面对主要背景、次要文本这类含义而不是某个具体深浅值从而让换肤成为纯 token 映射问题。:root { /* Brand Colors */ --brand-primary: #value; --brand-secondary: #value; --brand-accent: #value; /* Semantic Colors */ --color-success: #value; --color-warning: #value; --color-error: #value; --color-info: #value; /* Neutrals (Dark Mode Default) */ --neutral-900: #value; /* Darkest */ --neutral-800: #value; --neutral-700: #value; --neutral-600: #value; --neutral-500: #value; --neutral-400: #value; --neutral-300: #value; --neutral-200: #value; --neutral-100: #value; /* Lightest */ /* Semantic Backgrounds */ --bg-primary: var(--neutral-900); --bg-secondary: var(--neutral-800); --bg-tertiary: var(--neutral-700); /* Semantic Text */ --text-primary: var(--neutral-100); --text-secondary: var(--neutral-300); --text-muted: var(--neutral-500); /* Borders */ --border-color: var(--neutral-700); --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; }2. 暗色优先 浅色覆盖Light Mode Override模板采用暗色为默认、浅色用媒体查询覆盖的策略:root内全部是暗色取值当系统偏好为浅色时仅需覆写背景与文本相关的少数语义令牌/* Light Mode Override */ media (prefers-color-scheme: light) { :root { --bg-primary: var(--neutral-100); --bg-secondary: var(--neutral-200); --text-primary: var(--neutral-900); --text-secondary: var(--neutral-700); } }由于背景/文本已经语义化浅色模式只需 4 行覆盖即可完成整套皮肤翻转这也是该输出开箱即用的关键设计。3. Typography排版令牌排版层采用现代响应式实践字号全部使用clamp()做流式缩放随视口宽度在最小/期望/最大三个值间平滑变化同时给出字体族、字重、行高三组基础令牌:root { /* Font Families */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: JetBrains Mono, Fira Code, monospace; /* Font Sizes (using clamp for responsiveness) */ --text-xs: clamp(0.75rem, 0.7rem 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem 0.375vw, 1rem); --text-base: clamp(1rem, 0.9rem 0.5vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem 0.625vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem 1.25vw, 2rem); --text-3xl: clamp(2rem, 1.5rem 2.5vw, 3rem); /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; }可以看到从--text-xs到--text-3xl共 7 档字阶且建议字体为 Inter 与 JetBrains Mono 这一现代开源字体组合——模型会在实际生成时按输入的品牌字体偏好替换这两个示例值。4. Spacing Scale间距刻度间距体系以4px 为基准单位rem 制从 0.25rem(4px) 线性递增到 4rem(64px)。4px 基准意味着所有间距都是 4 的整数倍能有效避免1px 对不齐的视觉漂移:root { /* Base unit: 4px */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ }该刻度同时服务外边距、内边距和栅格后续组件令牌统一引用它从而保证间距只能来自刻度表。5. Component Tokens组件令牌组件令牌把常见 UI 原件的外观变量从具体组件中抽离全部回引上面已定义的基础令牌形成两级复用链组件令牌 → 语义令牌 → 原始值:root { /* Buttons */ --btn-padding-x: var(--space-4); --btn-padding-y: var(--space-2); --btn-font-size: var(--text-sm); --btn-font-weight: var(--font-medium); --btn-border-radius: var(--border-radius-md); /* Cards */ --card-padding: var(--space-6); --card-border-radius: var(--border-radius-lg); --card-bg: var(--bg-secondary); /* Inputs */ --input-padding-x: var(--space-3); --input-padding-y: var(--space-2); --input-border-radius: var(--border-radius-sm); --input-border-color: var(--border-color); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; }注意模板示例已覆盖 Button / Card / Input 三类最高频组件并预留了三类过渡时长令牌全部 ≤ 350ms保证交互响应手感。6. Shadows阴影令牌阴影层用rgba()逐级加深阴影--shadow-sm到--shadow-xl层级之间的不透明度阶梯0.1 → 0.25保证浮起层次感在深色背景下依然可辨:root { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25); }小提示若项目需要把整段输出放入组件Svelte/Vue/React作用域而不是全局:root可把变量声明块整体移入组件根选择器语义名不变即可获得局部 token 作用域。五、Usage Notes模式自带的五条使用纪律system.md在输出末尾固定附上Usage Notes作为对模型输出质量的自我约束清单也可视为对使用者的最佳实践建议一律使用语义令牌--bg-primary不要在生产样式中写裸色值间距遵循 4px 基准单位排版字号使用clamp()实现流式缩放暗色模式为默认浅色模式通过媒体查询覆盖所有过渡动画时长不超过 350ms保证响应迅速。配合# OUTPUT INSTRUCTIONS中的约束输出合法 CSS 自定义属性、必须同时包含深浅两套模式、语义化命名、间距遵循 4px/8px 基准、附带使用说明、可直接复制粘贴这套输出规则确保无论输入多随意产出都满足基本工程规范——这是本模式区别于自由发挥式提示词的核心价值。六、底层机制模式的加载与变量注入理解该模式如何被执行能让使用更可控。模式从哪来patterns_loader.go 中默认模式来源仓库路径为data/patternsFabric 首次运行会通过 PatternsLoader 克隆模式仓库并填充到本地 patterns 目录仓库内即 data/patterns本文讨论的 system.md 正是其中一份。加载器支持通过 Setup 问题配置 Git Repo Url 与 Git Repo Patterns Folder 两个来源项还负责在更新时保留自定义模式、跳过同名覆盖并生成unique_patterns.txt供--listpatterns使用。模式文件如何被读入读取入口是 fsdb/patterns.go 的loadPattern→getFromDB按patterns目录/模式名/SystemPatternFile拼接路径读取文件内容通常即system.md若存在自定义模式目录则优先读取自定义目录下的同名文件。{{input}}与模板变量如何生效从 patterns.go 的applyVariables/applyInput可以看出两点实现细节若模式文本中不存在{{input}}占位符ensureInput会自动在文末追加一行{{input}}再把你通过管道或参数传入的内容替换进去替换时{{input}}会先被临时替换为哨兵 token避免被模板引擎递归误替换处理完其它模板变量后再还原为用户输入。这意味着create_design_system这类没有显式写{{input}}的模式其需求文本会自动落在提示词末尾作为最后的INPUT:段——正好呼应system.md末尾的# INPUT/INPUT:标记。若希望精细控制用户也可以自行阅读并借鉴 官方模式模板 的写法来理解字段语义。七、落地到真实前端工程的建议把模式产出接入项目的推荐链路跑一次生成用fabric --pattern create_design_system喂入你的品牌信息得到一整段 CSS落盘为 token 文件新建styles/tokens.css原样粘贴输出生成后把#value占位符全部替换为真实品牌色值组件层消费在按钮、卡片、输入框组件样式中使用var(--btn-padding-y)、var(--card-bg)等语义令牌而不是写死 8px / #fff验收四原则对照第五节 Usage Notes 检查——有无裸色值、间距是否 4 的倍数、字号是否 clamp、深浅模式是否都正常。结合本仓库的 web/srcSvelteKit 前端实践将 token 层与组件样式分离是最符合该模式设计意图的组织方式今后换肤只需改tokens.css中:root与浅色媒体查询里的少量映射而所有组件代码无需改动。八、小结create_design_system是 Fabric 众包 AI 提示词体系的一个典型样本通过角色定义design systems architect、六步方法论、结构化的五层 CSS 输出契约与五条使用纪律把一个通常需要架构师反复斟酌的工作压成了一次提示词调用。其背后模式文件的按目录存储、{{input}}注入与模板变量机制则由 fsdb/patterns.go 与 patterns_loader.go 在运行时保证。对于正在搭建新前端项目、或需要为既有产品快速建立统一视觉语言与深浅双主题的团队直接复用这一模式即可获得一份结构清晰、可直接粘贴的设计令牌基础。【免费下载链接】FabricFabric is an open-source framework for augmenting humans using AI. It provides a modular system for solving specific problems using a crowdsourced set of AI prompts that can be used anywhere.项目地址: https://gitcode.com/GitHub_Trending/fa/Fabric创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考