# The Claude Artifacts Complete Setup Guide (Exact Prompts Inside)
**作者**: darkzodchi
**日期**: 2026-07-16T10:47:18.000Z
**来源**: [https://x.com/zodchiii/status/2077706635405873315](https://x.com/zodchiii/status/2077706635405873315)
---
Claude can now build apps that connect to your real tools: calendar, tasks, analytics. Most people have no idea and still use it for chat.
Inside: how artifacts actually work, the new connection setup, and 4 tools worth building this week.
Learn this once and you stop paying for half the software you use.
Here's the full guide 👇
Before we dive in, I share daily notes on AI & vibe coding in my Telegram channel: https://t.me/zodchixquant 🧠
## The 5 levels of artifacts
Artifacts stopped being one feature a while ago. It's a ladder, and each level unlocks a different class of tools:
- Level 1, static output: documents, diagrams, SVG, single-page designs. Available on every plan including Free
- Level 2, interactive apps: React components and HTML pages with working buttons, forms, and state. Still just a smarter preview
- Level 3, persistent storage: artifacts remember data between sessions, up to 20MB per artifact. Now your habit tracker doesn't reset on refresh
- Level 4, Claude inside: an artifact can call the Claude API directly. People call it "Claude in Claude": the app you built has AI running inside it
- Level 5, MCP connectors (new): artifacts read and write your real services. A dashboard that pulls live BigQuery data, a form that creates Asana tasks
Levels 3-5 need Pro, Max, Team, or Enterprise, on web and desktop.
## Building your first real artifact
Skip "make me a website". The prompt pattern that produces working tools:
```
Build an artifact: [what it is] for [who uses it].
Core features: [3-5 specific functions]
Data: [what it stores or fetches]
Design: [style reference or "clean, minimal"]
Use persistent storage so data survives sessions.
```
Concrete example:
```
Build an artifact: a content calendar for a solo creator.
Core features: add post ideas with status (draft/scheduled/posted),
filter by platform, weekly view
Data: store all entries persistently
Design: clean, dark mode
```
One prompt, working tool. Then iterate: "add a stats bar showing posts per week" instead of re-describing everything.
## The new part: connecting artifacts to real services
This is what shipped yesterday. The flow, verified from the docs:
1. Build or open an artifact that needs external data ("dashboard showing my calendar and open GitHub issues")
2. On first interaction, the artifact shows a connector approval prompt: "This artifact uses connectors" with a Connect button per service
3. Approve access. Your choice persists for that artifact going forward
4. The artifact now fetches and writes data on demand, live, per viewer
Three rules that decide whether your build works:
- Each viewer authenticates separately. Share an artifact with your team, and every person connects their own accounts. Your GitHub token never leaks to a teammate, and their dashboard shows their data
- Publicly-shared artifacts can't use connectors. Live-data apps stay private or org-internal. Plan your builds accordingly
- Admins hold the switch. On Team/Enterprise, org admins can disable artifact MCP access entirely, so check before promising your team a tool
## 4 builds actually worth making
- Personal ops dashboard. Calendar + task list + inbox count in one tab. The classic "what should I focus on today" screen, now with live data instead of pasted screenshots
- Client-facing report page. Pulls metrics from your analytics connector each time it opens. Build once, stop exporting PDFs every Monday
- Team intake form. A form that writes directly into Asana or Linear through the connector, with your validation rules on top. No Zapier tax
- Live Artifacts move: persistent dashboards live in their own tab, refresh with current data each time you open them, and keep version history. Treat them as your personal internal tools, not chat outputs
## Publishing and remixing
The distribution layer most people never touch:
- Publish any artifact via link. Viewers don't need a Claude account for static and interactive levels
- Remixing: anyone with a Claude account can fork a published artifact into their own copy and modify it. Your tool becomes a template
- Community catalog: a browsable library of published artifacts. Before building from scratch, check if someone shipped 80% of your idea already
## Common mistakes
- Building connector apps for public sharing. Connectors don't work on public artifacts. If the goal is a public tool, design around static data or the Claude API level instead
- Re-describing the whole app on every edit. Artifacts iterate. Ask for one change at a time and the quality stays consistent
- Ignoring the 20MB storage ceiling. Persistent storage is for state and entries, not media libraries. Keep images external
- Expecting shared artifacts to share your data. Per-user auth means every viewer sees their own services. That's a feature for teams and a surprise for the unprepared
- Skipping the approval prompt details. The connect dialog names exactly which services the artifact touches. Read it, especially on remixed artifacts someone else built
## The 15-minute setup
1. Pick one repetitive check you do daily: calendar, metrics, tasks (1 min)
2. Prompt the artifact with the pattern above, persistent storage on (3 min)
3. Add the connector, approve access on first run (2 min)
4. Iterate twice: one layout fix, one feature add (7 min)
5. Pin the tab. That's your first internal tool (2 min)
The chat window was never the product. The things you build in it are.
Thanks for reading!
I share daily notes on AI & vibe coding in my Telegram channel: https://t.me/zodchixquant 🧠
## 相关链接
- [darkzodchi](https://x.com/zodchiii)
- [@zodchiii](https://x.com/zodchiii)
- [14K](https://x.com/zodchiii/status/2077706635405873315/analytics)
- [https://t.me/zodchixquant](https://t.me/zodchixquant)
- [https://t.me/zodchixquant](https://t.me/zodchixquant)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [6:47 PM · Jul 16, 2026](https://x.com/zodchiii/status/2077706635405873315)
- [14.5K Views](https://x.com/zodchiii/status/2077706635405873315/analytics)
- [View quotes](https://x.com/zodchiii/status/2077706635405873315/quotes)
---
*导出时间: 2026/7/17 11:26:05*
---
## 中文翻译
# Claude Artifacts 完整设置指南（内含精准提示词）
**作者**: darkzodchi
**日期**: 2026-07-16T10:47:18.000Z
**来源**: [https://x.com/zodchiii/status/2077706635405873315](https://x.com/zodchiii/status/2077706635405873315)
---
Claude 现在可以构建连接到你的真实工具的应用：日历、任务、分析。大多数人对此一无所知，仍然只用它来聊天。
内容包括：Artifacts 的实际工作原理、新的连接设置，以及本周值得构建的 4 个工具。
学会一次，你就可以停止为你使用的一半软件付费。
完整指南如下 👇
在开始之前，我在我的 Telegram 频道分享关于 AI & vibe coding 的日常笔记：https://t.me/zodchixquant 🧠
## Artifacts 的 5 个等级
Artifacts 很久以前就不再只是一个单一功能了。它是一架梯子，每一级都解锁不同类别的工具：
- 第 1 级，静态输出：文档、图表、SVG、单页设计。包括免费版在内的所有计划均可用
- 第 2 级，交互式应用：带有可工作按钮、表单和状态的 React 组件和 HTML 页面。仍然只是一个更智能的预览
- 第 3 级，持久化存储：Artifacts 在会话之间记住数据，每个 Artifact 最多 20MB。现在你的习惯追踪器刷新后不会重置
- 第 4 级，Claude 内嵌：Artifact 可以直接调用 Claude API。人们称之为“Claude 里的 Claude”：你构建的应用内部运行着 AI
- 第 5 级，MCP 连接器（新增）：Artifacts 读取和写入你的真实服务。一个提取实时 BigQuery 数据的仪表盘，一个创建 Asana 任务的表单
第 3-5 级需要 Pro、Max、Team 或 Enterprise 计划，仅限网页和桌面端。
## 构建你的第一个真实 Artifact
跳过“给我做个网站”。能生成可用工具的提示词模式：
```
Build an artifact: [它是什么] for [谁使用它].
Core features: [3-5 个具体功能]
Data: [它存储或获取什么]
Design: [风格参考或 "clean, minimal"]
Use persistent storage so data survives sessions.
```
具体示例：
```
Build an artifact: a content calendar for a solo creator.
Core features: add post ideas with status (draft/scheduled/posted),
filter by platform, weekly view
Data: store all entries persistently
Design: clean, dark mode
```
一条提示词，一个可用工具。然后迭代：“添加一个显示每周发布数量的统计条”，而不是重新描述所有内容。
## 新增部分：将 Artifacts 连接到真实服务
这是昨天发布的功能。根据文档验证的流程如下：
1. 构建或打开一个需要外部数据的 Artifact（“显示我的日历和待办 GitHub 问题的仪表盘”）
2. 在首次交互时，Artifact 会显示一个连接器批准提示：“此 Artifact 使用连接器”，并带有一个针对每个服务的 Connect 按钮
3. 批准访问。你的选择对该 Artifact 将持续有效
4. Artifact 现在可以按需、实时地获取和写入数据，针对每个查看者
决定你的构建是否有效的三条规则：
- 每个查看者单独进行身份验证。与团队共享一个 Artifact，每个人连接自己的账户。你的 GitHub 永远不会泄露给队友，他们的仪表盘显示的是他们的数据
- 公开共享的 Artifact 不能使用连接器。实时数据应用保持私有或组织内部。相应地规划你的构建
- 管理员掌握开关。在 Team/Enterprise 上，组织管理员可以完全禁用 Artifact MCP 访问，所以在向团队承诺工具之前请先检查
## 4 个真正值得构建的工具
- 个人运营仪表盘。在一个标签页中集成日历 + 任务列表 + 收件箱计数。经典的“我今天应该关注什么”屏幕，现在有了实时数据，而不是粘贴的截图
- 面向客户的报告页面。每次打开时从分析连接器提取指标。构建一次，停止每周一导出 PDF
- 团队需求表单。一个通过连接器直接写入 Asana 或 Linear 的表单，并在上面加上你的验证规则。没有 Zapier 税
- 实时 Artifact 操作：持久化仪表盘存在于自己的标签页中，每次打开时刷新当前数据，并保留版本历史。将它们视为你的个人内部工具，而不是聊天输出
## 发布和混剪
大多数人从未接触过的分发层：
- 通过链接发布任何 Artifact。对于静态和交互级别，查看者不需要 Claude 账户
- 混剪：任何拥有 Claude 账户的人都可以将发布的 Artifact 分叉到自己的副本中并进行修改。你的工具成为模板
- 社区目录：可浏览的已发布 Artifact 库。在从头开始构建之前，检查是否有人已经发布了你想法的 80%
## 常见错误
- 为公开共享构建连接器应用。连接器在公共 Artifact 上不起作用。如果目标是公共工具，请围绕静态数据或 Claude API 级别进行设计
- 每次编辑都重新描述整个应用。Artifacts 是迭代的。一次要求一个更改，质量保持一致
- 忽略 20MB 存储上限。持久化存储用于状态和条目，而不是媒体库。将图像保持在外部
- 期望共享的 Artifact 共享你的数据。每用户身份验证意味着每个查看者看到自己的服务。这对团队来说是一个功能，对没有准备的人来说是一个惊喜
- 跳过批准提示的细节。连接对话框准确命名了 Artifact 接触的服务。阅读它，尤其是对于别人构建的混剪 Artifact
## 15 分钟设置
1. 选择一个你每天重复做的检查：日历、指标、任务（1 分钟）
2. 使用上述模式提示 Artifact，开启持久化存储（3 分钟）
3. 添加连接器，首次运行时批准访问（2 分钟）
4. 迭代两次：一次布局修复，一次功能添加（7 分钟）
5. 固定标签页。这是你的第一个内部工具（2 分钟）
聊天窗口从来都不是产品。你在其中构建的东西才是。
感谢阅读！
我在我的 Telegram 频道分享关于 AI & vibe coding 的日常笔记：https://t.me/zodchixquant 🧠
## 相关链接
- [darkzodchi](https://x.com/zodchiii)
- [@zodchiii](https://x.com/zodchiii)
- [14K](https://x.com/zodchiii/status/2077706635405873315/analytics)
- [https://t.me/zodchixquant](https://t.me/zodchixquant)
- [https://t.me/zodchixquant](https://t.me/zodchixquant)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [6:47 PM · Jul 16, 2026](https://x.com/zodchiii/status/2077706635405873315)
- [14.5K Views](https://x.com/zodchiii/status/2077706635405873315/analytics)
- [View quotes](https://x.com/zodchiii/status/2077706635405873315/quotes)
---
*导出时间: 2026/7/17 11:26:05*