web-artifacts-builder

Installation
SKILL.md

Web Artifacts 生成器 (Web Artifacts Builder)

要构建强大的前端 claude.ai artifact,请遵循以下步骤:

  1. 使用 scripts/init-artifact.sh 初始化前端仓库
  2. 通过编辑生成的代码来开发你的 artifact
  3. 使用 scripts/bundle-artifact.sh 将所有代码打包成单个 HTML 文件
  4. 向用户展示 artifact
  5. (可选) 测试 artifact

技术栈: React 18 + TypeScript + Vite + Parcel (打包) + Tailwind CSS + shadcn/ui

设计与风格指南

非常重要:为了避免通常被称为“AI 废话 (AI slop)”的设计,请避免过度使用居中布局、紫色渐变、统一的圆角和 Inter 字体。

快速上手

第 1 步:初始化项目

Related skills

More from leastbit/claude_skills_zh-cn

Installs
22
GitHub Stars
422
First Seen
Jan 22, 2026