SuperAPI AI 工具集

install

前端与建站

查看项目

更新于 10-15 22:33

技能介绍

用途:将 Subframe 安装到项目中,使在 Subframe 中设计的页面能在本地开发环境像素级渲染。仅设计无需安装,/subframe:design 可直接对云端项目工作;准备用 /subframe:develop 落地代码时再用本技能。

主要能力:通过 MCP 工具获取凭据(list_projects 取 projectId,generate_auth_token 取令牌);检测项目类型(无 package.json 为新项目、有 package.json 且有 .subframe/ 为已安装、有 package.json 但无 .subframe/ 为已有非 Subframe 项目);按对应路径执行安装;配置字体;启动开发服务器验证。

使用方式:新项目运行 npx @subframe/cli@latest init --yes --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;已有项目省略模板与 CSS 参数。框架可选 nextjs、vite、astro,Tailwind 可选 tailwind(v3)或 tailwind-v4。CLI 需在沙箱外运行,参数需显式传入避免交互提示。字体需另行配置:用 list_fonts 获取字体,Google 字体加 link 标签,自定义字体在全局 CSS 中加 @font-face。最后运行 npm run dev 验证。

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