# 产出 · 做一个能发出去的 Artifact · Anthropic · 一份会员该用的那部分 **作者** Aklman · **章节** 07 / 12 · **首发** 2026.07 · **语言** 中文为主, 中英双语 **原文** https://library.aklman.com/books/anthropic/07-artifacts **全书 markdown** https://library.aklman.com/books/anthropic/llms.md **上一章** https://library.aklman.com/books/anthropic/06-connectors/llms.md **下一章** https://library.aklman.com/books/anthropic/08-cowork/llms.md > 本章来自 Aklman · Library, 完整免费阅读。允许 AI 摘读、引用、问答; 转载请保留作者署名与原文链接 (CC BY-NC-ND 4.0, https://library.aklman.com/license)。 --- > 有些回答你要的不是一段文字，是一个能跑、能改、能发给别人的东西。这一章你做一个小工具，迭代两轮、定一次调、发布成链接 —— 并且弄清一条计费：别人用你分享的 AI 应用，算的是他们自己的额度，不是你的。 有些回答，你想要的不是一段文字，是一个能用的东西 —— 一张能改的排期表、一个能算的小工具、一份能直接发出去的文档。前面五章都在改进「它答得对不对」，这一章改的是「它交出来的是什么形态」。 > 本章产出：**一个发布过的 Artifact** —— 有链接，别人打开就能用。验收标准：你迭代过至少两轮、给过一次明确的视觉方向、点过 Publish 拿到链接，并且能说清一件事：**如果这个东西会调用 Claude，用它的人花的是谁的额度。** ### I · 可改、可跑、可分享 Artifact 是从对话里被单独拎出来的成品，不是夹在回答里的一段代码。 当 Claude 生成一段够分量、能独立存在的内容 —— 一般超过 15 行、且你大概会想编辑、迭代或拿到对话之外去用 —— 它就单独放进一块面板。[^1]能进面板的类型不少：文档（Markdown / 纯文本）、代码、单页网页、SVG 图、流程图，乃至一个可交互的 React 小组件。[^1] 在那块面板里，你有三件在普通回答里没有的东西：**就地迭代**（「按钮大一点」「加个计时器」，改动当场生效）、**版本选择器**（改坏了能切回上一版 —— 这是敢大改的前提）、以及 Markdown 文档上的**局部改**（选中一段，用「Edit with Claude」只改那一段，不必把整篇重述一遍）。[^1] --- ### II · 动手：做一个真的小工具 别做示范用的待办清单。做一件你这个月真的需要的东西。 - **挑一件你现在用 Excel 或纸笔凑合的事**: 判断标准：它有输入、有计算或筛选、有一个别人也用得上的输出。报价试算、排班冲突检查、一个把杂乱清单排序的小页面 —— 越具体越好。抽象的「一个仪表盘」做不出来。 - **第一轮只要能跑，别管好看**: 说清输入、规则、输出三样，让它先做出一个能点的版本。跑出错别自己读报错 —— 按「Try fixing with Claude」，它会把报错带进新一轮。 - **第二轮改内容，第三轮才定调**: 顺序别反。先把逻辑改对（少了一种情况、算错了一个边界），再谈视觉 —— 反过来的话，你会为一个逻辑还错着的东西调半天配色。 - **点 Publish，把链接发给一个真人**: 这一步不能省。发布之前它只是个玩具，发布之后你会立刻收到你自己看不出来的问题（「在手机上按钮点不到」「我不知道这一格填什么」）。对话里生成的 artifact 不会自动出现在 Artifacts 区，得你打开它、点发布。 第三轮那个「定调」有个共同的坑：不给方向，它会默认做出一股「AI 味」—— Inter 字体、白底配紫渐变、几乎没动效。Anthropic 自己点了这个名。[^4]解法是别让它替你选： **提示词 · 给设计定调** ```text 风格：选一个明确方向（极简 / 杂志感 / 复古未来 …），整稿统一。 字体：用有个性的显示字体配干净的正文字体；别用 Inter、Roboto、系统字体。 配色：一个主色 + 利落的强调色；别用白底紫渐变。 背景：做出层次和氛围，别铺纯色。 先给我 3 个不同方向，我选定一个再展开。 ``` **示例** ```text 风格：复古未来，一整套精酿啤酒厂的落地页都按这个走。 字体：标题用 Space Grotesk，正文用 Source Serif；别用 Inter、Roboto、系统字体。 配色：以深琥珀色为主 + 一抹电光蓝强调；别用白底紫渐变。 背景：用细颗粒噪点和暖色渐晕做出氛围，别铺纯色。 先给我 3 个不同方向，我选定一个再展开。 ``` 最后那句「先给我 3 个方向」比前面四句加起来更管用。笼统地说「别做得太 AI」，它只会换一套同样固定的默认；让它先摆三个不同方向、你挑一个，才真的跳出默认。 --- ### III · 发布之后，谁付钱 一个能分享的 AI 应用，成本不落在你头上。 Artifact 能发布成一个链接，别人打开就能用。更关键的是计费：如果这个 Artifact 本身会调用 Claude（一个 AI 应用），官方说得很直白 —— 别人可以立刻用它，**不需要 API key，你也不承担任何成本**；用量算在**每个使用者各自的订阅额度**上，不算你的。[^2] 这条规则对「想做个小工具发给同事或读者」很关键：你不必担心别人用得多、把你账单跑爆 —— 成本天然分摊到每个用户头上。代价是对方得有自己的 Claude 账号。所以在发布前想清楚你的受众有没有账号：发给同事，多半有；发给公开读者，就得接受一部分人打不开。 --- ### IV · 换个域，做什么 #### 学习 做一个「知识点自测器」：把一章的要点做成一个能点的翻卡页面，错的自动进复习队列。做完发给同学 —— 这是这一栏最容易被真的再打开的一类。别做「学习计划表」，那种做完就没人点第二次。 #### 品牌 / 内容 做一个「标题体检器」：粘进一个标题，它按你自己的规则打分（长度、有没有具体数字、有没有品牌禁用词），并给两个改写候选。这一栏的诀窍是把规则写成你的、不是通用的 —— 通用规则的评分器网上有一百个，你那份的价值全在「品牌禁用词」那一栏。 #### 销售 / 商业 做一个「报价试算」：输入数量、折扣档、附加项，输出报价单和毛利。这一栏最容易做出真价值，也最容易出事 —— 发布前一定要拿三组你已经知道正确答案的历史数据核一遍。它算错一次报价的代价，比这一章省下的时间贵得多。 #### 管理 / 运营 做一个「值班表冲突检查」：粘进排班，它标出人手不足的时段和连续加班超标的人。这一栏的价值不在算，在把一件每周要人肉核对的事变成一次粘贴。做完发给团队，你会发现别人比你更常打开它。 --- ### V · 边界：什么时候它是花架子 要的是文字，就别让它做成 Artifact。 不是所有输出都该进面板。一段解释、一个判断、一封邮件草稿 —— 你要的是文字本身，做成可交互的东西反而多一道点击。给条线：当你会「再改一轮」或「拿去用」时，Artifact 省事；只读一遍就完的内容，它是多余的仪式感。 | 你真正要的 | 出成 | |---|---| | 读一遍就完的解释、判断、草稿 | 普通回答 | | 能打开、能发出去的成品（Excel、Word、PDF） | 文件（内置技能，第 5 章） | | 要现做现改、能分享的小东西 | Artifact | | 一整套要反复推敲的视觉、原型 | Claude Design | | 多步跑完、交一摞文件 | Cowork（第 8 章） | 表里最后两行值得各说一句。**Claude Design** 是专做视觉的一面（Anthropic Labs 出品，2026-04-17 起研究预览，对 Pro / Max / Team / Enterprise 开放，Enterprise 组织默认关闭、管理员可开）：左边对话、右边画布，做设计稿、可交互原型、slides 和一页纸，能导出成 Canva / PDF / PPTX / 独立 HTML。[^3]和 Artifact 的界很清楚 —— **要快做个能用的，留在 Artifact；要一整套拿得出手的视觉，去 Design**。但它还是研究预览，这本书不建议你现在就把工作流压在它上面。 - **它不生成照片和插画**: 钉死一个常见误解：Claude 没有那种图像生成模型。它做的「视觉」是 SVG、流程图、图表、可交互的网页组件，全用代码画出来 —— 这也正是它们能直接嵌进 Artifact 让你改的原因。要照片或插画，得另找工具。[^5] - **数学默认按 LaTeX 渲染**: 要能直接粘走的纯文本，就在提示里说「用纯文本写公式，别用 LaTeX」。[^6] - **别在没跑对之前调样式**: 这是这一章最常见的时间黑洞。逻辑没对之前的每一次配色调整，都会在下一轮重写里被冲掉。 - **发布是有代价的**: 发出去的链接会一直可用，直到你取消发布。别把含内部数字的试算器发到公开渠道 —— 逻辑可以公开，你填进去的样例数据不一定可以。 > 想要能改的成品却拿到一段文字时，直接补一句「做成一个可交互的 artifact」；它跑出错别自己读报错，按 Try fixing with Claude；改坏了别重来，用版本选择器切回上一版。 --- ### VI · 收束 · 本章验收 - 挑的是一件你这个月真要用的事，不是示范用的待办清单。 - 迭代了至少两轮，并且先改逻辑、后调样式。 - 给过一次明确的视觉方向，或让它先提 3 个方向再选。 - 点了 Publish，拿到了链接，并发给了至少一个真人。 - 说得清：如果它会调用 Claude，用它的人花的是他们自己的额度，不是你的。 - 确认链接里没有你不想公开的样例数据。 到这里你手上有一个别人能打开的东西了。下一章更进一步 —— 不是它交给你一件成品，是它替你把整件活做完。 > 要文字就别要 Artifact， > 要能改的东西才要 ## 引用与参考 01 · Claude 帮助中心 · 什么是 Artifacts 以及怎么用 —— 够分量、能独立存在的内容（一般超过 15 行、你会想编辑/迭代/复用的）单独进一块面板；支持文档（Markdown 或纯文本）、代码、单页网页、SVG、图示与流程图，以及可交互的 React 组件；用版本选择器切版；Markdown 文档可以选中一段后用「Edit with Claude」局部改。截至 2026-08。 (Claude Help · Artifacts) 02 · Claude 帮助中心 · 什么是 Artifacts —— 分享 AI 应用型 artifact 时，「别人可以立刻使用 —— 不需要 API key，你也不承担任何成本」，用量算在每个使用者各自的 Claude 订阅限额上，不算你的。要公开分享需打开 artifact 后点 Publish；对话里生成的 artifact 不会自动出现在 Artifacts 区。截至 2026-08。 (Claude Help · Publishing artifacts) 03 · Anthropic · Claude Design（Anthropic Labs）—— 2026-04-17 发布，研究预览，对 Pro / Max / Team / Enterprise 开放（Enterprise 组织默认关闭，管理员可开）；做设计稿、可交互原型、slides、一页纸与营销物料，可导出 Canva / PDF / PPTX / 独立 HTML。 (Anthropic · Claude Design) 04 · Claude · Improving frontend design through Skills —— 不给方向时模型默认一股「AI slop」（Inter 字体、白底紫渐变、少动效）；解法是给明确方向、避开通用字体与配色。 (Claude · Frontend design through Skills) 05 · Claude 帮助中心 · Claude 能不能生成图片 —— Claude 不像图像生成工具那样生成照片或插画；但它能在对话里用 HTML 与 SVG 直接做图示、图表与可交互可视化。截至 2026-08。 (Claude Help · Can Claude generate images) 06 · Claude 帮助中心 · Claude 如何处理数学公式与计算 —— 数学与公式默认按 LaTeX 渲染；要能直接粘走的纯文本，需在提示里明说。截至 2026-08。 (Claude Help · Math and LaTeX) --- *产出 · 做一个能发出去的 Artifact · Anthropic · 一份会员该用的那部分 · Aklman 著 · CC BY-NC-ND 4.0 · https://library.aklman.com/books/anthropic/07-artifacts*