SuperAPI AI 工具集

interactive-component-creator

数据与分析

查看项目

更新于 10-16 04:55

技能介绍

用途:构建交互式 Web 组件与前端 artifact,生成可交互的 UI 元素、可视化和基于 Web 的应用。

主要能力与流程:

  1. 初始化:运行 bash scripts/init-artifact.sh <project-name> 创建 React 项目,然后 cd <project-name>。生成的项目包含 React + TypeScript(Vite)、Tailwind CSS 3.4.1 与 shadcn/ui 主题系统、路径别名 @/、预装 40+ shadcn/ui 组件、Radix UI 依赖、Parcel 打包配置(.parcelrc),并兼容 Node 18+(自动检测并固定 Vite 版本)。
  2. 开发:编辑生成的文件来构建 artifact。
  3. 打包:运行 bash scripts/bundle-artifact.sh,将 React 应用打包为单个 HTML 文件 bundle.html,内联全部 JavaScript、CSS 和依赖,可直接在对话中作为 artifact 分享。要求项目根目录存在 index.html。脚本会安装打包依赖(parcel、@parcel/config-default、parcel-resolver-tspaths、html-inline),创建支持路径别名的 .parcelrc,用 Parcel 构建(无 source map),再用 html-inline 内联资源。
  4. 分享:将打包后的 HTML 文件在对话中提供给用户查看。
  5. 测试(可选):仅在必要或被要求时,用可用工具(其他技能或 Playwright、Puppeteer 等内置工具)测试/可视化 artifact;一般避免提前测试,以免增加延迟,可在展示后按需测试。

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

参考:shadcn/ui 组件文档 https://ui.shadcn.com/docs/components。

限制:资料未提供收费、价格、平台支持范围等更多信息。