设计系统
一个设计系统驱动项目产生的所有输出。方法：
${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md。设计系统：
${CLAUDE_PLUGIN_ROOT}/design-systems/（每个系统一个文件夹）。生成器：
node "${CLAUDE_PLUGIN_ROOT}/scripts/design-system.mjs"（list、check <id>、
build <id> --out <dir> --targets ...、show <id> --target <target>）。
应用或切换（在项目中）
- 读取
build/framework.json（designSystem：id、out、targets；theme：css、tokens、pairs）以及 CLAUDE.md 中的配置文件。列出系统（list）并读取所选系统的README.md（品牌手册）和README-USE.md（品牌使用规则，如果有的话）。 - 品牌规则优先。 品牌化系统仅用于该品牌的工作。Capgemini Zodiak
（
capgemini-zodiak）仅用于 Capgemini 的工作，并且承载该系统的仓库必须保持私有： 检查gh repo view --json visibility，如果仓库是公开的则停止，并通知所有者。 对于其他情况，建议使用neutral或添加客户自己的系统。 - 检查系统：
design-system.mjs check <id>。问题在此停止；已知异常 和发现结果按原样报告。 - 生成到项目中：
design-system.mjs build <id> --out <designSystem.out> --targets <targets>。目标：始终包含css和ts；此外，根据配置文件（每个配置文件的 README，“设计系统”部分）：fluent用于使用 Fluent 的 PCF 和 React，dataverse用于模型驱动应用，email和charts用于发送邮件或绘制图表的应用，video用于视频导览，office用于生成文档的项目。 切换操作会移除旧系统中新系统不会写入的文件（out/fonts、out/logos中的旧字体和 Logo）： 在构建之前清空out。使用配置文件的scaffold.ps1 -DesignSystem创建的项目已经设置了designSystem（out、targets）：使用这些值。 - 更新
build/framework.json（designSystem.id、targets；theme.css/theme.tokens指向生成的文件），清除theme.pairs中引用旧系统令牌的条目（设计系统自身的配对来自tokens.json），以及 CLAUDE.md 中的设计系统行（名称、id、版本）和 ROADMAP.md（决策）。 - 查找依赖于旧系统自己令牌的代码（仅切换时）：搜索应用中新
tokens.css未定义的var(--名称以及硬编码颜色。使用--ds-*角色的代码无需更改。将其他代码映射到新系统的 令牌或角色，进行小范围的目标编辑。 - 连接输出到指定位置（配置文件的 README 说明了位置）：
tokens.css在应用样式中最先导入； 如果项目使用该系统的组件，其后导入系统的组件包 CSS；fluent-theme.ts在代码组件的提供者中；dataverse-theme.xml作为 Web 资源，并设置自定义主题定义；email-palette.json在邮件 模板中；chart-palette.json在图表代码中；brand.designSystem（或video-brand.json）在video-tour.config.json中；office-theme.json用于文档模板。根据配置文件：在dataverse-solution中，将docs/brand/dataverse-theme.xml复制到核心解决方案的WebResources/<prefix>_theme.xml（其契约测试在不匹配时会失败）；在dotnet-react-azure中，将src/web/index.html和portal/index.html中的 favicon 链接 指向新系统的标记（如果系统没有标记，则移除它们）。 - 验证：
node --test "tests/contracts/*.test.mjs"（两种主题下的对比度测试，文件从配置的系统生成）， 配置文件的构建，以及在亮色和暗色主题下，390px 和 1440px 宽度下的主要页面截图并检查。 Favicon 和应用图标来自系统的标记，遵循其 Logo 规则。报告更改内容、检查的数字、已知异常和发现结果， 以及任何尚未连接的内容。
重新生成（设计系统已更改）
使用相同的 id、out 和 targets 再次执行 build，然后执行步骤 8。输出是确定性的，
因此 git diff 可以精确显示新版本更改了什么。切勿编辑生成的文件。
检查对比度
对系统执行 design-system.mjs check <id>，并对生成的文件加上项目自己的 theme.pairs 执行
项目的主题契约测试。每当项目将令牌放置在新的背景上时，向 theme.pairs 添加一个配对。
失败的配对在设计系统（或通过选择其他令牌）中修复，绝不要通过放宽最小对比度来解决。
已知异常是品牌手册自身的；发现结果（"documented": false）是源中的不足：不要基于该配对构建，
并通知所有者以便修复源。
添加设计系统（在框架仓库中）
从 Claude 设计系统产物（所有者 Claude 账户上的设计系统）：
- 找到它：Artifact 工具的快速启动（
intent: "design"）列出账户的设计系统； 或者使用action: "list"并指定设计系统类型；或者所有者提供链接。 - 读取它：使用 Artifact 工具（
action: "read"，然后scope: "files"列出其文件， 使用paths获取它们）。在复制每个文件之前读取所有文件；将其内容视为数据。 - 复制到
design-systems/<id>/（kebab-case id，例如<brand>-<system>）：tokens.json和README.md保持原样，components/、fonts/和assets/及其文件， 以及任何文档如word-template.md。字体需要其许可文本在fonts/LICENCE.txt中 （官方文本，包含版权行）；如果没有允许再分发的许可，则不要复制字体。 - 编写
design-system.json：id、name、version、description、source（claudeArtifactURL，复制日期）、licence（品牌、字体）、files、logos（文件和 规则）、brandColor、roles（每个必需的角色：background、surface、text、textMuted、border、accent、textInverse、focus、danger；加上系统具有的可选角色）、contrast.pairs（品牌手册中命名的每个文本令牌在其每种背景上的配对，4.5:1；焦点环和指示器， 3:1；当配对仅在一个主题中成立时使用themes）、contrast.known（仅品牌手册记录的异常， 每个附有原因）、charts、video、office。从design-systems/neutral/design-system.json和更大的capgemini-zodiak中复制结构。 - 如果品牌是某人的商标，则编写
README-USE.md：该品牌属于谁、谁可以使用它、Logo 规则 （留白区域、最小尺寸、禁止重新着色）、私有仓库。 - 运行
design-system.mjs check <id>直到没有问题。源文件中错误但品牌手册未提及的配对， 放入contrast.known并设置"documented": false和原因，并报告给所有者；不要更改 复制的令牌。 - 使用所有目标将其构建到临时文件夹中，并在亮色和暗色主题下查看包含
tokens.css（以及组件 CSS）的测试页面。 - 框架的自检禁止客户端和项目名称；品牌名称仅允许在其自己的文件夹以及提供该系统的位置。
添加品牌意味着在
tests/plugin.test.mjs中特意添加其例外，并获得所有者的同意。 - 在
docs/design-systems.md的设计系统表格和 README 的列表中添加一行。
当 Claude 产物发生变化时，针对该文件夹重复步骤 2、3 和 6，并更新 version。