菜单
用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/LeastBit/Claude_skills_zh-CN --skill web-artifacts-builder命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
使用 p5.js 创建带有种子随机性和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术，而不是复制现有艺术家的作品，以避免版权侵犯。
将 Anthropic 官方品牌颜色和字体应用于任何可能需要 Anthropic 视觉风格的作品。适用于品牌颜色或样式指南、视觉格式化或公司设计标准的场景。
使用设计哲学创作精美的 .png 和 .pdf 格式视觉艺术作品。当用户要求创作海报、艺术品、设计作品或其他静态作品时，应使用此技能。创作原创视觉设计，切勿复制现有艺术家的作品以避免版权侵权。
基于 SOC 职业分类
正在显示 SKILL.md
| name | web-artifacts-builder |
| description | 用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的、多组件的 claude.ai HTML artifact 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifact - 不适用于简单的单文件 HTML/JSX artifact。 |
| license | 完整条款见 LICENSE.txt |
要构建强大的前端 claude.ai artifact，请遵循以下步骤：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
非常重要：为了避免通常被称为“AI 废话 (AI slop)”的设计，请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。
运行初始化脚本以创建一个新的 React 项目：
bash scripts/init-artifact.sh <项目名称>
cd <项目名称>
这将创建一个配置齐全的项目，包含：
@/)要构建 artifact，请编辑生成的文件。请参阅下面的常见开发任务获取指导。
要将 React 应用打包成单个 HTML artifact：
bash scripts/bundle-artifact.sh
这将创建 bundle.html —— 一个包含所有内联 JavaScript、CSS 和依赖项的自包含 artifact。此文件可以直接作为 artifact 在 Claude 对话中分享。
要求: 你的项目根目录下必须有一个 index.html。
脚本作用:
.parcelrc 配置最后，在对话中与用户分享打包好的 HTML 文件，以便他们将其作为 artifact 查看。
注意：这是一个完全可选的步骤。仅在必要或有要求时执行。
要测试/预览 artifact，请使用可用工具（包括其他 Skill 或内置工具如 Playwright 或 Puppeteer）。通常情况下，避免预先测试 artifact，因为这会增加请求与看到成品 artifact 之间的延迟。如果用户要求或出现问题，请在展示 artifact 后再进行测试。