메뉴
一套用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Multi-technique business analysis orchestration using BABOK. Coordinates 14 techniques across strategic analysis, problem solving, planning, and design into comprehensive analysis packages.
Benchmarking and competitive analysis techniques. Compares performance, processes, and practices against industry standards, competitors, and best-in-class organizations.
Business model design using Osterwalder's Business Model Canvas and Lean Canvas. Creates 9-block canvases with structured analysis for business model innovation and startup validation.
Business capability modeling using BABOK Business Capability Analysis. Creates hierarchical capability maps (L1-L3) linking strategy to architecture with Mermaid visualization.
Data modeling with Entity-Relationship Diagrams (ERDs), data dictionaries, and conceptual/logical/physical models. Documents data structures, relationships, and attributes.
Decision modeling using decision tables, weighted scoring matrices, and decision trees. Structures complex decisions with clear criteria, alternatives evaluation, and outcome prediction.
| name | artifacts-builder |
| description | 一套用于使用现代前端 Web 技术（React、Tailwind CSS、shadcn/ui）创建复杂的多组件 claude.ai HTML 工件的工具集。适用于需要状态管理、路由或 shadcn/ui 组件的复杂工件，不适用于简单的单文件 HTML/JSX 工件。 |
| license | Complete terms in LICENSE.txt |
要构建强大的前端 claude.ai 工件，请按照以下步骤操作：
scripts/init-artifact.sh 初始化前端仓库scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui
非常重要：为避免通常被称为 "AI slop" 的情况，请避免使用过多的居中布局、紫色渐变、统一的圆角和 Inter 字体。
在调用初始化脚本之前，必须先询问用户项目的主题配色规范。
询问用户以下信息：
如果用户提供了主题配色信息，在调用脚本时通过环境变量传递：
THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>
支持的主题色：slate（默认灰色）、blue、green、violet
如果用户没有提供主题配色，使用默认的 slate 灰色主题。
运行初始化脚本以创建新的 React 项目：
bash scripts/init-artifact.sh <project-name>
# 或指定主题色
THEME_COLOR=blue bash scripts/init-artifact.sh <project-name>
cd <project-name>
这将创建一个完全配置的项目，包含：
@/) 已配置要构建工件，请编辑生成的文件。请参阅下面的常见开发任务以获取指导。
要将 React 应用打包成单个 HTML 工件：
bash scripts/bundle-artifact.sh
这将创建 bundle.html - 一个自包含的工件，所有 JavaScript、CSS 和依赖项都已内联。此文件可以直接在 Claude 对话中作为工件共享。
要求：您的项目必须在根目录中有一个 index.html。
脚本的作用：
.parcelrc 配置最后，在对话中与用户共享打包的 HTML 文件，以便他们可以将其作为工件查看。
注意：这是一个完全可选的步骤。仅在必要时或应要求时执行。
要测试/可视化工件，请使用可用工具（包括其他 Skills 或内置工具，如 Playwright 或 Puppeteer）。通常，避免提前测试工件，因为这会在请求和完成工件可见之间增加延迟。如果请求或出现问题，请在展示工件后进行测试。