القائمة
使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML artifacts 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，不适用于简单的单文件 HTML/JSX artifacts。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
创建高质量 MCP (Model Context Protocol) 服务器的指南，使 LLM 能够通过精心设计的工具与外部服务交互。用于构建 MCP 服务器以集成外部 API 或服务，支持 Python (FastMCP) 或 Node/TypeScript (MCP SDK)。
使用 p5.js 创建算法艺术，具有种子随机性和交互式参数探索。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创作原创算法艺术而非复制现有艺术家的作品以避免版权侵权。
将 Anthropic 官方品牌颜色和字体应用于任何可能受益于 Anthropic 外观和感觉的产物。当需要应用品牌颜色、样式指南、视觉格式或公司设计标准时使用。
使用设计哲学在 .png 和 .pdf 文档中创建精美的视觉艺术。当用户要求创建海报、艺术作品、设计或其他静态作品时应使用此技能。创作原创视觉设计，绝不复制现有艺术家的作品以避免侵犯版权。
引导用户通过结构化工作流程共同创作文档。当用户想要编写文档、提案、技术规范、决策文档或类似结构化内容时使用。此工作流程帮助用户高效传递上下文、通过迭代完善内容，并验证文档对读者是否有效。当用户提到编写文档、创建提案、起草规范或类似文档任务时触发。
当用户想要创建、读取、编辑或操作 Word 文档（.docx 文件）时使用此技能。触发条件包括：任何提及「Word 文档」、「word document」、「.docx」，或请求生成带有格式化内容（如目录、标题、页码或信头）的专业文档。当从 .docx 文件中提取或重组内容、在文档中插入或替换图片、在 Word 文件中执行查找替换、处理修订或批注，或将内容转换为精美的 Word 文档时也应使用。如果用户要求生成「报告」、「备忘录」、「信函」、「模板」或类似的 Word 或 .docx 文件交付物，请使用此技能。不要用于 PDF、电子表格、Google Docs 或与文档生成无关的通用编码任务。
| name | web-artifacts-builder |
| description | 使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML artifacts 的工具套件。适用于需要状态管理、路由或 shadcn/ui 组件的复杂 artifacts，不适用于简单的单文件 HTML/JSX artifacts。 |
| license | Complete terms in LICENSE.txt |
要构建强大的前端 claude.ai artifacts，请按照以下步骤操作：
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>
这将创建一个完全配置好的项目，包含：
@/）已配置要构建 artifact，请编辑生成的文件。有关指导，请参阅下面的常见开发任务。
要将 React 应用打包成单个 HTML artifact：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个自包含的 artifact，其中所有 JavaScript、CSS 和依赖项都已内联。此文件可以直接在 Claude 对话中作为 artifact 共享。
要求：您的项目必须在根目录中有一个 index.html。
脚本的作用：
.parcelrc 配置最后，在与用户的对话中共享打包的 HTML 文件，以便他们可以将其作为 artifact 查看。
注意：这是一个完全可选的步骤。仅在必要或有要求时执行。
要测试/可视化 artifact，请使用可用的工具（包括其他 Skills 或内置工具，如 Playwright 或 Puppeteer）。一般来说，避免预先测试 artifact，因为这会增加请求和完成的 artifact 可见之间的延迟。如果有要求或出现问题，可以在呈现 artifact 后再进行测试。