SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场create-site

create-site

前端与建站

查看项目

更新于 10-15 14:51

技能介绍

用途

create-site 用于引导用户创建一个完整、生产质量的 Power Pages 代码站点（SPA），覆盖从初始概念到部署站点的全过程。它遵循系统化流程：发现需求、立即搭建脚手架并启动、规划组件与设计、在应用设计后实现、验证、审查和部署。

主要能力

  • 支持从精选模板或从零开始创建站点。
  • 支持 React、Angular、Vue、Astro 等静态 SPA 框架。
  • 通过模板目录（fetch-template-catalog.js）获取模板，支持按语义匹配模板家族与框架变体。
  • 提供浏览器预览模板能力（render-template-browser.js），浏览器视图为只读，终端 AskUserQuestion 仍是决策入口。
  • 内置实时预览状态协议：脚手架加载器轮询 public/scaffold-status.json，显示进度条标签和“等待输入”横幅。
  • 使用 TaskCreate/TaskUpdate 跟踪各阶段进度。
  • 通过 Playwright（browser_navigate + browser_snapshot）验证每次重要改动的结构。
  • 遵循双向设计（bidirectional-design.md），确保布局方向中立、混合内容边界和脚本化排版。
  • 遵循站点修改完整性（site-modification-integrity.md），保证后续页面和组件保留本地化、方向和内容扩展行为。
  • Git 检查点：每个页面和组件单独提交，便于回滚。

使用方式

技能通过分阶段流程执行：

  • 阶段 1：发现（Discovery）——收集站点名称、用途、受众，确定站点类型。
  • 阶段 1.5：模板分支决策——获取模板目录，语义匹配模板家族，询问用户选择路径（显示匹配模板、浏览全部模板、从零创建）。
  • 阶段 2：脚手架搭建并立即启动开发服务器。
  • 阶段 3-4：规划组件与设计，通过 AskUserQuestion 收集美学、氛围、品牌等信息。
  • 阶段 5：实现——应用设计令牌、创建共享组件、创建页面、更新路由和导航，并同步更新 scaffold-status.json。
  • 阶段 5.7：视觉设计审查，捕获每个页面截图。
  • 后续：验证、审查、部署。

关键脚本包括：

  • node "${PLUGIN_ROOT}/scripts/check-version.js"
  • node "${PLUGIN_ROOT}/scripts/fetch-template-catalog.js"
  • node "${PLUGIN_ROOT}/scripts/fetch-template-artifact.js" --sha "<catalog-sha>" --artifactPath "<preview-image-path>"
  • node "${PLUGIN_ROOT}/scripts/render-template-browser.js" --templatesJsonPath "<temp-json>" --outputPath "<temp-html>" --open
  • node "${PLUGIN_ROOT}/scripts/fetch-template-variant.js" --sha "<catalog-sha>" --catalogPath "<catalogPath>" --kind "<kind>" --templateId "<id>" --variant "<variantKey>" --solutionSettingsJson '<JSON>'
  • node "${PLUGIN_ROOT}/scripts/emit-create-site-template-outcome.js" --eventName template_used --templateId "<id>" --templateKind "<kind>" --framework "<framework>"

scaffold-status.json 文件结构（所有字段可选）：

{ "message": "Creating Contact page", "awaitingInput": false, "inputPrompt": "Please check your terminal to respond." }

适用场景

  • 创建公司门户、博客/内容站点、仪表盘、落地页等。
  • 内部受众：优先任务完成，强调状态、下一步操作、数据表格、仪表盘、认证、导航深度。
  • 外部受众：优先第一印象、说服性页面叙事、SEO 友好结构、联系表单。

限制

  • 仅支持静态 SPA 框架（React、Vue、Angular、Astro）。
  • 不支持：Next.js、Nuxt.js、Remix、SvelteKit、Liquid。
  • 传统目录条目（kind: traditional）虽被接受，但在其仅解决方案的配置流程实现前不会显示。
  • 模板目录获取失败时不会阻塞 create-site，会回退到从零创建路径。
  • 站点内容语言独立于 Dataverse 语言：SPA 字符串使用批准的内容语言，Dataverse 和 Power Pages 平台管理消息保持英文（en-US，LCID 1033）。
  • 其他具体收费、价格、平台细节暂未提供。