用途：artifact-design 用于生成“活的”设计系统页面或组件变体表，把设计基础组件实时渲染、列出变体、展示源码，并说明各变体的适用场景，全部放在一个自包含的 .html 文件中。文件名通常为 design-system.html 或 <component>-variants.html。
主要能力：提供两种模板——templates/design-system.html 用于完整设计系统（调色板、字体阶梯、间距、全部基础组件）；templates/component-variants.html 用于单个组件的全部变体。设计系统页面按八段组织：页头、调色板、字体阶梯、间距尺度、圆角、基础组件、模式组合、语气与密度规则。组件变体表分五块：页头、默认变体、变体网格、结构图、何时使用/何时不用。
使用方式：采用渲染紧邻源码模式，每个基础组件条目含渲染区、代码块与一句何时使用说明；渲染是事实来源，代码须与实时渲染逐字节一致。使用前需先阅读 artifact-css/SKILL.md 了解输出契约、设计令牌与类词汇表。该技能不使用 jQuery，页面为静态。
适用场景：用户要求查看全部按钮、卡片所有状态、完整调色板或设计系统快照；需要一份可交付给承包商的单文件品牌套件。
限制：不适用于架构大图（用 artifact-diagram）或设计方案幻灯片（用 artifact-deck）。要求展示每个变体、使用真实示例与语义化命名，源码必须与渲染一致；页面无需 JS。资料未提供具体收费、价格或平台信息。