web-artifacts-builder by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill web-artifacts-builder要构建强大的前端 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 <项目名称>
cd <项目名称>
这将创建一个完全配置好的项目,包含:
@/)广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
要构建工件,请编辑生成的文件。请参阅下面的常见开发任务以获取指导。
要将 React 应用打包成单个 HTML 工件:
bash scripts/bundle-artifact.sh
这将创建 bundle.html —— 一个自包含的工件,所有 JavaScript、CSS 和依赖项都已内联。此文件可以直接在 Claude 对话中作为工件分享。
要求 : 您的项目必须在根目录下有一个 index.html 文件。
脚本的作用 :
.parcelrc 配置最后,在与用户的对话中分享打包好的 HTML 文件,以便他们可以将其视为工件查看。
注意:这是一个完全可选的步骤。仅在必要时或被要求时执行。
要测试/可视化工件,请使用可用的工具(包括其他 Skills 或内置工具,如 Playwright 或 Puppeteer)。通常,避免预先测试工件,因为这会在请求和看到完成工件之间增加延迟。如果被要求或出现问题,请在展示工件后进行测试。
每周安装数
154
仓库
GitHub 星标数
22.6K
首次出现
2026年1月21日
安全审计
安装于
claude-code123
opencode122
gemini-cli118
cursor109
codex107
antigravity102
To build powerful frontend claude.ai artifacts, follow these steps:
scripts/init-artifact.shscripts/bundle-artifact.shStack : React 18 + TypeScript + Vite + Parcel (bundling) + Tailwind CSS + shadcn/ui
VERY IMPORTANT: To avoid what is often referred to as "AI slop", avoid using excessive centered layouts, purple gradients, uniform rounded corners, and Inter font.
Run the initialization script to create a new React project:
bash scripts/init-artifact.sh <project-name>
cd <project-name>
This creates a fully configured project with:
@/) configuredTo build the artifact, edit the generated files. See Common Development Tasks below for guidance.
To bundle the React app into a single HTML artifact:
bash scripts/bundle-artifact.sh
This creates bundle.html - a self-contained artifact with all JavaScript, CSS, and dependencies inlined. This file can be directly shared in Claude conversations as an artifact.
Requirements : Your project must have an index.html in the root directory.
What the script does :
.parcelrc config with path alias supportFinally, share the bundled HTML file in conversation with the user so they can view it as an artifact.
Note: This is a completely optional step. Only perform if necessary or requested.
To test/visualize the artifact, use available tools (including other Skills or built-in tools like Playwright or Puppeteer). In general, avoid testing the artifact upfront as it adds latency between the request and when the finished artifact can be seen. Test later, after presenting the artifact, if requested or if issues arise.
Weekly Installs
154
Repository
GitHub Stars
22.6K
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubFailSocketPassSnykPass
Installed on
claude-code123
opencode122
gemini-cli118
cursor109
codex107
antigravity102
DSPy 框架:声明式语言模型编程,自动优化提示,构建复杂 AI 系统
211 周安装