这篇主要解决什么问题
大多数人开过一次 Artifact，看到一墙代码或一个怪怪的预览，就不回去了。“进阶”工作流是把 Artifact 当成一个迭代多天的小应用来雕琢——加状态、修边界、重构文件结构——而不是一次性输出。本文给那些用 Claude 真正做小工具、内部看板、结构化文档或重复交付物的人看。
这篇适合谁看
已经在 Claude 里产出东西、但常在对话之间丢失进度的独立开发者、PM、分析师和写作者。如果你曾把”当前代码”贴回新对话只因旧对话变乱，这篇就是你的。
什么时候适合用
预期同一个 Artifact 至少迭代 3 次、要分享、或要作为代码运行时。例子：个人财务看板、调一周的 SQL 查询、放进团队 wiki 的 Mermaid 架构图、要打磨到上线的 React 组件原型。
什么时候不建议用
一句话回答、格式无关紧要的散文、快速查询、任何需要外网访问的场景（Artifacts 在沙箱里）。长文写作请走 Claude 写作工作流。
开始前准备
- 写一段规格：输入、输出、必须行为、允许的库。固定在对话顶部，相当于系统消息。
- 列清楚沙箱真正支持的库：Tailwind CDN、Recharts、lucide-react、framer-motion、shadcn/ui 基础。其他都可能静默崩溃。
- 决定主版本放在哪——Git、Notion、本地文件。Claude 里的 Artifact 不是持久存储。
- 在纸上画一下数据形状再写 prompt。数据模糊出来的就是”凑合能用”。
具体步骤
- 类型说死：“Create an Artifact” 加具体形式——“React 单文件组件”、“Tailwind CDN 的静态 HTML”、“Mermaid 时序图”、“只用 stdlib 的 Python 脚本”。
- 交互型 Artifact，第一条 prompt 描述 state、数据形状、预期行为。例：“State：一个
{id, name, amount, category}数组。行为：点行打开编辑 modal，合计实时更新。” - 按命名部件迭代，不靠语感。好：“PricingCard 组件 CTA 按钮改 indigo-600，加 aria-label。“差：“做漂亮点。”
- 超过 200 行的 Artifact，让 Claude 在顶部维护一段 TOC 注释——小节名加大致行号，免得用手翻找。
- 它一改就重写整个文件时反推：“只输出 diff” 或 “原地修改，不要重建”。还重写就把当前文件贴回，明确写 “DO NOT MODIFY ABOVE THIS LINE EXCEPT TO FIX THE FOLLOWING”。
- 每个能跑的版本都导出到 Claude 外。Artifact 绑对话，对话丢了就没了。下载按钮没反应或下到 0 字节文件，看Claude Artifact 下载失败 / 文件为空。
第一次实操怎么跑
- 选一个聚焦的小样本——一个表单、一张图表、一个计算器，不是整个应用。
- 中途不改规格，完整跑完一遍。即便首版错也保留。
- 给输出分块打标签：“就绪”、“要人改”、“错了，重生成”。
- 第二次只改一个变量：prompt 措辞、输入数据、或库。三个绝不一起改。
完成后检查
- HTML 类的话在新 tab 里打开。预览面板外才会暴露的 bug 不少。
- 至少测三个边界：空输入、超长输入、错类型。生成代码看着好，遇到意外就崩。
- 任何数字、日期、公式都和外部源对一下。Claude 能写出视觉漂亮但偏 10% 的算式。
- React Artifact 看 dev console——静默的 prop warning 暗示真实数据下会脆。
怎么复用这套流程
- 把第一条成功的规格 prompt 存成
.md模板。变量用全大写标，下次记得换什么。 - 每种 Artifact 类型一份清单：必填规格字段、允许的库、拆分的行数阈值、谁审。
- 维护翻车清单——产出坏 Artifact 的 prompt 加表面故障。十条左右规律自然出现。
- 每隔几周用小样本重跑。沙箱支持的库和 Claude 默认值会悄悄变。
建议的操作流程
做个人财务看板 Artifact：第一条 prompt 定列（日期、类别、金额、来源）、数据形状（JSON 数组）和图表（月度堆叠柱状 + 类别饼图）。跨 5 次对话迭代体验和公式。第四版后导出 HTML 部署到 GitHub Pages，对话变成草稿区，不是规范文件。
容易踩的坑
- 没规格地说”给我做个网站”——拿到要全部重写的通用 landing page。
- 每次迭代都让 Claude 从头重写——慢、丢掉之前的修复。
- 忘了 Artifacts 是沙箱——没真实网络调用、session 外没 localStorage。
- 不测边界就相信 Artifact 里的计算。
- 用沙箱不支持的库（jQuery、axios、lodash）——Artifact 静默不渲染。
- 把 Artifact 当主版本，而不是有 Git / 文件支撑的工作副本。
进阶技巧
- React Artifact 让 Claude 只用沙箱支持的库（Tailwind、Recharts、lucide-react、shadcn）。第一条 prompt 列清楚防漂移。
- 图：Mermaid Artifact 好用，把 Mermaid 源存到 Claude 外的 Markdown 文件，要改时贴回来。
- Claude 把 Artifact 改坏了，把上一版能跑的代码贴回，要”最小化修复”，不是重写。把故障写清楚：“当前在第 47 行抛 TypeError。只修那行，其他一行不许动。”
- 多文件项目可以在同一对话里开多个 Artifact，命名一致——Claude 能跨消息引用 “DashboardPage.jsx” 和 “ChartUtils.js”。
FAQ
- Artifact 能部署吗？: 把代码导出自己部署。Artifact 沙箱不是生产托管。
- 为什么我的 Artifact 突然变样？: 多半是 Claude 重写了。下一条让它”输出 diff”，看哪里改了，需要就回滚。
- Artifact 能多大？: 实操约 500 行后迭代速度急降。再大就拆成多个 Artifact。
- 两个人能同时编辑同一个 Artifact 吗？: 不行，Artifact 绑对话。要共享编辑就导出到 Git 或 Notion code block。
- Artifact 是否单独算额度？: 用的是正常回复的 token 预算；整体重写很贵，所以优先 diff。
- 预览能跑但下载下来的文件坏了？: 一般是缺 CDN 标签或相对路径。让 Claude “做成完全独立的、所有资源走 CDN”。