atomic-design-quarks（原子设计：夸克）Skill 是什么？能解决什么问题？

原子设计：夸克 Skill：把设计令牌变成可被 AI 维护的“亚原子”构建块

• 它是什么：原子设计：夸克（atomic-design-quarks）专注原子设计方法论中“原子以下”的层级——颜色、间距、字号、圆角、阴影、动效、断点、层级等纯设计值（设计令牌）。
• 核心能力：不只是“列一堆变量”，而是帮你把令牌组织成有语义、有尺度、类型安全、可生成 CSS 自定义属性、可支持亮/暗主题与多品牌的结构化体系。
• 和普通工具的区别：它内置了最佳实践与反模式清单（语义命名、一致尺度、单一来源、避免令牌爆炸），相当于把设计系统规范“写进”生成过程。
• 适合谁用：正在搭建或重构设计系统的前端工程师、设计系统维护者、多品牌/白标产品的团队，以及想把硬编码颜色和间距迁移成设计令牌的团队。
• 注意：技能详情标注「用户可调用：false」，说明它通常不是直接对话调用的技能，而更可能是被其他技能或设计系统流程调用的基础能力，具体调用方式以官方说明为准。

1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？

基本信息

项目	内容
技能中文名	原子设计：夸克
技能英文名	atomic-design-quarks
技能ID	14094
技能定位	设计与设计令牌、CSS 自定义属性以及构成原子基础以下的原始值
允许工具	Bash、读取、写入、编辑、Glob、Grep
用户可调用	否（以官方说明为准）

它解决什么问题？

在真实项目中，设计系统最容易“烂尾”的地方往往不是组件写不出来，而是组件背后的值没有统一来源：

• 按钮里写 #2196f3，卡片里写 #2196F3，弹窗里又写 rgb(33,150,243)，换品牌色时要全局搜索替换；
• 间距同时存在 8px、0.5rem、10px 三种写法，页面越写越“花”；
• 暗色模式靠组件里 if (isDark) 判断，逻辑散落各处；
• 想做 Tailwind 主题、想导出 CSS 变量、想接 Figma 令牌，每次都要重新对齐一遍。

夸克（Quark）就是这些问题的源头解法：把最小设计值收敛为唯一来源，让原子组件只能“消费”而不能“自造”。

一键安装的思路与步骤

「技能详情内容」中并未提供具体的安装命令、仓库地址或市场入口，因此以下为通用流程，具体命令与入口请以官方说明为准：

1. 确认前提：你使用的 AI 技能平台支持按技能名或技能ID安装技能；本地需具备读写项目文件的能力（本技能允许 读取/写入/编辑/Glob/Grep/Bash，正是为扫描与生成文件准备的）。
2. 找到入口：在技能市场/技能库中搜索英文名 atomic-design-quarks 或中文名「原子设计：夸克」，也可用技能ID 14094 精确检索（以官方说明为准）。
3. 执行安装：通过平台提供的一键安装按钮或安装命令完成添加，安装后确认技能出现在已启用列表中。
4. 验证是否生效：在对话中提出一个明确与夸克相关的请求，例如“帮我把项目里的硬编码颜色整理成夸克颜色的设计令牌”，若技能能按颜色/间距/排版等类别给出结构化令牌建议并说明文件放置位置，即视为生效。
5. 补充上下文：首次使用建议同时提供项目技术栈（React/Vue/原生 CSS）、是否使用 Tailwind、是否需要暗色主题，技能会据此给出更贴合的目录结构与导出方式。

提醒：由于该技能标注为「用户可调用：false」，若在对话中无法直接唤起，通常意味着它由设计系统相关技能或上层流程间接调用，属于“底层能力型”技能，具体启用方式以官方说明为准。

2. 该技能的主要功能和特点

