SuperAPI AI 工具集

artifacts-builder

前端与建站

查看项目

更新于 10-16 06:22

技能介绍

用途:Artifacts Builder 用于构建功能强大的前端 HTML 制品,适合需要多组件、较复杂交互的页面。

主要能力:提供初始化、开发、打包的完整流程。技术栈为 React 18 + TypeScript + Vite + Parcel(打包)+ Tailwind CSS + shadcn/ui。初始化脚本会生成已配置好的项目,包含 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名(@/)、40+ 预装 shadcn/ui 组件、全部 Radix UI 依赖、Parcel 打包配置(.parcelrc),并兼容 Node 18+(自动检测并固定 Vite 版本)。

使用方式:

  1. 初始化项目:bash scripts/init-artifact.sh <project-name>,然后 cd <project-name>。
  2. 编辑生成的文件来开发制品。
  3. 打包为单个 HTML:bash scripts/bundle-artifact.sh,生成 bundle.html,将全部 JavaScript、CSS 和依赖内联,可直接在 Kilo 会话中作为制品分享。要求项目根目录有 index.html。脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline),创建支持路径别名的 .parcelrc,用 Parcel 构建(无 source map),再用 html-inline 内联资源。
  4. 在对话中分享打包后的 HTML 文件。
  5. 测试/可视化(可选):仅在必要或被要求时进行,可使用 Playwright、Puppeteer 等工具;一般避免提前测试,以免增加延迟。

设计风格:为避免“AI slop”,应避免过度使用居中布局、紫色渐变、统一圆角以及 Inter 字体。

限制:资料未提供收费、价格、平台支持范围等信息;打包要求根目录存在 index.html;测试步骤为可选。