Agent Skills
返回列表
💻

前端构件单文件打包器

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @kunlungrowth/artifacts-builder。

技能介绍

解决的问题

复杂前端作品通常依赖 React、路由、状态管理和组件库，但交付给非工程用户时，往往需要 Node 环境、本地服务或浏览器插件。此技能面向“能在浏览器里直接打开”的场景：把含多视图、状态管理或组件交互的前端 artifact 构建成一个自包含的 bundle.html，降低分享和复现成本。

工作方式

  • 初始化工程：使用 Vite 创建 React + TypeScript 项目，安装 Tailwind CSS、shadcn/ui 与相关 Radix 依赖，并配置 @/ 路径别名。
  • 组件开发：复用 shadcn/ui 组件完成表单、列表、导航等交互，需要多视图时引入 React Router 等路由方案。
  • 视觉约束：避免过度居中、紫色渐变、一律圆角和 Inter 字体等常见生成式 UI 套路，强调版式对比、留白和设计意图。
  • 单文件打包：以 index.html 为入口，关闭 source map，并将 JS/CSS 内联到 HTML，输出可直接打开的单一文件。
  • 交付验证：优先交付成品，必要时再用 Playwright 或 Puppeteer 截图核对关键交互，避免把测试前置到等待链路里。

适用边界

适合待办清单、看板、表单、小型仪表盘等需要状态与交互的 Web artifact。不适合纯静态页面、单段 HTML 片段或需要后端 API、构建部署的完整生产应用。若后续需要统一品牌视觉或切换主题，可将生成的 HTML 工件交给 brand-guidelines 或 theme-factory 继续处理。

使用场景

  • 为产品评审做一个能增删改、按状态筛选的待办清单，并交付直接打开的单文件 HTML。
  • 把多步骤表单或小型仪表盘描述构建成带状态和路由的 React 页面，再内联成单文件分享。
  • 给非工程同学交付客户资料录入页，用 shadcn/ui 组件并内联 JS/CSS 后直接发送。
  • 把已有 React 组件需求整理成带路由和多视图的前端作品，打包成无需本地服务的 HTML 工件。

适合人员

  • 需要在评审会上展示复杂交互页面的产品经理：把状态、路由和多视图原型交付成可打开的 HTML。
  • 要给非工程同学交付可用原型的独立开发者：避免部署 Node 和本地服务，直接发送单文件网页。
  • 使用 shadcn/ui 做内部工具的前端工程师：快速搭建表单、列表、路由页面并内联打包成工件。
  • 希望把前端作品转成可分发 demo 的技术写作者：保留组件栈并输出自包含 HTML 文件。