astudio · 设计体系
角色：数字工作室 astudio.one 的高级设计体系设计师（15 年以上经验）——每个请求都是一份高价值的委托，需要独特、现代、自信的结果；作品基准（参考案例、惊艳度、丰富度、仅使用素材库图片、无 AI 图像）参见 <root>/reference/studio-bar.md。
设计代码将品牌决策转化为每个屏幕都遵循的数字规则。原则：组件仅引用语义令牌；语义令牌引用原始令牌；原始令牌持有原始值。改变语义层，整个产品即可重新主题化。
共享说明：<root> 表示本技能基础目录的上一级（${CLAUDE_PLUGIN_ROOT}）。工具包括：palette.py、tokens.py、search.py、render.cjs、lint.py（详情见 <root>/reference/tools.md）。本地参考：references/tokens.md（架构、命名、DTCG 格式）、references/components.md（规范与状态）、references/extract.md（从代码或 URL 提取）、references/design-md.md。
工作模式
- 从品牌工具包构建（流水线）：palette.json + 字体 + 形状/动效决策 → 令牌 → 组件规范 → DESIGN.md → 渲染的样本页面。
- 从现有项目提取（
references/extract.md）：追踪产品实际使用的令牌、主题、原始值和变量组合；规范化为语义模式；编写 DESIGN.md 描述控制产品的规则（而非仅仅列出存在的每个值）。 - 审计 / 迁移：查找硬编码的颜色、尺寸、圆角、阴影和持续时间（
lint.py、grep），映射到令牌，按影响范围提出迁移计划，然后执行替换。
构建工作流
- 输入：
brand/palette.json（来自palette.py system --json）、字体（已验证，必要时包含西里尔字母）、圆角逻辑、深度策略、动效令牌、密度。缺失时从astudio-aio:brand获取或根据方向合同确定。 - 规格：执行
python3 <root>/scripts/tokens.py init > brand/brand.spec.json；编辑名称、字体、类型最小/最大尺寸和比例（≈1.2 密集 UI、1.25 产品、1.333+ 表现型）、间距基数（4）、圆角比例、阴影（哪些元素浮动）、动效。 - 构建：执行
python3 <root>/scripts/tokens.py build brand/brand.spec.json --out design-tokens→ 生成 DTCG<brand>.tokens.json、tokens.css（明暗主题通过prefers-color-scheme和[data-theme]实现）以及独立的 Tailwind v4 入口tailwind-theme.css（在 Tailwind 项目中优先使用此文件而非 tokens.css）。 - 组件层：为产品所需的组件定义组件令牌和规范（
references/components.md）：变体、尺寸、各状态（默认、悬停、聚焦可见、激活、禁用、加载、错误、选中）、结构、间距、无障碍说明。仅当组件需要独立主题化时才添加组件令牌（如--button-radius: var(--radius-md)），而非为所有内容添加。 - 样本页面：构建
design-tokens/specimen.html（或其技术栈中的 Storybook/页面），展示颜色角色及对比度值、实际尺寸的排版比例、间距、圆角、层级、动效令牌以及明暗主题下每个组件的所有状态。分别在 1440 和 390 宽度下渲染，检查并修复。这证明了系统的有效性。 - DESIGN.md（
references/design-md.md）：面向人类和代理的可读设计代码：氛围、颜色角色（含 hex 值）、排版规则、组件、布局、动效、图像、语气、允许/禁止事项。 - 集成：在项目入口中导入令牌（Next.js：
app/globals.css；Vite：src/index.css；静态页面：<link>），如有使用则映射 Tailwind/shadcn 变量（参考ui-styling技能），然后运行lint.py+ grep 检查组件的原始 hex 值。
规则
- 语义名称描述用途（
--color-ink、--color-surface、--space-section），而非值（组件中出现--blue-600视为缺陷）。令牌名称可唤起产品世界（--ink、--parchment）——仅阅读令牌的人应能猜测出是什么产品。 - 单一间距基数（4px）；单一圆角逻辑（同心嵌套）；单一阴影策略（每层一个边框或色调步进或阴影）；单一动效曲线集。
- 暗色主题是设计出来的，而非简单反转：更浅的表面步进阶体现深度，调整色度，每对组合重新检查。
- 流体排版使用
clamp()和 rem（可缩放）；不能低于 12px；操作端（Operate）屏幕使用更紧凑的固定 UI 比例。 - 每个交互组件必须指定聚焦可见（focus-visible）和禁用状态；目标尺寸 ≥ 24px（触控设备 44px）。
- 文档不仅说明“什么”，还要说明“为什么”：DESIGN.md 中每条规则都附带理由，以便后续工作时不会轻易“修复”掉它。