从零读懂 BMAD-METHOD 的编辑风设计系统示例Linen Logic DESIGN.md 实战解析【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHODLinen Logic是 BMAD-METHOD 仓库中bmad-ux技能内置的三份 DESIGN.md 参考设计系统之一design-example-editorial.md它以「慢设计Slow Design」哲学演示了一个完整的编辑型电商Editorial Marketplace视觉身份应该如何书写。本文带你逐行拆解这份示例的 YAML 设计令牌colors / typography / rounded / spacing与 8 段 Markdown 正文骨架并结合 design-md-spec.md、SKILL.md 与 customize.toml 说明它如何被 AI 代理作为「形态锚点」复用让你能照此范式为自己的产品编写可被机器解析、可被下游代码消费的 DESIGN.md。这份示例在 BMAD-METHOD 中的定位在 BMAD 方法里bmad-ux技能负责把用户的 UX 愿景沉淀为两份对等的契约文档DESIGN.md视觉身份负责「看起来怎样」与EXPERIENCE.md信息架构与行为负责「用起来怎样」。其中 DESIGN.md 遵循 Google Labs 的 design.md 规范详见 design-md-spec.md由YAML frontmatter 令牌Markdown 正文两部分组成。design-example-editorial.md正是用于引导 AI 蒸馏子代理distillation subagent产出高质量 DESIGN.md 的参考脊柱example spine。从 customize.toml 可以看到其注册方式design_md_examples [ assets/design-example-mobile.md, assets/design-example-shadcn.md, assets/design-example-editorial.md, ]也就是说当用户说「创建 UX 设计」时技能激活后蒸馏子代理会读取这三份示例来「锚定」输出形态与编辑质感shape and editorial richness。三份示例恰好覆盖三种典型场景示例文件系统名场景design-example-mobile.mdQuill移动优先、平台原生、暗色默认的写作应用design-example-shadcn.mdDrift基于 shadcn/ui Tailwind 的品牌层增量design-example-editorial.mdLinen Logic高端编辑风Editorial数字时尚市集本文聚焦第三份它展示的是「视觉主张最强」的一类品牌调性主导一切设计令牌与正文叙事深度咬合。YAML Frontmatter机器可读的设计令牌层design-example-editorial.md的 frontmatter 定义了四个令牌族colors、typography、rounded、spacing示例省略了name/description之外的components规范中它是可选项。按 design-md-spec.md 的规则令牌键使用 kebab-case颜色值必须是十六进制字符串字体对象可包含fontFamily、fontSize、fontWeight、lineHeight、letterSpacing的任意子集。colors完整的 Material 语义色板该示例的色板完整遵循 Material Design 3 语义命名共 37 个令牌是「暖纸感」视觉的核心来源colors: surface: #fbf9f4 # 主画布——暖白非临床白 surface-dim: #dbdad5 # 降低对比的次级表面 surface-bright: #fbf9f4 surface-container-lowest: #ffffff surface-container-low: #f5f3ee # 容器层级由低到高 surface-container: #f0eee9 surface-container-high: #eae8e3 surface-container-highest: #e4e2dd on-surface: #1b1c19 # 主文字墨色 on-surface-variant: #4e453d # 次级文字 inverse-surface: #30312e inverse-on-surface: #f2f1ec outline: #80756b # 描边/分隔 outline-variant: #d1c4b9 surface-tint: #715a3f primary: #59452b # 主色——烟草棕 on-primary: #ffffff primary-container: #735c41 on-primary-container: #f5d6b4 inverse-primary: #e0c1a1 secondary: #a43b2c # 次色——晒褪红 on-secondary: #ffffff secondary-container: #fd7d69 on-secondary-container: #71160b tertiary: #374a5f # 第三色——羊毛毯蓝 on-tertiary: #ffffff tertiary-container: #4f6278 on-tertiary-container: #caddf8 error: #ba1a1a on-error: #ffffff error-container: #ffdad6 on-error-container: #93000a primary-fixed: #fdddbb primary-fixed-dim: #e0c1a1 on-primary-fixed: #281804 on-primary-fixed-variant: #58432a secondary-fixed: #ffdad4 secondary-fixed-dim: #ffb4a7 on-secondary-fixed: #400200 on-secondary-fixed-variant: #842417 tertiary-fixed: #d0e4ff tertiary-fixed-dim: #b4c8e2 on-tertiary-fixed: #071d30 on-tertiary-fixed-variant: #35485d background: #fbf9f4 on-background: #1b1c19 surface-variant: #e4e2dd值得注意的设计决策primary选择了低饱和的烟草棕#59452b而非高饱和品牌色secondary使用晒褪红#a43b2ctertiary是羊毛毯蓝#374a5f——三色都带有「天然纤维被日晒褪色」的观感与品牌叙事完全一致。色板本身就在讲故事这是编辑风设计系统与普通 SaaS 色板的本质区别。typography衬线策展人 无衬线功能音typography: display-lg: fontFamily: Libre Caslon Text fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em display-lg-mobile: fontFamily: Libre Caslon Text fontSize: 36px lineHeight: 1.1 headline-md: fontFamily: Libre Caslon Text fontSize: 32px lineHeight: 1.2 headline-sm: fontFamily: Libre Caslon Text fontSize: 24px lineHeight: 1.3 body-lg: fontFamily: DM Sans fontSize: 18px lineHeight: 1.6 letterSpacing: 0.01em body-md: fontFamily: DM Sans fontSize: 16px lineHeight: 1.6 label-caps: fontFamily: DM Sans fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em caption: fontFamily: DM Sans fontSize: 13px lineHeight: 1.4两套字体各有明确角色Libre Caslon Text承担展示级标题48/36/32/24px衬线、字重 400、紧行距是「策展人的声音」DM Sans承担正文与导航18/16/13/12px无衬线保持功能性安静。注意display-lg的letterSpacing: -0.02em负字距让大标题形成紧凑的视觉块与label-caps的letterSpacing: 0.1em标签始终加宽字距营造「轻盈的高级感」——这两条规则直接呼应正文 Typography 章节中的排版方法论。rounded 与 spacing形状语言与留白节奏rounded: sm: 0.125rem DEFAULT: 0.25rem # 主形状——Soft柔和圆角 md: 0.375rem lg: 0.5rem # 大容器卡片、弹窗 xl: 0.75rem full: 9999px spacing: unit: 8px gutter: 24px margin-mobile: 20px # 移动端最小侧边距 margin-desktop: 64px # 桌面端页边距 editorial-gap: 80px # 大区块间距编辑风留白核心spacing示范了规范中的「具名令牌」用法editorial-gap: 80px不是普通间距刻度而是语义化命名——「编辑区块之间的沉思留白」正文 Layout 章节中会直接引用它。正文八段式人类可读的设计叙事规范design-md-spec.md规定正文章节可省略但顺序锁定Brand Style → Colors → Typography → Layout Spacing → Elevation Depth → Shapes → Components → Dos and Donts。Linen Logic 示例完整呈现了前 7 段省略了 Dos and Donts段段都是「叙事 可执行规则」的写法示范。Brand Style先立审美姿态示例用两段话定义了整个系统的灵魂设计系统根植于「慢设计Slow Design」哲学——刻意背离快时尚的疯狂节奏。通过高端编辑式排版与克制的审美唤起一种「亚麻质感linen-weight」的触觉体验。目标受众重视「出身/来源provenance」胜过「在场/存在感presence」追求一种反思性的精致发现体验——既像精品杂志又像数字市集。风格是Editorial Minimalism编辑式极简叠加Tactile触觉细节。优先呼吸感的留白、模仿纸质 lookbook 的非对称布局、柔和晒褪的色板。每个交互都刻意「反 hype」——拒绝激进动画只用微妙过渡与安静自信。这一段的写作方法论值得复用先定义哲学why再定义风格关键词what最后落到交互气质how。后续所有颜色、字体、形状决策都能回溯到这里。Colors每种颜色都交代「为什么存在、用在哪、不用在哪」示例的 Colors 章节只讲了 5 个「叙事色」与 frontmatter 的 37 个语义令牌形成「叙事层 ↔ 令牌层」的对应关系暖白#F9F7F2即 surface主画布柔和、非临床减少视疲劳骨白#E3DED1surface-container 族与尘埃#C2B9A7outline 族结构深度、细微分隔线、次级表面烟草棕#735C41primary-container主墨色高对比排版与关键 UI 元素晒褪红#B84A39secondary与羊毛毯蓝#4A5D73tertiary克制使用的「有机强调色」用于编辑精选标记或轻微状态变化绝不破坏静谧氛围。写作要点正文中的每个叙事色都对应 frontmatter 中一个或多个真实令牌这正是规范提倡的「正文引用令牌」模式。规范还给出了标准跨引用语法正文与组件对象中可用{colors.primary}、{typography.body.fontSize}、{rounded.md}、{spacing.4}这类{path.to.token}引用由消费端解析器在读取时扁平化展开。Typography光学尺寸Optical Sizing逻辑Typography 章节强调大号展示标题应常用「光学尺寸」逻辑——更紧的行距与轻微负字距形成连贯的视觉块。标签始终加宽字距0.1em保持轻盈的高级感。这与 frontmatter 中display-lg的letterSpacing: -0.02em、label-caps的0.1em完全对应属于「先定令牌、正文再给使用规则」的闭环写法。Layout Spacing流体编辑网格采用Fluid Editorial Grid流体编辑网格。桌面端遵循 12 列结构但鼓励「非对称呼吸空间」——刻意留空列把焦点引向高质量图片。间距是慷慨的。editorial-gap80px用于主要内容区块之间让用户停下来思考。移动端至少保持 20px 侧边距让内容像「装裱的书页」而非贴边出血。元素倾向纵向堆叠模仿数字期刊的滚动感。三条可执行规则12 列非对称、80px 编辑间距、20px 移动侧边距全部来自 frontmatter 的 spacing 令牌可被前端直接落地。Elevation Depth色调分层 环境阴影深度通过Tonal Layering色调分层与Ambient Shadows环境阴影传达而非锐利描边表面用「骨白」在「暖白」底上定义容器阴影高度扩散并混入「烟草」色相rgba(115, 92, 65, 0.08)模糊半径 20px、极低不透明度模拟「光线打在织物上的柔光」边框必要时 1px、使用「尘埃」色形成几乎不存在的「幽灵轮廓」。Shapes软0.25rem形状语言形状语言是Soft0.25rem。锐角太具攻击性药丸形又太「数字/科技」而微妙的圆角模仿织物随时间自然软化的质感。更大的容器卡片、弹窗可用rounded-lg0.5rem强调其「物件的触觉质感」。图片必须跟随容器圆角保持「装裱感」的一致性。这条「图片圆角跟随容器」的规则是编辑风设计系统的关键一致性细节也是 VALIDATE 阶段检查项详见下文。Components组件级视觉规格示例给出了 6 个组件的视觉规范每个都点名了使用的令牌按钮主按钮 实心「烟草」填充 「暖白」文字次按钮 「骨白」底 「烟草」文字或仅「烟草」文字 1px「尘埃」边框横向内边距慷慨形成优雅修长的轮廓卡片大图 headline-sm标题 caption副行阴影仅 hover 时出现模拟「轻柔抬起」输入框极简「尘埃」下划线聚焦过渡为「烟草」字段上方标签保持label-caps样式标签/Chips用于材质类型如「100% 亚麻」「骨白」底 「烟草」文字Soft圆角图标必须「手绘Hand-drawn」或「细线Fine-line」风格线条带有细微瑕疵、粗细不一强化被发现时尚的触觉与手工艺属性导航居中的底部栏或滚动时消失的顶部「幽灵」头部最大化编辑视野。三份示例对比同一个 DESIGN.md 骨架三种个性把三份示例并列对比能更清楚地看到「骨架统一、个性各异」的写作模式维度Quill移动DriftshadcnLinen Logic编辑风字体策略完全继承平台iOS/Android 原生动态字体继承 Geist Sans仅 display 换 Instrument Serif双字体Caslon 策展 DM Sans 功能颜色数量极克制单强调色 Tobacco品牌层仅两色Navy Amber完整 37 令牌 MD3 语义色板阴影态度拒绝阴影纸感继承 shadcn「shadcn 的阴影就是正确的」环境柔光阴影rgba 混入主色相圆角6/12px无药丸4/6/8px比 shadcn 更锐0.25rem Soft 0.5rem 大容器组件覆盖自定义Prompt card / Composer / Save indicator80% 继承 shadcn 品牌增量Focus card全自定义按钮/卡片/输入/标签/图标/导航这份对比本身就是方法论先决定继承策略平台原生 / UI 框架 / 全自定义再写品牌增量。Drift 示例明确写下「不覆盖 shadcn 默认值」的纪律Linen Logic 则因没有既有 UI 系统选择自下而上构建全套视觉语言。从示例到实战如何复用它产出自己的 DESIGN.md1. 作为形态锚点Shape Anchor在bmad-ux的 Create 工作流中Finalize 阶段会派子代理读取.memlog.md、.working/、imports/与 sources对照{workflow.design_md_examples}产出 DESIGN.md见 SKILL.md。如果你要写编辑风产品Linen Logic 就是最贴合的锚点——子代理会模仿它的叙事密度、令牌完整度与章节次序。团队还可以通过 override TOML{project-root}/_bmad/custom/bmad-ux.toml向design_md_examples追加自己组织的「规范美学」示例。2. 配合创作工具迭代视觉Discovery 阶段可调用创作工具子代理渲染备选方案工作产物统一落在{doc_workspace}/.working/见 creative-tools.mdcolor-themes.md产出 4–6 个并排 HTML 主题变体每个变体在style注释中记录具体十六进制值脊柱保持语义化只存令牌不存具体色值——与 Linen Logic 的「叙事色 ↔ 语义令牌」分层一致design-directions.md产出 3–6 个「完整视觉人格」的 HTML 方向稿密度、字重、动势暗示、品牌语域各不相同每个文件含 2–3 句设计理由 近 1:1 的 hero 屏 mockup文案必须来自对话真实内容不用 lorem。用户在浏览器中挑选macOSopen、Linuxxdg-open、Windowsstart 最终由 Finalize 阶段把mockups/HTML与wireframes/Excalidraw作为视觉参考内联链接进脊柱。3. 用设计手写笔Design Handoff衔接外部工具SKILL.md 定义了 Design handoff 模式把 Discovery 捕获的内容组装成「生产者形态的提示词」由用户到外部工具默认 Google Stitch也支持 Vercel v0、Figma、Galileo 等运行并把输出保存回{doc_workspace}。Linen Logic 这类完整示例正好可以作为 handoff 提示的「期望输出样例」。4. 用校验管道把关令牌与叙事产出后进入校验validate.md其中「令牌完整性」检查会抽取 frontmatter 全部令牌与正文中所有{path.to.token}引用逐一验证是否已定义——缺失十六进制值或适用的明/暗色对的颜色令牌被视为 Critical因为下游代码会镜像脊柱。此外还会检查形状契合DESIGN.md 章节是否按规范顺序排列视觉参考覆盖mockups/、wireframes/、imports/的每个文件是否被脊柱内联引用并声明「脊柱胜出spines-win-on-conflict」膨胀与过度规格能用令牌覆盖的像素规格、与决策无关的装饰性叙事会被标记——Linen Logic 之所以是「范例」正是因为它的每段叙事都绑定到具体令牌决策没有游离的修辞。关键要点速查design-example-editorial.md是 bmad-ux 技能内置的三份 DESIGN.md 示例脊柱之一见 customize.toml用于锚定编辑风产品的视觉文档形态。一个高质量的 DESIGN.md 完整机器可读的 YAML 令牌层 顺序锁定的 8 段正文叙事二者通过{path.to.token}跨引用咬合规范见 design-md-spec.md。Linen Logic 的三大可复用范式叙事色 ↔ 语义令牌分层、光学尺寸排版规则负字距大标题 0.1em 加宽标签、图片圆角跟随容器的一致性约束。复用路径Create 工作流中把它作为design_md_examples锚点 → Discovery 用创作工具迭代color-themes.md、design-directions.md→ Design handoff 衔接外部设计工具 → Validate 阶段用令牌完整性等检查把关。若产品基于 shadcn/MUI/平台原生参考 design-example-shadcn.md 与 design-example-mobile.md 的「继承 增量」写法而不是从零定义全部令牌。通过把 Linen Logic 当作模板而非教条你可以为任何「重视质感、克制、编辑叙事」的产品产出一份既能让 AI 代理精确消费、又能让人类设计师直接照做的 DESIGN.md。【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHOD创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从零读懂 BMAD-METHOD 的编辑风设计系统示例：Linen Logic DESIGN.md 实战解析
从零读懂 BMAD-METHOD 的编辑风设计系统示例Linen Logic DESIGN.md 实战解析【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHODLinen Logic是 BMAD-METHOD 仓库中bmad-ux技能内置的三份 DESIGN.md 参考设计系统之一design-example-editorial.md它以「慢设计Slow Design」哲学演示了一个完整的编辑型电商Editorial Marketplace视觉身份应该如何书写。本文带你逐行拆解这份示例的 YAML 设计令牌colors / typography / rounded / spacing与 8 段 Markdown 正文骨架并结合 design-md-spec.md、SKILL.md 与 customize.toml 说明它如何被 AI 代理作为「形态锚点」复用让你能照此范式为自己的产品编写可被机器解析、可被下游代码消费的 DESIGN.md。这份示例在 BMAD-METHOD 中的定位在 BMAD 方法里bmad-ux技能负责把用户的 UX 愿景沉淀为两份对等的契约文档DESIGN.md视觉身份负责「看起来怎样」与EXPERIENCE.md信息架构与行为负责「用起来怎样」。其中 DESIGN.md 遵循 Google Labs 的 design.md 规范详见 design-md-spec.md由YAML frontmatter 令牌Markdown 正文两部分组成。design-example-editorial.md正是用于引导 AI 蒸馏子代理distillation subagent产出高质量 DESIGN.md 的参考脊柱example spine。从 customize.toml 可以看到其注册方式design_md_examples [ assets/design-example-mobile.md, assets/design-example-shadcn.md, assets/design-example-editorial.md, ]也就是说当用户说「创建 UX 设计」时技能激活后蒸馏子代理会读取这三份示例来「锚定」输出形态与编辑质感shape and editorial richness。三份示例恰好覆盖三种典型场景示例文件系统名场景design-example-mobile.mdQuill移动优先、平台原生、暗色默认的写作应用design-example-shadcn.mdDrift基于 shadcn/ui Tailwind 的品牌层增量design-example-editorial.mdLinen Logic高端编辑风Editorial数字时尚市集本文聚焦第三份它展示的是「视觉主张最强」的一类品牌调性主导一切设计令牌与正文叙事深度咬合。YAML Frontmatter机器可读的设计令牌层design-example-editorial.md的 frontmatter 定义了四个令牌族colors、typography、rounded、spacing示例省略了name/description之外的components规范中它是可选项。按 design-md-spec.md 的规则令牌键使用 kebab-case颜色值必须是十六进制字符串字体对象可包含fontFamily、fontSize、fontWeight、lineHeight、letterSpacing的任意子集。colors完整的 Material 语义色板该示例的色板完整遵循 Material Design 3 语义命名共 37 个令牌是「暖纸感」视觉的核心来源colors: surface: #fbf9f4 # 主画布——暖白非临床白 surface-dim: #dbdad5 # 降低对比的次级表面 surface-bright: #fbf9f4 surface-container-lowest: #ffffff surface-container-low: #f5f3ee # 容器层级由低到高 surface-container: #f0eee9 surface-container-high: #eae8e3 surface-container-highest: #e4e2dd on-surface: #1b1c19 # 主文字墨色 on-surface-variant: #4e453d # 次级文字 inverse-surface: #30312e inverse-on-surface: #f2f1ec outline: #80756b # 描边/分隔 outline-variant: #d1c4b9 surface-tint: #715a3f primary: #59452b # 主色——烟草棕 on-primary: #ffffff primary-container: #735c41 on-primary-container: #f5d6b4 inverse-primary: #e0c1a1 secondary: #a43b2c # 次色——晒褪红 on-secondary: #ffffff secondary-container: #fd7d69 on-secondary-container: #71160b tertiary: #374a5f # 第三色——羊毛毯蓝 on-tertiary: #ffffff tertiary-container: #4f6278 on-tertiary-container: #caddf8 error: #ba1a1a on-error: #ffffff error-container: #ffdad6 on-error-container: #93000a primary-fixed: #fdddbb primary-fixed-dim: #e0c1a1 on-primary-fixed: #281804 on-primary-fixed-variant: #58432a secondary-fixed: #ffdad4 secondary-fixed-dim: #ffb4a7 on-secondary-fixed: #400200 on-secondary-fixed-variant: #842417 tertiary-fixed: #d0e4ff tertiary-fixed-dim: #b4c8e2 on-tertiary-fixed: #071d30 on-tertiary-fixed-variant: #35485d background: #fbf9f4 on-background: #1b1c19 surface-variant: #e4e2dd值得注意的设计决策primary选择了低饱和的烟草棕#59452b而非高饱和品牌色secondary使用晒褪红#a43b2ctertiary是羊毛毯蓝#374a5f——三色都带有「天然纤维被日晒褪色」的观感与品牌叙事完全一致。色板本身就在讲故事这是编辑风设计系统与普通 SaaS 色板的本质区别。typography衬线策展人 无衬线功能音typography: display-lg: fontFamily: Libre Caslon Text fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em display-lg-mobile: fontFamily: Libre Caslon Text fontSize: 36px lineHeight: 1.1 headline-md: fontFamily: Libre Caslon Text fontSize: 32px lineHeight: 1.2 headline-sm: fontFamily: Libre Caslon Text fontSize: 24px lineHeight: 1.3 body-lg: fontFamily: DM Sans fontSize: 18px lineHeight: 1.6 letterSpacing: 0.01em body-md: fontFamily: DM Sans fontSize: 16px lineHeight: 1.6 label-caps: fontFamily: DM Sans fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em caption: fontFamily: DM Sans fontSize: 13px lineHeight: 1.4两套字体各有明确角色Libre Caslon Text承担展示级标题48/36/32/24px衬线、字重 400、紧行距是「策展人的声音」DM Sans承担正文与导航18/16/13/12px无衬线保持功能性安静。注意display-lg的letterSpacing: -0.02em负字距让大标题形成紧凑的视觉块与label-caps的letterSpacing: 0.1em标签始终加宽字距营造「轻盈的高级感」——这两条规则直接呼应正文 Typography 章节中的排版方法论。rounded 与 spacing形状语言与留白节奏rounded: sm: 0.125rem DEFAULT: 0.25rem # 主形状——Soft柔和圆角 md: 0.375rem lg: 0.5rem # 大容器卡片、弹窗 xl: 0.75rem full: 9999px spacing: unit: 8px gutter: 24px margin-mobile: 20px # 移动端最小侧边距 margin-desktop: 64px # 桌面端页边距 editorial-gap: 80px # 大区块间距编辑风留白核心spacing示范了规范中的「具名令牌」用法editorial-gap: 80px不是普通间距刻度而是语义化命名——「编辑区块之间的沉思留白」正文 Layout 章节中会直接引用它。正文八段式人类可读的设计叙事规范design-md-spec.md规定正文章节可省略但顺序锁定Brand Style → Colors → Typography → Layout Spacing → Elevation Depth → Shapes → Components → Dos and Donts。Linen Logic 示例完整呈现了前 7 段省略了 Dos and Donts段段都是「叙事 可执行规则」的写法示范。Brand Style先立审美姿态示例用两段话定义了整个系统的灵魂设计系统根植于「慢设计Slow Design」哲学——刻意背离快时尚的疯狂节奏。通过高端编辑式排版与克制的审美唤起一种「亚麻质感linen-weight」的触觉体验。目标受众重视「出身/来源provenance」胜过「在场/存在感presence」追求一种反思性的精致发现体验——既像精品杂志又像数字市集。风格是Editorial Minimalism编辑式极简叠加Tactile触觉细节。优先呼吸感的留白、模仿纸质 lookbook 的非对称布局、柔和晒褪的色板。每个交互都刻意「反 hype」——拒绝激进动画只用微妙过渡与安静自信。这一段的写作方法论值得复用先定义哲学why再定义风格关键词what最后落到交互气质how。后续所有颜色、字体、形状决策都能回溯到这里。Colors每种颜色都交代「为什么存在、用在哪、不用在哪」示例的 Colors 章节只讲了 5 个「叙事色」与 frontmatter 的 37 个语义令牌形成「叙事层 ↔ 令牌层」的对应关系暖白#F9F7F2即 surface主画布柔和、非临床减少视疲劳骨白#E3DED1surface-container 族与尘埃#C2B9A7outline 族结构深度、细微分隔线、次级表面烟草棕#735C41primary-container主墨色高对比排版与关键 UI 元素晒褪红#B84A39secondary与羊毛毯蓝#4A5D73tertiary克制使用的「有机强调色」用于编辑精选标记或轻微状态变化绝不破坏静谧氛围。写作要点正文中的每个叙事色都对应 frontmatter 中一个或多个真实令牌这正是规范提倡的「正文引用令牌」模式。规范还给出了标准跨引用语法正文与组件对象中可用{colors.primary}、{typography.body.fontSize}、{rounded.md}、{spacing.4}这类{path.to.token}引用由消费端解析器在读取时扁平化展开。Typography光学尺寸Optical Sizing逻辑Typography 章节强调大号展示标题应常用「光学尺寸」逻辑——更紧的行距与轻微负字距形成连贯的视觉块。标签始终加宽字距0.1em保持轻盈的高级感。这与 frontmatter 中display-lg的letterSpacing: -0.02em、label-caps的0.1em完全对应属于「先定令牌、正文再给使用规则」的闭环写法。Layout Spacing流体编辑网格采用Fluid Editorial Grid流体编辑网格。桌面端遵循 12 列结构但鼓励「非对称呼吸空间」——刻意留空列把焦点引向高质量图片。间距是慷慨的。editorial-gap80px用于主要内容区块之间让用户停下来思考。移动端至少保持 20px 侧边距让内容像「装裱的书页」而非贴边出血。元素倾向纵向堆叠模仿数字期刊的滚动感。三条可执行规则12 列非对称、80px 编辑间距、20px 移动侧边距全部来自 frontmatter 的 spacing 令牌可被前端直接落地。Elevation Depth色调分层 环境阴影深度通过Tonal Layering色调分层与Ambient Shadows环境阴影传达而非锐利描边表面用「骨白」在「暖白」底上定义容器阴影高度扩散并混入「烟草」色相rgba(115, 92, 65, 0.08)模糊半径 20px、极低不透明度模拟「光线打在织物上的柔光」边框必要时 1px、使用「尘埃」色形成几乎不存在的「幽灵轮廓」。Shapes软0.25rem形状语言形状语言是Soft0.25rem。锐角太具攻击性药丸形又太「数字/科技」而微妙的圆角模仿织物随时间自然软化的质感。更大的容器卡片、弹窗可用rounded-lg0.5rem强调其「物件的触觉质感」。图片必须跟随容器圆角保持「装裱感」的一致性。这条「图片圆角跟随容器」的规则是编辑风设计系统的关键一致性细节也是 VALIDATE 阶段检查项详见下文。Components组件级视觉规格示例给出了 6 个组件的视觉规范每个都点名了使用的令牌按钮主按钮 实心「烟草」填充 「暖白」文字次按钮 「骨白」底 「烟草」文字或仅「烟草」文字 1px「尘埃」边框横向内边距慷慨形成优雅修长的轮廓卡片大图 headline-sm标题 caption副行阴影仅 hover 时出现模拟「轻柔抬起」输入框极简「尘埃」下划线聚焦过渡为「烟草」字段上方标签保持label-caps样式标签/Chips用于材质类型如「100% 亚麻」「骨白」底 「烟草」文字Soft圆角图标必须「手绘Hand-drawn」或「细线Fine-line」风格线条带有细微瑕疵、粗细不一强化被发现时尚的触觉与手工艺属性导航居中的底部栏或滚动时消失的顶部「幽灵」头部最大化编辑视野。三份示例对比同一个 DESIGN.md 骨架三种个性把三份示例并列对比能更清楚地看到「骨架统一、个性各异」的写作模式维度Quill移动DriftshadcnLinen Logic编辑风字体策略完全继承平台iOS/Android 原生动态字体继承 Geist Sans仅 display 换 Instrument Serif双字体Caslon 策展 DM Sans 功能颜色数量极克制单强调色 Tobacco品牌层仅两色Navy Amber完整 37 令牌 MD3 语义色板阴影态度拒绝阴影纸感继承 shadcn「shadcn 的阴影就是正确的」环境柔光阴影rgba 混入主色相圆角6/12px无药丸4/6/8px比 shadcn 更锐0.25rem Soft 0.5rem 大容器组件覆盖自定义Prompt card / Composer / Save indicator80% 继承 shadcn 品牌增量Focus card全自定义按钮/卡片/输入/标签/图标/导航这份对比本身就是方法论先决定继承策略平台原生 / UI 框架 / 全自定义再写品牌增量。Drift 示例明确写下「不覆盖 shadcn 默认值」的纪律Linen Logic 则因没有既有 UI 系统选择自下而上构建全套视觉语言。从示例到实战如何复用它产出自己的 DESIGN.md1. 作为形态锚点Shape Anchor在bmad-ux的 Create 工作流中Finalize 阶段会派子代理读取.memlog.md、.working/、imports/与 sources对照{workflow.design_md_examples}产出 DESIGN.md见 SKILL.md。如果你要写编辑风产品Linen Logic 就是最贴合的锚点——子代理会模仿它的叙事密度、令牌完整度与章节次序。团队还可以通过 override TOML{project-root}/_bmad/custom/bmad-ux.toml向design_md_examples追加自己组织的「规范美学」示例。2. 配合创作工具迭代视觉Discovery 阶段可调用创作工具子代理渲染备选方案工作产物统一落在{doc_workspace}/.working/见 creative-tools.mdcolor-themes.md产出 4–6 个并排 HTML 主题变体每个变体在style注释中记录具体十六进制值脊柱保持语义化只存令牌不存具体色值——与 Linen Logic 的「叙事色 ↔ 语义令牌」分层一致design-directions.md产出 3–6 个「完整视觉人格」的 HTML 方向稿密度、字重、动势暗示、品牌语域各不相同每个文件含 2–3 句设计理由 近 1:1 的 hero 屏 mockup文案必须来自对话真实内容不用 lorem。用户在浏览器中挑选macOSopen、Linuxxdg-open、Windowsstart 最终由 Finalize 阶段把mockups/HTML与wireframes/Excalidraw作为视觉参考内联链接进脊柱。3. 用设计手写笔Design Handoff衔接外部工具SKILL.md 定义了 Design handoff 模式把 Discovery 捕获的内容组装成「生产者形态的提示词」由用户到外部工具默认 Google Stitch也支持 Vercel v0、Figma、Galileo 等运行并把输出保存回{doc_workspace}。Linen Logic 这类完整示例正好可以作为 handoff 提示的「期望输出样例」。4. 用校验管道把关令牌与叙事产出后进入校验validate.md其中「令牌完整性」检查会抽取 frontmatter 全部令牌与正文中所有{path.to.token}引用逐一验证是否已定义——缺失十六进制值或适用的明/暗色对的颜色令牌被视为 Critical因为下游代码会镜像脊柱。此外还会检查形状契合DESIGN.md 章节是否按规范顺序排列视觉参考覆盖mockups/、wireframes/、imports/的每个文件是否被脊柱内联引用并声明「脊柱胜出spines-win-on-conflict」膨胀与过度规格能用令牌覆盖的像素规格、与决策无关的装饰性叙事会被标记——Linen Logic 之所以是「范例」正是因为它的每段叙事都绑定到具体令牌决策没有游离的修辞。关键要点速查design-example-editorial.md是 bmad-ux 技能内置的三份 DESIGN.md 示例脊柱之一见 customize.toml用于锚定编辑风产品的视觉文档形态。一个高质量的 DESIGN.md 完整机器可读的 YAML 令牌层 顺序锁定的 8 段正文叙事二者通过{path.to.token}跨引用咬合规范见 design-md-spec.md。Linen Logic 的三大可复用范式叙事色 ↔ 语义令牌分层、光学尺寸排版规则负字距大标题 0.1em 加宽标签、图片圆角跟随容器的一致性约束。复用路径Create 工作流中把它作为design_md_examples锚点 → Discovery 用创作工具迭代color-themes.md、design-directions.md→ Design handoff 衔接外部设计工具 → Validate 阶段用令牌完整性等检查把关。若产品基于 shadcn/MUI/平台原生参考 design-example-shadcn.md 与 design-example-mobile.md 的「继承 增量」写法而不是从零定义全部令牌。通过把 Linen Logic 当作模板而非教条你可以为任何「重视质感、克制、编辑叙事」的产品产出一份既能让 AI 代理精确消费、又能让人类设计师直接照做的 DESIGN.md。【免费下载链接】BMAD-METHODBreakthrough Method for Agile Ai Driven Development项目地址: https://gitcode.com/gh_mirrors/bm/BMAD-METHOD创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考