• 完整的令牌族谱：覆盖颜色（品牌色、语义色、中性色的 50–900 色阶）、间距（px/rem 双标注的 0–24 尺度 + 语义别名 xs/sm/md/lg/xl）、排版（字体族、字号、字重、行高、字距）、边框（圆角、边框宽度）、阴影（含焦点环）、动效（时长、缓动曲线、过渡组合）、断点（含媒体查询助手）、z-index（下拉、吸顶、弹层、模态、提示等层级语义）。
• 语义化优先的命名主张：明确建议用 primary / success / warning / danger / neutral 而非 blue / red / green，让令牌描述“用途”而不是“长相”，换肤时不用改名。
• CSS 自定义属性自动生成：可输出 :root { --color-primary-500: ... } 形式的变量表，同时处理了键名中的小数点（如间距 0.5 转换为合法变量名），支撑运行时主题化。
• 亮/暗主题双形态：既提供 TypeScript 主题对象（lightTheme / darkTheme），也提供 [data-theme="dark"] 的 CSS 变量方案，两条路线都能走通。
• 与主流样式方案打通：给出 CSS-in-JS（styled-components / emotion）、CSS Modules + 变量、Tailwind CSS 配置三种消费范例，原子组件统一从 @/夸克 导入。
• 推荐目录结构：以 src/夸克/ 存放全部令牌文件并提供 index.ts 桶导出，与 组件/原子、分子、有机体、模板、页面 形成清晰的层级隔离。
• 类型安全：所有令牌以 as const 导出，并配套 keyof typeof 派生类型，写错键名在编译期就会报错。
• 内置最佳实践与反模式：明确反对“夸克带逻辑”“组件专属令牌”“令牌过多”等做法，把设计系统的治理规则前置到生成阶段。
• 文件级落地能力：借助 读取/写入/编辑/Glob/Grep，可在现有代码库中定位硬编码值（如散落的十六进制颜色）并批量替换为令牌引用。

与普通工具相比强在哪？ 普通工具通常只解决“导出变量”这一步；夸克技能同时解决层级定义（夸克 vs 原子）、命名规范、尺度一致性、主题化路径、消费方式与反模式审查，更接近一位“设计系统架构顾问”，而不是一个格式转换器。

3. 如何使用该技能？

步骤一：确定令牌清单与命名口径

先与团队对齐需要哪些令牌族，以及用语义名还是原始色名。推荐直接沿用技能的语义分类：

colors: primary / success / warning / danger / neutral
spacing: 数值尺度 + xs/sm/md/lg/xl 语义别名
typography: fontFamily / fontSize / fontWeight / lineHeight / letterSpacing

步骤二：生成夸克文件并建立桶导出

请技能按推荐结构创建 src/夸克/ 目录，分别落地 colors.ts、spacing.ts、typography.ts、borders.ts、shadows.ts、animations.ts、breakpoints.ts、z-index.ts，并生成统一出口 index.ts：

// 夸克/index.ts
export * from './colors';
export * from './spacing';
export * from './typography';
export * from './borders';
export * from './shadows';
export * from './animations';
export * from './breakpoints';
export * from './z-index';

输入示例：“我们的品牌主色是蓝色系，需要 50 到 900 的色阶，另外要有 success / warning / danger 语义色，用 as const 导出并给出类型。”

输出说明：技能会给出一份带注释的色阶对象（例如 primary.500 作为默认主色、600+ 用于悬停/激活、100–400 用于背景与强调），并附带 ColorScale、PrimaryShade 之类的派生类型，方便组件侧做类型约束。

步骤三：生成 CSS 自定义属性并接入全局样式

请技能基于令牌生成 variables.css，在应用入口引入。键名中的点会被替换为下划线，避免出现非法变量名：

:root {
  --color-primary-500: #2196f3;
  --spacing-2: 0.5rem;
  --font-size-base: 1rem;
  --border-radius-md: 0.375rem;
}

步骤四：让原子组件“只消费、不自造”

在按钮、输入框等原子组件中引用夸克，而不是写死数值：

