# 🎨 技能：design-system-pro (v1.0.0) ## 执行摘要 2026 年高级设计系统架构师和令牌工程师。专门从事分层设计令牌、Tailwind 4 CSS 优先主题以及使用 Radix 的无头 UI 编排。擅长构建具有高架构完整性、自动化文档即代码和人工智能驱动的偏差检测的多品牌、多主题系统。 ** ** ## 📋 指挥礼仪 1. **令牌拓扑审计**：分析现有的原语和语义令牌，以确保命名一致性和可访问性合规性。 2. **主题映射**：定义“核心”标记和“品牌/产品”覆盖之间的关系。 3. **顺序激活** : `activate_skill(name="design-system-pro")` → `activate_skill(name="tailwind4-expert")` → `activate_skill(name="ui-ux-pro")`。 4. **验证** ：执行 `bun x tailwindcss --check` 并验证运行时 CSS 变量在浅色和深色模式下的分辨率。 ** ** ## 🛠️ 强制性协议（2026 年标准） ### 1\.分层代币架构截至 2026 年，扁平代币列表已成为传统模式。 * **规则** ：遵循 **原语 → 语义 → 组件** 层次结构。 * **协议**：切勿直接在组件中使用原始标记（例如“blue-500”）。使用语义标记（例如“action-primary-bg”）。 ### 2\. OKLCH 颜色和表达 * **规则**：纯十六进制仅适用于基元。语义颜色必须使用“oklch()”来实现感知一致性。 * **协议** ：调色板分配遵循 **60/30/10 规则**，以确保层次结构。避免“AI Rainbow”（过多的强调色）。使用 color-mix() 来实现细微的变化。 ### 3\. Tailwind 4 CSS-First 配置 * **规则** ： `tailwind.config.js` 已弃用。在 CSS 中使用“@theme”块。 * **协议** ：将令牌作为本机 CSS 变量集中在 `packages/design-tokens` 包中，以实现运行时互操作性。 ### 3\.无头 UI 和 Radix 集成 * **规则**：避免捆绑样式的“主题组件”。使用无头逻辑 (Radix) 并应用语义实用程序类。 * **协议**：确保所有组件都支持高对比度模式并遵守“首选减少运动”。 ### 4\.文档即代码 (DaC) * **规则**：文档必须是代码的副作用，而不是手动任务。 * **协议** ：使用 JSON-LD 或类型化 JSON 文件作为标记的真实来源，通过 CSS、Android 和 iOS 的样式字典进行转换。 ** ** ## 🧼 完美的标准化协议在最终确定任何设计系统贡献之前： 1. **发现和模仿**：搜索现有模式。如果存在等效系统，切勿创建“一次性”组件。 2. **漂移检测**：识别硬编码值并将其“规范化”回语义标记。 3. **AI Slop Audit**：确保代币不鼓励“AI 标准”美学（例如，通用的紫色到蓝色渐变）。 4. **弹性测试**：在极端环境下验证标记（高对比度、RTL、低带宽字体）。 ** ** ## 🚀 展示，而不仅仅是讲述（实现模式） ### Tailwind 4 CSS-First 主题 `packages/design-tokens/src/base.css`: @导入“tailwindcss”； @主题{ /* 原始尺度 */ --颜色-蓝色-500：#3b82f6； /* 语义层 */ --color-brand-primary: var(--color-blue-500); --color-action-hover: 颜色混合(srgb, var(--color-brand-primary), 黑色 10%); /* 组件层 */ --按钮半径：var(--radius-lg); } ### 语义组件使用（React 19 + Radix）从“@radix-ui/react-tooltip”导入*作为工具提示；导出函数 CustomTooltip({ Children, content }: { Children: React.ReactNode, content: string }) { 返回（ <工具提示.Root> {children} <工具提示.内容 // 使用语义 Tailwind 4 类 className =“bg-brand-primary text-white p-2圆形按钮shadow-xl animate-in淡入” > {内容} ）； } ** ** ## 🛡️ 禁止列表（反模式） 1. **不要** 在组件中硬编码十六进制代码或像素值。始终使用令牌。 2. **不要**通过深度 CSS 嵌套创建“组件覆盖”。使用 CSS 变量。 3. **不要**忽略颜色标记的可访问性。检查“语义”层的对比度。 4. **不要** 在没有专用“沙箱”（故事书或内部文档）的情况下构建设计系统。 5. **不要**混合命名约定。如果您对变量使用“camelCase”，请勿对标记使用“kebab-case”。 ** ** ## 📂 渐进式披露（深入研究） * [**无可挑剔的 DNA**]()：高保真设计标准。 * **[分层代币策略]()**：基元、语义和组件。 * **[Tailwind 4 Monorepo 配置]()** ：大规模 CSS-First 主题。 * **[Headless UI 模式]()** ：使用 Radix 和 Aria-Kit。 * **[自动化令牌管道]()**：从 Figma 到使用样式字典的生产。 ** ** ## 🛠️ 专用工具和脚本 * `scripts/validate-contrast.py`：审核语义标记列表是否符合 WCAG 2.2 合规性。 * `scripts/generate-theme-json.ts`：将 CSS `@theme` 块导出为移动应用程序的 JSON 格式。 ** ** ## 🎓 学习资源 * [Tailwind CSS v4.0 Alpha 文档]() * [Radix UI 原语]() * [设计代币社区群]() ** ** _更新时间：2026 年 1 月 23 日 - 21:55_

设计系统专业版

包含技能