Claude Code 新功能 Artifacts：把聊天记录直接变成可交互网页
Claude Code 最近开放了一个很实用的功能：Artifacts。
它能把你和 Claude Code 的整段会话，变成一个可以直接打开的实时网页。
不是一段孤零零的代码。
而是一个有筛选、有排序、有按钮、会更新、还能分享给别人的交互页面。
目前该功能面向 Claude Pro 和 Max 用户开放。具体可用范围，以你的账号页面为准。
Artifacts 到底能做什么？
你可以把它理解成：
你负责描述需求，Claude Code 负责把聊天里的信息整理成一个能用的网页。
比如你在会话里讨论了一个项目，里面包含：
- 一批任务
- 每项任务的负责人
- 当前进度
- 截止时间
- 发布状态
- 一些代码或工具返回的数据
Artifacts 可以把这些内容整理成一个页面，做成类似下面的形式：
- 可筛选的项目仪表盘
- 能自动打勾的发布清单
- 团队任务看板
- 产品需求追踪页
- 数据汇总页面
- 项目进度总览
- 简单的内部工具
你不需要再复制一堆内容，打开编辑器，手动搭页面。直接在会话里说清楚你要看什么，页面就能从上下文里生成出来。
它最省时间的地方：不用额外接数据源
很多 AI 网页生成工具，卡在数据这一步。
页面能做出来，数据却要自己准备。你得找 API、配数据库、处理字段映射，忙活半天，最后只是为了做一个内部看板。
Artifacts 的思路更直接：
直接利用当前会话里的内容生成页面。
Claude Code 会参考整段上下文，包括：
- 你和它的对话
- 当前项目里的代码
- 连接到会话的工具
- 会话中已经产生的结构化信息
- 你前面提出的需求和修改意见
举个例子。
你在会话里说：
我们现在有 12 个发布任务。
每个任务需要显示负责人、截止时间和状态。
状态分为未开始、进行中、已完成。
请做一个页面，支持按负责人筛选，按截止时间排序。
Claude Code 就可以根据这段上下文，生成一个可操作的发布页面。
你不用再单独整理 Excel，也不用重新解释项目背景。
页面会实时更新，打开的人不用刷新
Artifacts 的另一个亮点，是页面可以原地更新。
假设你已经把页面发给同事。对方打开链接后，你继续在 Claude Code 里修改：
- 新增一个筛选条件
- 修改任务状态
- 调整页面布局
- 加一个统计卡片
- 改变排序规则
页面更新后，对方正在打开的页面会直接刷新到最新版本。
不用发一条消息提醒：
“麻烦你重新打开一下链接。”
也不用反复生成新地址。
这对项目协作特别方便。一个链接就能持续维护，适合放在团队群、项目文档或日常工作台里。
同一个链接，自带版本历史
页面每次发布，都会在同一个链接下形成一个新版本。
这点很关键。
很多临时生成的页面，改错之后只能重新做一份。链接越发越多，最后连哪个才是最新版都说不清。
Artifacts 会保留版本历史，你可以：
- 查看之前发布过的页面
- 对比不同版本
- 回退到某个旧版本
- 保留一个稳定的分享链接
比如你把发布清单改得太复杂，团队成员反而看不懂。回到上一个版本就行，不需要从头重做。
另外，Artifacts 还提供了一个 Gallery，用来管理你做过的所有页面。
做过的仪表盘、任务页、清单页面，都可以集中查看。以后想找，不用在聊天记录里翻到凌晨。
三个适合直接上手的场景
场景一：做一个项目进度仪表盘
适合产品、研发、运营团队。
你可以让 Claude Code 根据当前会话中的项目内容，生成一个包含这些信息的页面：
- 项目总任务数
- 已完成任务数
- 逾期任务数
- 各负责人任务数量
- 按状态筛选
- 按截止时间排序
可以直接这样提需求：
请根据当前会话里的项目任务，生成一个交互式进度仪表盘。
页面需要包含：
1. 总任务数、已完成数、逾期数
2. 按负责人筛选
3. 按任务状态筛选
4. 按截止时间排序
5. 点击任务后显示详细信息
6. 页面要适合分享给团队成员查看
这种页面适合每天打开一次。
不用早上开十几个文档，也不用在群聊里找昨天谁说了什么。
场景二：做一个自动打勾的发布清单
发布前最怕漏步骤。
代码合并了，环境变量没检查；部署完成了，回滚方案没确认；测试通过了，公告还没发出去。
你可以让 Artifacts 生成一份发布清单：
- 检查代码分支
- 确认测试结果
- 检查数据库变更
- 确认环境变量
- 执行部署
- 验证线上页面
- 发布更新公告
- 记录回滚方式
每完成一项就打勾。页面会比一长串聊天记录直观很多。
示例提示词：
请把当前会话里的发布步骤整理成一个可交互清单。
要求：
- 每项任务可以单独勾选
- 显示任务负责人
- 显示任务状态
- 未完成项目放在顶部
- 支持按负责人筛选
- 页面适合发布前逐项检查
场景三：把一段复杂讨论整理成可视化页面
有些项目不是缺数据，而是信息太散。
一段对话里可能有需求、争议、决策、待办事项和风险记录。全堆在聊天窗口里，过两天谁都不想回看。
这时可以让 Claude Code 把讨论整理成一个项目页面：
- 已确认的决策
- 尚未解决的问题
- 待办事项
- 负责人
- 截止时间
- 风险提示
- 相关代码或文档入口
这样一来，会议记录不再只是“看过就忘”的文字，而是一个可以继续使用的工作页面。
一套更好用的提需求方法
Artifacts 能不能好用，和你怎么说关系很大。
只说一句“帮我做个网页”，结果通常会比较普通。页面结构、交互方式和展示重点，都需要你说清楚。
可以按下面这套模板提需求：
请把当前会话内容整理成一个可交互网页。
页面用途：
给团队查看项目进度。
核心内容：
任务名称、负责人、状态、截止时间、备注。
需要的交互：
支持筛选、排序、勾选和展开详情。
展示方式：
顶部显示统计数据，中间显示任务列表，逾期任务使用醒目颜色。
使用要求：
页面要适合分享给没有参与当前会话的人查看。
更新方式：
后续我修改任务内容时，请更新当前页面，并保留版本历史。
这类描述比“做一个好看的仪表盘”靠谱得多。
你给得越具体，页面越接近实际工作需求。
使用时容易踩的坑
1. 不要把敏感信息直接放进页面
Artifacts 生成的页面可以分享给别人打开。
所以，下面这些内容别直接放进去：
- 密钥
- Token
- 私有账号信息
- 客户联系方式
- 未公开的商业数据
- 内部系统地址
- 用户隐私数据
页面能打开，不代表所有内容都适合公开。
发布前一定检查一遍页面内容。
2. 先说清楚页面给谁看
给自己用的页面，可以偏向操作效率。
给团队看的页面，需要补充状态说明、字段解释和更新时间。
给客户看的页面，则要删掉内部备注、技术细节和敏感字段。
同样一批数据，面对不同的人，页面设计完全不一样。
3. 不要一次塞太多功能
很多人一上来就要求：
- 数据统计
- 多层筛选
- 权限控制
- 图表联动
- 导出功能
- 自动通知
- 多页面跳转
结果页面复杂得像企业后台，自己都不想打开。
更实用的做法是：先做一个能用的版本。
确认任务列表、筛选、排序这些核心功能没问题，再逐步加功能。每次改完发布一个版本，出问题也容易回退。
4. 发布前检查数据是否完整
Artifacts 会根据会话内容生成页面。
如果对话里缺少负责人、截止时间或状态，页面里也可能缺这些信息。
生成页面后，重点检查：
- 有没有遗漏任务
- 状态是否准确
- 日期格式是否统一
- 负责人是否写错
- 统计数字是否和列表一致
- 页面上的链接能否正常打开
页面看起来漂亮，不代表数据一定没问题。这个坑很容易被忽略。
推荐的实际工作流
你可以按这个流程使用 Artifacts：
- 在 Claude Code 中完成项目讨论或代码分析。
- 把任务、数据和结论补充完整。
- 明确页面的使用对象和核心目标。
- 要求 Claude Code 生成第一个 Artifacts 页面。
- 亲自检查数据、交互和敏感信息。
- 把链接发给团队成员。
- 后续继续在原会话里修改页面。
- 每次发布后保留稳定链接，需要时从版本历史回退。
- 在 Gallery 中统一管理已经创建的页面。
这套方式适合做临时项目工具，也适合做持续更新的内部页面。
一句话总结
Artifacts 的价值，不是帮你生成一个“看起来很酷”的网页。
它真正实用的地方在于：
- 直接利用会话上下文
- 不用额外接数据源
- 页面可以交互
- 修改后实时更新
- 同一个链接持续维护
- 自带版本历史
- 还能集中管理多个页面
以后你和 Claude Code 讨论完一个项目，不必让结论躺在聊天记录里。
直接把它变成一个能打开、能操作、能分享的工作页面。
