Anthropic Web Artifacts 多组件构建器
Model: minimax-m2 | ¥0.15/call
AI工具Claude Sonnet 4.6智能助手WebArtifacts
Web Artifacts 多组件构建器：用 React + Tailwind + shadcn/ui 构建复杂的多组件 claude.ai ，适用于各类文档与内容的智能化处理。
Calls: 1
Skill Documentation
🧩 Anthropic Web Artifacts 多组件构建器
摘要
Web Artifacts 多组件构建器：用 React + Tailwind + shadcn/ui 构建复杂的多组件 claude.ai ，适用于各类文档与内容的智能化处理。
**作者:** Anthropic 官方(`anthropics/skills`)
这个技能是干什么的?
为 claude.ai 创建复杂的多组件 HTML Artifacts(不再是单文件简单 HTML/JSX),支持状态管理、路由、shadcn/ui 组件库。
技术栈?
- **React 18+**(hooks, suspense)
- **Tailwind CSS**(utility-first)
- **shadcn/ui**(组件库)
- **TypeScript**
怎么用?
- "给我做一个 TODO 列表 artifact,有增删改"
- "做一个多步骤表单 artifact"
- "做一个看板视图 artifact,可以拖拽"
适用场景?
- claude.ai 内嵌交互演示
- 产品原型
- 内部工具
联系方式
aimsgateway.cn 联系 github 小工。
---
🤖 Agent 使用说明
- **触发关键词**: 用户提到 "Anthropic Web Artifacts 多组件构建器" 相关场景时自动调用
- **输入格式**: 按用户原始问题/需求文本,不要做无关修改
- **输出格式**: 结构化、可直接使用的结果(代码/Markdown/JSON)
- **调用示例**: 用户说 "用这个 skill 帮我 X",Agent 直接调用本 skill
- **错误处理**: 输入不完整时,Agent 反问用户补充,不要瞎猜
👤 用户需要做什么?
在调用本 skill 之前/之后,用户需要:
- [ ] 提供具体任务描述(代码或需求文档)
- [ ] 说明期望的输出格式(代码片段 / 完整文件 / 文字解释)
- [ ] 如有偏好框架/库/语言版本,先告诉 Agent
- [ ] 运行结果不对时,把错误信息反馈给 Agent 重新调用
FAQ
这个技能是干什么的?
为 claude.ai 创建复杂的多组件 HTML Artifacts(不再是单文件简单 HTML/JSX),支持状态管理、路由、shadcn/ui 组件库。
技术栈?
- **React 18+**(hooks, suspense)
- **Tailwind CSS**(utility-first)
- **shadcn/ui**(组件库)
- **TypeScript**
怎么用?
- "给我做一个 TODO 列表 artifact,有增删改"
- "做一个多步骤表单 artifact"
- "做一个看板视图 artifact,可以拖拽"
适用场景?
- claude.ai 内嵌交互演示
- 产品原型
- 内部工具
👤 用户需要做什么?
在调用本 skill 之前/之后,用户需要:
- [ ] 提供具体任务描述(代码或需求文档)
- [ ] 说明期望的输出格式(代码片段 / 完整文件 / 文字解释)
- [ ] 如有偏好框架/库/语言版本,先告诉 Agent
- [ ] 运行结果不对时,把错误信息反馈给 Agent 重新调用