import styled from 'styled-components';
import { colors, spacing, fontSize, borderRadius, transitions } from '@/夸克';

export const Button = styled.button`
  padding: ${spacing[2]} ${spacing[4]};
  font-size: ${fontSize.base};
  border-radius: ${borderRadius.md};
  transition: ${transitions.colors};
  background-color: ${colors.primary[500]};
  color: ${colors.neutral[0]};
`;

步骤五：按需接入 Tailwind 或主题切换

如果团队使用 Tailwind，可把夸克直接注入 theme 配置，让工具类与令牌同源；如果需要暗色模式，使用 [data-theme="dark"] 覆盖语义变量（--background、--foreground、--primary 等），组件代码零改动。

步骤六：巡检与治理

请技能用 Grep/Glob 扫描 # 开头的十六进制颜色、px 硬编码间距等可疑值，输出“待迁移清单”，再逐项替换为令牌引用。这一步是长期保持设计系统不腐化的关键。

4. 同类型竞品对比分析

方案名称	定位	核心功能	安装/使用门槛	适用场景	优势与不足
原子设计：夸克（本技能）	AI 技能形态的设计令牌架构助手	令牌族定义、语义命名规范、CSS 变量生成、亮暗主题、Tailwind/CSS-in-JS/CSS Modules 消费范例、反模式审查	需在支持技能的 AI 平台启用；详情标注用户可调用为否，具体入口以官方说明为准	从零搭建设计系统、重构硬编码样式、多品牌主题化	优势：方法论与落地代码一体化，还带治理规则；不足：偏“架构与规范”层，实际产物需团队在项目中落地验证
Style Dictionary	令牌编译工具链	把一份令牌源编译成多平台产物（CSS、iOS、Android、JS 等）	需 Node 环境与配置文件，学习成本中等	多端（Web + 原生）统一令牌分发	优势：多平台输出成熟、生态大；不足：需要自己设计令牌结构与命名规范，不提供方法论指导
Tokens Studio（Figma Tokens）	设计侧令牌管理与同步	在 Figma 中定义令牌、主题与变体，并同步到代码仓库	需安装 Figma 插件、配置同步仓库	设计与开发协同定义令牌	优势：设计源头即令牌，协作体验好；不足：代码侧的消费方式与治理规范仍需另行约定
Tailwind CSS 主题配置	原子化 CSS 框架的内置主题	通过 theme 扩展颜色、间距、字号等，直接产出工具类	需引入框架并按其约定组织配置	快速交付、工具类驱动的项目	优势：上手快、产出即用；不足：令牌语义化与跨端复用能力有限，缺少“夸克/原子”分层约束

选型建议：如果目标是“先把设计语言定义清楚、再让组件有章可循”，优先考虑夸克这类架构型技能；如果已有 Figma 令牌源且要多端分发，可把本技能产出的结构思路与 Style Dictionary、Tokens Studio 组合使用。

5. 该技能的典型应用场景与实际体验情况

场景一：从零搭建组件库的前端工程师

• 痛点：拿到设计稿后凭感觉写颜色和间距，组件写到第十个时风格已经开始漂移。
• 使用方式：先让技能生成颜色、间距、排版、圆角、阴影五套基础令牌与 index.ts，再写按钮、输入框等原子组件，强制从 @/夸克 导入。
• 实际体验：上手难度低，令牌文件本身结构清晰、注释到位，基本可以“生成即用”；需要注意的是，色阶与间距尺度要结合品牌实际微调，不要照搬默认值。

场景二：维护多品牌/白标产品的团队

• 痛点：同一套组件要在多个品牌色下复用，硬编码导致每次上新品牌都要改组件。
• 使用方式：把颜色收敛为语义令牌（primary / danger 等），品牌差异通过主题层覆盖，组件代码保持不变。
• 实际体验：效果显著，组件与品牌解耦；注意技能明确反对“夸克带逻辑”，主题判断应放在主题层或组件层，而不是塞进令牌里。

