메뉴
一套基于现代前端技术（React、Tailwind CSS、shadcn/ui）的工具，用来创建复杂的 claude.ai HTML 成品。适用于需要状态管理、路由或 shadcn/ui 组件的复杂作品，不适用于简单的单文件 HTML/JSX。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
“面向 PowerPoint 演示文稿（.pptx）的创建、编辑与分析”。当 Claude 需要创建新演示文稿、修改现有内容、处理版式、添加批注或演讲者备注等与幻灯相关的任务时，请使用本技能。
使用带种子随机性的 p5.js，通过交互式参数探索生成原创算法艺术。适用于用户提出涉及代码生成艺术、算法艺术、流场或粒子系统的请求。始终创作原创算法艺术，避免直接复制现有艺术家的作品，以免引发版权问题。
将 Anthropic 官方品牌配色与字体应用到需要呈现 Anthropic 风格的任何产出物上。当涉及品牌配色、风格规范、视觉格式或公司设计标准时请使用本技能。
基于设计哲学在 .png 与 .pdf 文档中创作精美视觉作品。当用户请求海报、艺术作品、设计稿或其他静态作品时，请使用本技能。务必创作原创视觉设计，避免复制现有艺术家的作品，以免触犯版权。
「面向 .docx 文件的文档创建、编辑与分析」——支持修订记录、批注、格式保持与文本抽取。当 Claude 需要处理专业 Word 文档（.docx）以执行以下任一任务时请使用本技能：(1) 创建新文档；(2) 修改或编辑内容；(3) 处理修订记录；(4) 添加批注；或其他文档相关工作。
面向 PDF 的全能工具包，可用于抽取文本与表格、创建新 PDF、合并/拆分文档以及处理表单。当 Claude 需要填写 PDF 表单，或要批量处理、生成、分析 PDF 文件时请使用本技能。
| name | artifacts-builder |
| description | 一套基于现代前端技术（React、Tailwind CSS、shadcn/ui）的工具，用来创建复杂的 claude.ai HTML 成品。适用于需要状态管理、路由或 shadcn/ui 组件的复杂作品，不适用于简单的单文件 HTML/JSX。 |
| license | 完整条款见 LICENSE.txt |
若要构建强大的前端 claude.ai 成品，请依次执行以下步骤：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将全部代码打包为单个 HTML 文件技术栈：React 18 + TypeScript + Vite + Parcel（打包）+ Tailwind CSS + shadcn/ui
务必要避免常见的“AI 感”俗套：例如过度的居中布局、泛滥的紫色渐变、统一的圆角以及 Inter 字体。
运行初始化脚本，创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
cd <project-name>
脚本会生成已配置好的项目，包含：
@/）.parcelrc）编辑生成的文件以实现你的成品。具体实践可参考下方 常见开发任务。
将 React 应用打包为单个 HTML 成品：
bash scripts/bundle-artifact.sh
脚本会生成 bundle.html —— 一个完全自包含的成品，所有 JavaScript、CSS 与依赖均已内联。该文件可直接在 Claude 对话中共享。
前置要求：项目根目录必须存在 index.html。
脚本会执行以下操作：
.parcelrc将打包后的 HTML 文件发送给用户，使其可作为 artifact 查看。
此步骤完全可选，仅在必要或用户要求时执行。
如需测试或预览，可借助可用工具（包括其他技能，或内置的 Playwright、Puppeteer 等）。通常不建议在展示成品前先行测试，因为这会延迟用户看到成果的时间。如用户提出请求或出现问题，再进行后续测试更妥当。