用途
css-design-system 用于仅通过 CSS 文件创建或更新 CSS 设计系统基础。它不添加 Tailwind、Sass、组件库、CDN、构建步骤或生成的 JavaScript，适合希望以纯 CSS 方式建立可维护设计系统的项目。
主要能力
- 生成原始令牌（primitive tokens）：原始颜色（黑、白、灰阶、强调色、危险、成功、警告）、尺寸与动效（间距、控件高度、圆角、过渡时长与缓动）、排版（无衬线与等宽字体族、小号字号阶梯），以及按需的阴影、焦点环等效果。
- 生成语义主题令牌（semantic theme tokens）：将原始值映射为应用 CSS 使用的语义令牌，如 --bg、--fg、--border、--accent、--danger、--success、--warning 等。
- 支持主题：默认主题设置包含 light、dark、system。使用 :root 表示浅色主题，[data-theme='dark'] 表示深色主题，[data-theme='system'] 表示跟随系统主题（通过 prefers-color-scheme 实现，除非项目已有其他约定）。
- 生成基础样式：box-sizing、链接/按钮/表单/列表/图片/SVG/表格的基础重置，html 与 body 默认值，标题、代码、pre、::selection、滚动条、:focus-visible 等。
- 生成可复用组件类：如按钮（.btn 及 .primary、.secondary、.ghost、.danger、.sm、.lg、禁用状态）、表单（.field、.label、.input、.textarea、.select、.help、.choice、.switch）、通用 UI（.badge、.avatar、.card、.alert、.progress、.tabs、.table、.link）。组件保持最小化，仅生成项目需要或已使用的组件。
- 可选预览生成：仅在用户显式调用预览命令时生成 preview.html，正常生成时不创建预览文件。
使用方式
该技能通过命令与设置块工作。设置位于正文顶部，包含 design_system 与 theme 两项。
- 设计系统选择：默认使用 design_system 设置。当用户明确指定设计系统时，先更新设置再生成文件。示例命令：css-design-system design-system material-ui、css-design-system design-system carbon、change css-design-system to Fluent、use Material UI design system for this app。设计系统键使用小写 kebab-case，如 simple、material-ui、carbon、fluent、custom。若请求的是外部系统，先检查代码库，再查阅官方或一手文档，然后选择令牌名称、令牌值与主题默认值。
- 主题选择：默认使用 theme 设置。当用户明确指定主题时，先更新设置再生成文件。示例命令：css-design-system themes light dark system、css-design-system themes dark、generate this design system with light, dark, and high-contrast themes。主题名称以 YAML 列表存储。主题选择顺序为：遵循现有代码库主题约定；否则使用 theme 设置；对于具名外部设计系统，优先考虑该系统文档化的默认主题模型。
- 预览命令：仅在用户显式调用时生成 preview.html，例如 css-design-system preview、css-design-system preview.html、generate preview.html with css-design-system。
文件结构方面，技能遵循可移植结构：一个清晰的 CSS 入口文件加载原始令牌、语义主题令牌、基础样式和组件类（当项目使用该拆分时）。根目录与文件拆分必须遵循目标项目已有的样式位置；若不存在约定，则在项目根目录创建 styles/。示例结构为 styles/ 下包含 index.css、base.css、theme.css、primitives/（index.css、palette.css、size.css、typography.css）与 components/（index.css、button.css、form.css、badge.css、avatar.css、card.css、alert.css、progress.css、tabs.css、table.css、link.css）。使用示例拆分时，index.css 按 primitives/index.css、theme.css、base.css、components/index.css 的顺序导入。
CSS 层方面，使用 CSS 导入与类。CSS @layer 是可选的，仅在目标项目已使用层或用户要求时使用。
工作流程：先检查现有样式文件；应用命令规则（命名设计系统或主题时更新设置，保持预览为可选）；使用 design_system，首次使用时若现有代码库明显匹配其他设计系统，先询问是否更新；根据项目约定选择 CSS 根目录与文件拆分；按依赖顺序生成：原始令牌、语义主题、基础/全局样式、组件 CSS；最后报告写入的文件、所选设计系统、所选主题以及预览是跳过还是生成。
适用场景
适用于需要以纯 CSS 建立或更新设计系统基础的项目，尤其是希望避免引入额外框架、构建步骤或组件库的场景。可用于创建新的设计系统、切换或迁移到指定设计系统、调整主题配置，以及在项目已有样式约定下补充令牌与组件类。
限制
- 仅使用 CSS 文件，不添加 Tailwind、Sass、组件库、CDN、构建步骤或生成的 JavaScript。
- 正常生成时不创建 preview.html，仅显式调用预览命令时才生成。
- 不假设参考项目中的固定路径，必须遵循目标项目实际导入与目录约定。
- 令牌数量以项目 CSS 可用为准，不创建详尽的设计令牌百科。
- 组件保持最小化，仅生成项目需要或已使用的组件。
- 关于具体收费、价格、平台支持范围等信息，资料中暂未提供。