SuperAPI AI 工具集

setup

前端与建站

查看项目

更新于 10-15 19:48

技能介绍

用途:在项目中初始化 Subframe,让 Subframe 中设计的页面在本地开发环境像素级渲染。目标状态是开发服务器可运行且页面与设计一致。

主要能力:通过 MCP 工具获取凭据(list_projects 取 Project ID,generate_auth_token 生成 Auth token);检测项目类型(无 package.json 为新项目、有 package.json 且有 .subframe/ 为已配置、有 package.json 但无 .subframe/ 为现有非 Subframe 项目);运行 CLI 初始化并同步组件;配置 Tailwind 与字体;启动开发服务器验证。

使用方式:新项目运行 npx @subframe/cli@latest init --name {PROJECT_NAME} --auth-token {TOKEN} -p {PROJECT_ID} --template {FRAMEWORK} --css-type {TAILWIND_VERSION} --dir ./src/ui --alias "@/ui/*" --tailwind --css-path {CSS_PATH} --install --sync;现有项目省略 --name、--template、--css-type、--tailwind、--css-path。命令需在沙箱外运行,并显式传参避免交互提示。字体需用 get_theme 获取后手动添加 Google Fonts link。验证时运行 npm run dev。

适用场景:Vite、Next.js、Astro 项目,Tailwind v3 或 v4,React 16+、TypeScript。

限制:CLI 不配置字体,需手动处理;现有非标准项目可能需手动修复 Tailwind 预设、导入别名等;MCP 未认证时需用户到 https://app.subframe.com/cli/auth 获取凭据;多项目时必须让用户确认选择。