web-artifacts-builder

Installation
SKILL.md

Web Artifacts Builder

构建强大的前端 claude.ai 工件,遵循以下步骤:

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

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

设计与样式指南

非常重要:为避免常被称为「AI 垃圾」的内容,避免使用过度居中布局、紫色渐变、统一圆角与 Inter 字体。

快速开始

步骤 1:初始化项目

Related skills

More from kunhai-88/skills

Installs
5
First Seen
Jan 25, 2026