web-artifact-designer

Web Artifact Designer

把一个「设计需求」变成一份可直接双击打开、自包含的 HTML / SVG 设计稿，并且让它在视觉上真正「像样」——而不是 AI 生成的千篇一律的样子。

本技能的核心不是「会写 HTML」，而是「知道什么样的设计算好、并且有可重复的流程把好设计做出来」。它面向两类产出：

1. 静态视觉稿（海报 / 信息图 / 图表 / banner / 卡片 / 封面）——默认输出为单个自包含 HTML 或 SVG 文件。
2. 交互式 Web artifact（落地页 / 单页应用原型 / 组件稿）——同样输出为自包含 HTML，必要时才上 React + Tailwind。

何时使用 / 何时不用

使用：用户要「做一个海报 / 网页 / 信息图 / 图表 / 封面 / banner / 落地页 / 卡片」，或抱怨现有前端「丑 / 太普通 / 没设计感」，或希望把一份数据 / 文案「做成好看的一页」。

不用：纯粹的 CRUD 功能实现、不关心视觉的后端逻辑、大段纯文本排版（那更适合 Markdown）、或用户明确说「先随便写个能用的就行、别管好看」。当用户只想要「能用」时，尊重这个边界，不要强上设计。

核心理念：设计，不是装饰

一句判断标准：好的设计有一个明确的「主角」和一套「刻意的决策」，而不是把一堆元素摆在居中位置、套上默认样式。 具体展开见 references/design-principles.md，这里先立三条铁律：

1. 先定概念，再写代码。动手前先在心里（或先复述给用户）确定：给谁看、传达什么、什么情绪、什么媒介尺寸。一个明确的「概念」（例如「极简的瑞士风格产品发布页」「复古报纸感的数据海报」）比任何 CSS 技巧都值钱。
2. 字体排印占了 90%。选一只有性格的标题字体 + 一只干净的正文字体，建立清晰的层级和留白，设计就已经成功了一大半。永远不要默认用浏览器默认字体或「所有文字都一样大、居中」。
3. 刻意约束。一个焦点，不是五个；一套配色系统，不是随手挑的颜色；一套间距节奏，不是 margin: 20px 满天飞。约束出风格，堆砌出噪音。

工作流

按下面五步走，不要跳过第 1 步和第 5 步。

1. 澄清 brief（必要时问 1-2 个关键问题）

先确认四件事，缺了会影响结果，宁可问一句也别瞎猜：

• 受众与用途：给谁看、发在哪里（社媒 / 打印 / 官网 / 内部演示）？
• 核心信息：这一页/这一张最想让人记住的一句话是什么？
• 尺寸与媒介：竖版还是横版、大概比例、响应式还是固定尺寸？
• 情绪与风格：正式 / 活泼 / 科技 / 复古 / 极简 / 华丽？有没有品牌色或参考图？

只在关键且无法从上下文推断时提问，一次问清，不要挤牙膏。其余用合理默认值推进，并在产出时说明你做了哪些默认假设。

2. 定概念与视觉系统（30 秒内完成，但必须做）

在写代码前，用两三句话定下：概念 + 字体 + 配色 + 布局骨架。可以参考 references/design-principles.md 里的字体搭配与配色方法论快速决策。如果用户给了品牌色或参考，优先服从；没有就用「从概念推导」的方式自己建一套，而不是套紫色渐变。

3. 构建 artifact

• 默认输出单个自包含 HTML 文件：CSS/JS 内联，图片用内联 SVG 或 CSS 绘制，字体用系统字体栈或谨慎引入的 Web 字体。构建规范见 references/self-contained-html.md。
• 用 write 工具把文件写到工作区，给一个语义化的文件名（如 product-launch-landing.html、q3-sales-infographic.html），不要叫 untitled.html 或 test.html。
• 纯矢量海报/图表也可以输出为 .svg 单文件（同样自包含）。
• 需要中文字体时注意：Web 字体体积大、加载慢；优先用系统字体栈 + 字重/字距/字号对比来做出层级，而不是堆 CDN 字体。

4. 自查（对着质量清单过一遍，改到通过为止）

写完后逐条对照「设计质量清单」审查自己的产出，发现问题就改。这一步是「精品」和「普通」的分水岭。

5. 交付与迭代

• 告诉用户文件路径，并提示可以直接双击打开；在 macOS 上可以用 open <file>.html 直接唤起浏览器。
• 主动说一句「如果风格/配色/文案想调整，告诉我具体方向」。把迭代当作设计流程的一部分，而不是一次性的「答案」。