Design Artifact

把设计 Brief 变成能打开、能操作、能验证的高保真 HTML 作品

不是风格提示词，也不止是一张截图，而是一套从上下文到完整交付的设计执行流程

它解决什么问题

很多设计类提示词只会生成一张“看起来不错”的页面：内容是编的、按钮不能用、状态不完整，换个尺寸就溢出

design-artifact 要求 Agent 先读现有产品和材料，再建立视觉系统、实现关键交互，并在真实浏览器里验证结果：

flowchart LR
    brief["Brief 与现有上下文"] --> contract["Artifact Contract"]
    contract --> system["视觉与交互系统"]
    system --> states["主路径与关键状态"]
    states --> check["结构与浏览器验证"]
    check --> deliver["可操作的成品"]

适合什么场景

• Landing page 和单页产品介绍
• 可点击的交互原型与产品 Mockup
• Dashboard、Onboarding Flow 和组件探索
• 多方案并排比较和设计决策板
• 动效研究、状态转换和响应式页面
• 在真实代码仓库中完成设计驱动的前端实现

如果主要产物需要逐页播放、演讲和投屏，请使用 awesome-skills/create-html-deck

安装

npx skills@latest add awesome-skills/design-artifact -g -y

然后直接给出 Brief 或现有代码：

Use $design-artifact to turn this brief into a responsive interactive prototype

Skill 会优先读取仓库源码、设计 Token、组件、截图、文案和 handoff；只有缺失信息会实质改变范围或设计方向时才会追问

交付契约

默认会完成：

• 明确一个主要用户、主要任务、目标环境和非目标
• 建立受约束的字体、颜色、间距、边框、层级与动效系统
• 实现真正影响体验的默认、加载、空、错误和完成状态
• 让主路径可操作，而不是留下失效按钮和装饰性交互
• 使用语义 HTML、可见焦点、44px 点击区域和响应式布局
• 尊重 prefers-reduced-motion
• 保持内容诚实，不虚构指标、证言和产品能力
• 在目标视口和至少一个窄屏视口检查实际渲染

实现按五个阶段推进：Structure → System → States → Polish → Cleanup。层级有问题时先修结构，不用装饰掩盖

质量门

独立 HTML Artifact 先运行：

python3 skills/design-artifact/scripts/check_artifact.py /absolute/path/to/artifact.html

检查器会发现：

• 缺失的 doctype、语言、viewport、title 和 main
• 重复 ID 与缺失的本地图片资源
• 没有 alt 的图片
• 没有可访问名称的按钮
• 需要额外确认的远程脚本和样式依赖

之后还要在真实浏览器中操作主路径，检查控制台、焦点、溢出、换行、响应式状态和截图构图。构建通过不等于视觉完成

仓库结构

.
├── README.md
├── LICENSE
├── assets/design-artifact-hero.png
└── skills/design-artifact/
    ├── SKILL.md
    ├── agents/openai.yaml
    └── scripts/check_artifact.py

Attribution

改编自 BadTechBandit 的 claude-design，保留其 MIT License · 收录于 Awesome Skills