用途：为 Boring 应用提供统一视觉规范。所有 Boring 应用基于 shadcn/ui，模板（hachej/boring-app）从默认外观开始（preset bIkeymG：vega、neutral、Inter、Lucide、Base UI）。应用通过修改 token 值获得自己的外观，而不是新增样式。依赖 shadcn skill 安装。
先读：shadcn skill（组件、组合、表单、图标、聊天与 CLI 规则）；应用的 DESIGN.md 与其主题文件（web/src/index.css），token 名称和值的唯一来源，不要凭记忆。改 web/ 前执行 cd web && npx shadcn@latest info --json。
核心原则：每个视觉值都是 token，组件只读 token，应用在主题文件中覆盖任何 token，其他位置不承载视觉值。家族包括颜色（shadcn 语义色、状态色 success/warning/info 及柔和变体、图表系列）、排版（字体族 display/sans/mono、字号、字重、行高、字距）、形状（圆角层级、边框宽度）、阴影（xs 到 lg，映射进 Tailwind）、间距与密度（基础间距单位、控件高度、触摸目标）、焦点（焦点环颜色、宽度、偏移）、动效（时长与缓动）。没有 shadcn 槽位的 token 按 shadcn skill 的 design-system.md 添加：在 :root（及 .dark）声明变量，再在 @theme inline 注册，且只在主题文件中。shadcn 风格（vega、nova、maia、lyra、luma、mira、rhea、sera）通过 preset 选择，用于 token 触及不到的几何属性。
DESIGN.md：每个应用在仓库根目录一份，先是 YAML frontmatter（设计师表述的 token：明暗颜色、排版、rounded、spacing、components，加 preset、style、baseColor、iconLibrary），后接散文（外观如何构建、Do、Don't、已知缺口）。它说明主题文件的内容及原因；两者必须同步修改，不一致即为 bug。
定制外观流程：编辑 DESIGN.md；在主题文件改 token 值（字体用 registry:font 项或主题字体 token，不要在组件里写 link 或 @font-face）；改基础 preset 或 style 用 cd web && npx shadcn@latest apply <preset>（--only theme,font 保留组件），它会重写主题文件，之后需重新应用本应用的 token 值并读 diff，切勿手工解码 preset；需要的值没有 token 就先新增再全局使用；刷新设计系统页面及基线。
Lint 规则由 scripts/verify（node scripts/verify.mjs check 及 CI）按 scripts/verify/ARCHITECTURE.json 强制执行，design-* 条目为准：design-semantic-colors（应用代码中禁止 hex、rgb()、oklch() 字面量或调色板类如 bg-blue-500、text-white，改用语义类或新增 token）、design-no-dark-overrides（禁止 dark: 颜色，token 随 .dark 切换，暗色值写在主题文件）、design-gap-not-space（禁止 space-x-、space-y-，用 flex 与 gap-*）、design-theme-one-file（@theme 或主题变量不得在主题文件外）、design-tokens-only（禁止任意值 text-[..]、rounded-[..]、shadow-[..]）。修代码而不是修规则，不得加 allow 条目；当前豁免 components/ui/（CLI 所有）与内置的 components/feedback/。
/design-system 页面渲染所有已安装组件与聊天组件，明暗两套，Playwright 测试维护截图基线（test/e2e/design-system.spec.mjs）。新组件也要加入该页。主题有意变更时，应在同一 PR 更新基线（--update-snapshots），查看每张变化图片，并在 PR 说明改动与原因；非预期的基线差异就是 bug。
聊天与反馈继承主题：共享聊天套件 boring-ui 与应用内反馈只读 token 并跟随 .dark，通过改 token 换肤，不要改套件 CSS。组合 shadcn 聊天组件（MessageScroller、Message、Bubble、Attachment、Marker）；图表使用 --chart-1..5。
禁止：原始颜色、dark: 颜色覆盖、space-x/y、任意值；为外观写组件级 CSS 或 <style>；第二份 token 样式表；使用其他 UI 库（MUI、Chakra、Mantine、Ant）或手写 dialog、dropdown、toast、spinner、bubble；为一次性需求手改 components/ui/ 或分叉套件文件；把主题变量放在主题文件以外。
优先级：在 Boring 应用中，本规范高于其他设计技能。frontend-design（避开 Inter、选特别字体与配色）意味着通过 token 和 DESIGN.md 表达独特外观；pick-ui-library 意味着 shadcn 优先（仅覆盖 shadcn 缺失的动效、图表扩展、拖拽、虚拟化等，并用 token 颜色接线）；emil-design-eng、make-interfaces-feel-better、interaction-design、animate、mobile-native、prototype 的工艺与动效规则保留，但取值（圆角、阴影、缓动、时长、字体）来自 token，原型变体也使用应用 token。
示例（仅用 token 实现强品牌）：健身应用要 indigo 与 lime、Barlow Condensed 标题、Hanken Grotesk 正文、JetBrains Mono 数字、2 到 4px 圆角、2px 边框、硬偏移阴影，无需改组件——在 DESIGN.md 记录调色板、字体、圆角、边框宽度、阴影及 Do/Don't；若基础仍是默认，用 npx shadcn@latest apply lyra --only theme,font 选方直锐利风格并检查 diff；主题文件只改值：--primary 用 indigo 及其前景色，--accent 用 lime 及其前景色，--ring 用 indigo，暗色值写在 .dark，圆角层级钉到 2 到 4px，边框宽度 token 设为 2px，阴影标度改为硬偏移（4px 4px 0 0 var(--foreground) 风格、零模糊），display、sans、mono 字体 token 指向三个字体族并在主题中加载，状态色与图表色按调色板重调；界面继续用 bg-primary、rounded-lg、shadow-md、font-display；运行 verify check 无规则触发；更新 /design-system 基线并逐张查看明暗图片；聊天与反馈自动跟随。若外观需要任何 token 都无法表达的东西，应新增 token（主题文件与 DESIGN.md），而不是一次性样式。