用途：design-artifact 不是风格生成器，而是要求像能交付成品的设计师一样工作——从用户上下文出发，建立一致的视觉系统，构建完整的本地结果，并在真实渲染环境中验证。可用于落地页、交互原型、组件探索、产品模型等一次性视觉产物。
主要能力与路由：完整浏览器幻灯片演示交给 create-html-deck；持续维护的 DESIGN.md 或机器可读 token 体系交给相应 token-spec 技能；用户要求生产代码时进入真实仓库，复用其技术栈、组件、token 与约定；无需生产栈的一次性视觉研究、原型、方案板与演示则产出独立 HTML 文件。可分析指定品牌或参考的设计原则与约束，但不得克隆专有界面或视觉身份。
使用方式：先确立 brief，明确受众与主要任务、输出格式与查看环境、锁定内容与必要交互、源素材与品牌系统、保真度目标与要支撑的决策；只追问会实质改变结果的缺失信息。构建前按证据优先级读取上下文：现有产品与仓库源码、设计 token 与主题文件、截图与品牌文档、既有稿与参考产品，最后才是自创视觉语言。仓库工作需真正阅读全局样式、token、布局、路由与共享基础组件源码。随后定义小型显式系统：字体族与字阶字重、中性色与语义色、间距节奏与网格、圆角阴影、组件密度与交互规则、动效时长与 reduced-motion 行为。
形式选择：静态对比并排展示方案；交互或流程做可点击原型；产品界面实现真实布局层级；组件探索暴露有意义的变体与状态；动效研究让状态转换可观察可控制。可移植独立产物用原生 HTML/CSS/JavaScript，仅在状态或交互复杂、或目标仓库需要时使用 React，固定远程依赖版本，不为装饰新增依赖。方向开放时先给保守、强契合、发散三个实质不同的方案，变化构图、层级、密度、字体、交互或动效而非仅换色，选定后收敛为单一结果。
完整性要求：实现理解体验所需的状态（默认、焦点/悬停、加载、空态、错误与恢复、成功），保证主路径可操作，使用语义 HTML、可见焦点、至少 44px 触控目标与响应式行为，非平凡动画尊重 prefers-reduced-motion。可选的页内 Tweaks 面板只放密度、主题、字阶、布局、动效等有意义的维度。
内容与美感限制：不添加编造的指标、用户评价或产品声明，不用通用功能网格、随意数据仪表盘、无信息价值的图标或改变策略的占位区块凑内容；未完成文案标记为草稿。避免默认激进渐变、玻璃拟态、彩虹配色、超大圆角卡片、图库英雄图、装饰性图表、品牌语言外的 emoji 及无具体内容的模糊标签。
验证与交付：交付前确认文件存在于最终路径、运行可用的语法/类型/构建/静态检查、在浏览器打开并检查控制台与页面错误、演练主交互与关键状态、在目标视口与至少一个更窄视口查看截图、检查本地资源、焦点可见性、溢出、换行与响应式、验证主题与 reduced-motion 模式。构建通过不代表视觉质量合格，未实际验证不得声称已验证。交付时报告确切产物路径、内容、实际执行的检查与视口，以及遗留限制。本技能改编自 BadTechBandit 的 claude-design（MIT 许可），采用中性名称并移除托管产品相关管线。