产出 · Artifacts 与 Claude DesignMake a Thing · Artifacts and Claude Design.
有些回答你想要的不是一段文字，是一个能跑、能改、能分享的东西 —— 一页小工具、一份文档、一张图、一套设计稿。Artifacts 在对话里现做现改，Claude Design 专做视觉与原型。这章讲什么时候它们真省事，以及怎么让它别做出一股 AI 味。Sometimes you don't want a paragraph — you want something runnable, editable, shareable: a little tool, a document, a chart, a set of design mockups. Artifacts make and revise it live in the chat; Claude Design is built for visuals and prototypes. This chapter covers when they genuinely save you work — and how to keep them from looking like generic AI.
有些回答，你想要的不是一段文字，是一个能用的东西 —— 一张能改的排期表、一个能算的小工具、一份能直接发出去的文档。Artifacts 就是 Claude 在「聊天回答」之外的另一种输出形态。For some answers, you don't want a paragraph — you want something usable: a schedule you can edit, a little tool that computes, a document you can send as-is. Artifacts are Claude's output mode beyond a plain reply.
— I
可改、可跑、可分享Editable, Runnable, Shareable.
Artifact 是从对话里被单独拎出来的成品，不是夹在回答里的一段代码。An artifact is a deliverable lifted out of the chat, not a code block buried in a reply.当 Claude 生成一段够分量、能独立存在的内容 —— 一般超过 15 行、且你大概会想编辑、迭代或拿到对话之外去用 —— 它就单独放进一块面板。1注 1Note 1Claude 帮助中心 · 什么是 Artifacts 以及怎么用 —— 够分量、能独立存在的内容（一般超过 15 行、你会想编辑/迭代/复用的）单独进一块面板；支持文档、代码、单页网页、SVG、流程图、可交互 React 组件；用版本选择器切版，出错时按「Try fixing with Claude」。Claude Help Center · What are artifacts and how do I use them — substantial, standalone content (typically over 15 lines, things you'll edit/iterate/reuse) lands in a separate panel; supports documents, code, single-page sites, SVG, flowcharts, and interactive React components; switch versions with the version selector, and hit 'Try fixing with Claude' on errors.能进面板的类型不少：文档（Markdown / 纯文本）、代码、单页网页、SVG 图、流程图，乃至一个可交互的 React 小组件。When Claude produces something substantial and self-contained — typically over 15 lines, and likely something you'll edit, iterate on, or use outside the chat — it lands in a separate panel.1注 1Note 1Claude 帮助中心 · 什么是 Artifacts 以及怎么用 —— 够分量、能独立存在的内容（一般超过 15 行、你会想编辑/迭代/复用的）单独进一块面板；支持文档、代码、单页网页、SVG、流程图、可交互 React 组件；用版本选择器切版，出错时按「Try fixing with Claude」。Claude Help Center · What are artifacts and how do I use them — substantial, standalone content (typically over 15 lines, things you'll edit/iterate/reuse) lands in a separate panel; supports documents, code, single-page sites, SVG, flowcharts, and interactive React components; switch versions with the version selector, and hit 'Try fixing with Claude' on errors. Plenty of types qualify: documents (Markdown / plain text), code, single-page sites, SVG images, flowcharts, even an interactive React component.在那块面板里你能直接要它改（「按钮大一点」「加个计时器」），改动当场生效；跑出错时按「Try fixing with Claude」，它把报错带进新一轮；还能用版本选择器在几版之间切回去。每一轮都在上一版上接着改。In that panel you ask it to change things ('bigger button,' 'add a timer') and the edits land in place; when it errors, hit 'Try fixing with Claude' and it carries the error into a new turn; and a version selector lets you switch back between versions. Each round builds on the last.
— II
分享时谁付钱Who Pays When You Share.
一个能分享的 AI 应用，成本不落在你头上。A shareable AI-powered app doesn't put the cost on you.Artifact 能发布成一个链接，别人打开就能用，直到你取消发布。3注 3Note 3Claude 帮助中心 · 发布与分享 Artifacts —— 点 Publish 生成链接，他人可访问直到你取消发布。Claude Help Center · Publishing and sharing artifacts — click Publish to generate a link others can use until you un-publish.更关键的是计费：如果这个 Artifact 本身会调用 Claude（一个 AI 应用），它的用量算在每个使用者各自的订阅上，你一分不付，对方也不用填 API key —— 他们用自己的 Claude 账号登录就行。2注 2Note 2Claude · Build and share AI-powered apps with Claude —— 分享的 AI 应用，用量算在每个使用者各自的订阅上，分享方一分不付；使用者用自己的 Claude 账号登录，无需 API key。Claude · Build and share AI-powered apps with Claude — a shared AI-powered app bills against each user's own subscription, the sharer pays nothing; users sign in with their own Claude account, no API key needed.An artifact can publish to a link anyone can open and use, until you un-publish.3注 3Note 3Claude 帮助中心 · 发布与分享 Artifacts —— 点 Publish 生成链接，他人可访问直到你取消发布。Claude Help Center · Publishing and sharing artifacts — click Publish to generate a link others can use until you un-publish. What matters more is billing: if the artifact itself calls Claude (an AI-powered app), its usage counts against each user's own subscription — you pay nothing, and they need no API key, just their own Claude account to sign in.2注 2Note 2Claude · Build and share AI-powered apps with Claude —— 分享的 AI 应用，用量算在每个使用者各自的订阅上，分享方一分不付；使用者用自己的 Claude 账号登录，无需 API key。Claude · Build and share AI-powered apps with Claude — a shared AI-powered app bills against each user's own subscription, the sharer pays nothing; users sign in with their own Claude account, no API key needed.这条规则对「想做个小工具发给同事或读者」很关键：你不必担心别人用得多、把你账单跑爆 —— 成本天然分摊到每个用户头上。代价是对方得有自己的 Claude 账号。That rule matters if you want to build a little tool and send it to colleagues or readers: you needn't fear someone's heavy use blowing up your bill — cost falls naturally on each user. The trade-off is that they need their own Claude account.
— III
要设计稿，去 Claude DesignFor Design Work, Go to Claude Design.
要一套像样的视觉，Artifact 只是起点，Claude Design 才是那一面。For a real set of visuals, an artifact is just the start — Claude Design is the surface.Claude Design 是专做视觉的一面（claude.ai/design，截至 2026-07 还是研究预览，对 Pro / Max / Team / Enterprise 开放）：左边对话、右边画布，做设计稿、可交互原型、slides、一页纸。它能读你的代码库和设计文件、攒出一套设计系统，让品牌色和字体在每个稿子里保持一致；做完能导出成 zip / PDF / PPTX / Canva，或直接交接给 Claude Code 去落地。4注 4Note 4Anthropic · Claude Design（Anthropic Labs）—— claude.ai/design，对话加画布做设计稿、可交互原型、slides；自动攒设计系统，导出 zip / PDF / PPTX / Canva，或交接 Claude Code。研究预览，对 Pro / Max / Team / Enterprise 开放。截至 2026-07。Anthropic · Claude Design (Anthropic Labs) — claude.ai/design, chat plus a canvas for mockups, interactive prototypes, and slides; auto-builds a design system, exports to zip / PDF / PPTX / Canva, or hands off to Claude Code. Research preview on Pro / Max / Team / Enterprise. As of 2026-07.Claude Design is the surface built for visuals (claude.ai/design, a research preview as of 2026-07, on Pro / Max / Team / Enterprise): chat on the left, a canvas on the right, producing mockups, interactive prototypes, slides, and one-pagers. It can read your codebase and design files to build a design system that keeps brand colors and fonts consistent across every piece; export to zip / PDF / PPTX / Canva, or hand off to Claude Code to ship it.4注 4Note 4Anthropic · Claude Design（Anthropic Labs）—— claude.ai/design，对话加画布做设计稿、可交互原型、slides；自动攒设计系统，导出 zip / PDF / PPTX / Canva，或交接 Claude Code。研究预览，对 Pro / Max / Team / Enterprise 开放。截至 2026-07。Anthropic · Claude Design (Anthropic Labs) — claude.ai/design, chat plus a canvas for mockups, interactive prototypes, and slides; auto-builds a design system, exports to zip / PDF / PPTX / Canva, or hands off to Claude Code. Research preview on Pro / Max / Team / Enterprise. As of 2026-07.和 Artifact 的界：Artifact 适合一件现做现改的小东西，Design 适合一整套要反复推敲、拿得出手的视觉。要快做个能用的，留在 Artifact；要像样的设计，去 Design。The line against artifacts: an artifact suits one small thing made and revised on the spot; Design suits a whole set of polished visuals you'll iterate on. For something usable fast, stay in an artifact; for real design, go to Design.不管在哪做视觉，有个共同的坑：不给方向，它会默认做出一股「AI 味」—— Inter 字体、白底配紫渐变、几乎没动效。Anthropic 自己点了这个名。5注 5Note 5Claude · Improving frontend design through Skills —— 不给方向时模型默认一股「AI slop」（Inter 字体、白底紫渐变、少动效）；解法是给明确方向、避开通用字体与配色。Claude · Improving frontend design through Skills — with no direction the model defaults to generic 'AI slop' (Inter font, purple gradient on white, little motion); the fix is to give a clear direction and avoid generic fonts and palettes.解法是别让它替你选：给一个明确的方向（极简、杂志感、复古未来 …… 任选一个并说清），或者让它先提几个方向你再挑；再把要避开的说死。Wherever you make visuals, one trap is shared: with no direction it defaults to a generic 'AI look' — Inter font, a purple gradient on white, almost no motion. Anthropic names this itself.5注 5Note 5Claude · Improving frontend design through Skills —— 不给方向时模型默认一股「AI slop」（Inter 字体、白底紫渐变、少动效）；解法是给明确方向、避开通用字体与配色。Claude · Improving frontend design through Skills — with no direction the model defaults to generic 'AI slop' (Inter font, purple gradient on white, little motion); the fix is to give a clear direction and avoid generic fonts and palettes. The fix is not to let it choose for you: give a clear direction (minimal, editorial, retro-futuristic … pick one and spell it out), or have it propose a few directions first; then name what to avoid.
提示词Prompt给设计定调Set the design direction
风格：选一个明确方向（极简 / 杂志感 / 复古未来 …），整稿统一。
字体：用有个性的显示字体配干净的正文字体；别用 Inter、Roboto、系统字体。
配色：一个主色 + 利落的强调色；别用白底紫渐变。
背景：做出层次和氛围，别铺纯色。
先给我 3 个不同方向，我选定一个再展开。Style: pick one clear direction (minimal / editorial / retro-futuristic ...), consistent throughout.
Type: a distinctive display font with a clean body font; not Inter, Roboto, or system fonts.
Color: one dominant color + a sharp accent; no purple gradient on white.
Background: build depth and atmosphere, not a flat fill.
Give me 3 different directions first; I'll pick one to develop.
风格：复古未来，一整套精酿啤酒厂的落地页都按这个走。
字体：标题用 Space Grotesk，正文用 Source Serif；别用 Inter、Roboto、系统字体。
配色：以深琥珀色为主 + 一抹电光蓝强调；别用白底紫渐变。
背景：用细颗粒噪点和暖色渐晕做出氛围，别铺纯色。
先给我 3 个不同方向，我选定一个再展开。Style: retro-futuristic, applied across one craft-brewery landing page.
Type: Space Grotesk for headings, Source Serif for body; not Inter, Roboto, or system fonts.
Color: deep amber dominant + a jolt of electric blue accent; no purple gradient on white.
Background: build atmosphere with fine grain and a warm vignette, not a flat fill.
Give me 3 different directions first; I'll pick one to develop.
— IV
什么时候它是花架子When It's Just for Show.
要的是文字，就别让它做成 Artifact。If you want words, don't make it an artifact.不是所有输出都该进 Artifact 面板。一段解释、一个判断、一封邮件草稿 —— 你要的是文字本身，做成可交互的东西反而多一道点击。给条线：当你会「再改一轮」或「拿去用」时，Artifact 省事；只读一遍就完的内容，它是多余的仪式感。Not every output belongs in the panel. An explanation, a judgment, an email draft — you want the words themselves, and making them interactive just adds a click. The line: when you'll 'revise once more' or 'go use it,' an artifact saves work; for something you read once and move on, it's ceremony.再划一条和 Cowork 的界：Artifact 是在对话里现做现改的一件东西，Cowork（第 8 章）是在桌面端跑完整件活、交一摞文件。要一个能改的小成品，用 Artifact；要一摞排好版的产出，交给 Cowork。One more line, against Cowork: an artifact is one thing made and revised live in the chat; Cowork (Chapter 8) runs a whole task on the desktop and hands over a stack of files. Want one editable deliverable, use an artifact; want a stack of formatted output, hand it to Cowork.把「该出成什么形态」摆成一张表 —— 大多数时候你要的其实是最上面那两样：Put 'what form should the output take' in one table — most of the time you want one of the top two:
你真正要的What you actually want
出成Form
读一遍就完的解释、判断、草稿An explanation / judgment / draft you read once
普通回答A plain reply
能打开、能发出去的成品（Excel、Word、PDF）A finished file to open or send (Excel, Word, PDF)
文件（内置技能，第 5 章）A file (built-in skills, Ch. 5)
要现做现改、能分享的小东西A small thing to make, revise, and share
Artifact
一整套要反复推敲的视觉、原型A whole set of visuals / prototypes to iterate
Claude Design
把这章用到一件你上周用纯文字打发掉的需求上：Apply this to a request you settled with plain text last week:
01
找一件「其实想要个能改的东西」的活Find a 'I actually wanted something editable' task
挑一件你上周让 Claude 用文字回答、但其实想要个能反复改的成品的需求（排期表、小计算器、带格式的文档）。Pick a request you had Claude answer in text last week but really wanted as an editable deliverable (a schedule, a small calculator, a formatted doc).
02
让它做成 Artifact，迭代两轮Make it an artifact, iterate twice
改两次（调内容、调样式），看每一轮是不是都在上一版基础上接着改。Revise twice (content, then style) and watch whether each round builds on the last version.
03
问自己：这次比纯文字省事了吗Ask: was this easier than plain text
如果省了，记下省在哪；如果没有，记下它为什么是多余的 —— 这条边界比功能本身更值钱。If it was, note where; if not, note why it was overkill — that boundary is worth more than the feature itself.
要文字就别要 Artifact，
要能改的东西才要.
Want words? Skip the artifact.
Want something you can change? Reach for it.
Aklman Library
— 讨论Discussion
讨论Discussion.
评论区初始化中…Initializing comments…
01 / 01
没有匹配结果No matches.
换个关键词，或按 Esc 回到页面Try another keyword, or press Esc to return