场景三：老项目样式治理

• 痛点：代码库里散落着几十种蓝色和十几种间距写法，没人敢动。
• 使用方式：利用技能的 Glob/Grep 能力扫描硬编码值，产出待迁移清单，按“颜色 → 间距 → 字号 → 阴影”的优先级分批替换。
• 实际体验：清单式迁移比人工搜索快很多；注意要分批提交并回归视觉，避免一次性大改引发样式事故。

场景四：设计系统与 Tailwind 双轨并行

• 痛点：团队既想用工具类提效，又不想丢掉设计令牌的语义与一致性。
• 使用方式：把夸克作为唯一来源注入 Tailwind theme，工具类与组件共享同一套值。
• 实际体验：融合顺畅，require('./src/夸克') 直接复用即可；注意 Tailwind 对键名格式有要求，生成后需快速检查一遍配置是否可正常构建。

6. 该技能能为用户带来的价值

• 效率提升：把“定义令牌 + 生成变量 + 写主题 + 接框架”这套原本需要半天到数天的准备工作压缩到一次对话内完成，且产物结构统一、可直接进仓库。
• 门槛降低：不熟悉原子设计方法论的团队，也能通过内置的层级说明（夸克 vs 原子对照表）和最佳实践快速建立正确认知，避免“一上来就做组件、令牌全靠补”。
• 一致性收益：单一来源 + 类型安全 + 语义命名，让“换品牌色改一处”“暗色模式零改组件”成为可实现的工程目标，长期显著降低样式返工与视觉走查成本。
• 可治理性：反模式清单（禁止令牌带逻辑、禁止组件专属令牌、禁止令牌爆炸）把设计系统的“防腐”规则前置，减少系统随着迭代逐渐失控的概率。
• 长期价值：夸克层稳定后，原子、分子、有机体的迭代互不干扰，团队可以按层级并行开发，也让设计系统真正具备跨项目复用的能力。

7. 常见问题 FAQ

Q1：这个技能怎么安装？安装后为什么在对话里叫不出来？ A：安装入口与命令以官方说明为准，一般可在技能库按英文名 atomic-design-quarks、中文名「原子设计：夸克」或技能ID 14094 检索。技能详情明确标注「用户可调用：false」，说明它更可能是被设计系统相关技能或上层流程调用的基础能力，而不是直接对话唤起的技能；若无法唤起，建议检查平台的技能启用与调用权限设置。

Q2：它是收费的吗？ A：技能详情中未包含任何价格信息。是否收费取决于所在 AI 技能平台的计费策略，请以官方说明为准。

Q3：它和 Style Dictionary、Tokens Studio 是替代关系吗？ A：更偏互补。本技能强在“方法论 + 结构设计 + 治理规则”，帮你决定令牌怎么分层、怎么命名、怎么被组件消费；Style Dictionary 强在多平台编译分发，Tokens Studio 强在设计侧定义与同步。常见组合是用本技能确定结构，再用工具完成多端输出。

Q4：适合谁用？纯后端或不做设计系统的同学有必要吗？ A：核心受众是前端工程师、设计系统维护者、设计与开发协同的团队，以及需要多品牌主题化的产品。如果项目只有几个页面、样式需求极其简单，收益有限；但只要出现“颜色/间距写法不统一”“要上暗色模式”“要接第二个品牌”这类信号，它就值得引入。

Q5：生成的令牌可以直接上线吗？有什么注意事项？ A：可以作为高质量起点，但建议做三件事：一是按品牌实际调整色阶与间距尺度；二是确认命名符合团队语义习惯（避免 blue 之类的原始色名）；三是接入后跑一遍构建与视觉回归，尤其是 Tailwind 配置和 CSS 变量键名的兼容性。另外要守住技能强调的底线——令牌只放纯值，不放逻辑，不建组件专属令牌，也不要无限扩张尺度。