企业官网模板生成器 (Official Site Builder)
把用户提供的"模板 / 参考资料"(参考官网、设计稿截图、HTML/CSS、品牌手册、企业内容)
转化为一套企业级官网静态模板:多页面、纯静态、零依赖、响应式、可直接部署。
何时使用
- 用户说"根据这个网站 / 设计稿 / 资料,给我生成官网模板"
- 用户要"官网""企业站""官网模板",而不是个人主页或单页落地页
- 用户提供了参考链接、截图、HTML/CSS 文件、品牌手册、公司介绍等任一类资料
核心原则
- 企业级: 多页面结构(首页 / 产品 / 案例 / 关于 / 新闻 / 联系)+ 完整组件库 + 专业文案框架。
- 美观: 一切视觉决策先落到"设计指纹 + 设计令牌(tokens)",再写代码,禁止即兴发挥。
- 稳定: 纯静态 HTML/CSS/JS,零构建、零外部依赖(含字体/图标),语义化、可访问、可离线打开。
工作流(严格按顺序执行)
阶段 0 · 输入盘点
- 列出用户提供的全部资料并逐项分类:
- 设计参考: 参考官网 URL / 截图 / HTML/CSS 文件 / 设计稿 → 用于提取"设计指纹"
- 品牌资料: 品牌名、LOGO、标语、标准色、标准字、VI 手册
- 内容资料: 公司介绍、产品/服务清单、客户案例、团队、联系方式 - 确定项目 slug(品牌名小写 + 连字符)。
- 关键信息缺失时(无任何设计参考 / 无品牌名 / 无内容),先向用户提问补齐,不凭空造。
阶段 1 · 设计指纹分析
阅读 references/design-analysis.md,从参考资料提取结构化"设计指纹":
- 品牌画像、色彩体系、字体体系、布局节奏、组件清单、交互动效、文案语气
- 截图用 describe_image 分析;HTML/CSS 直接读代码取真实值;URL 无法访问时请用户改传截图或描述。
- 产出 site-work/<slug>/blueprint/design-fingerprint.md(参照 examples/design-fingerprint.example.md)。
阶段 2 · 站点蓝图(先蓝图后代码)
阅读 references/site-blueprint.md,产出 site-work/<slug>/blueprint/site-blueprint.md
(或 JSON,结构参照 schema/site-blueprint.schema.json):
- 站点地图: 页面清单(默认六页,可增删)
- 每页章节清单(参照 references/corporate-pages.md)
- 设计令牌: 色彩 / 字体 / 间距 / 圆角 / 阴影 / 断点
- 组件清单与内容映射
把蓝图完整呈现给用户确认(关键决策: 页数、主色、整体结构),确认或修改后才进入生成。
阶段 3 · 模板生成
按 references/design-system.md(代码规范)与 references/corporate-pages.md(页面章节)生成:
site-work/<slug>/
index.html products.html cases.html about.html news.html contact.html
assets/css/styles.css assets/js/main.js assets/img/…
README.md (项目说明 + 预览 + 部署指南)
生成规则:
- 每个页面是完整独立 HTML(<!doctype html> … </html>),共享 styles.css / main.js
- 全部相对路径,零外部 CDN / 字体 / 图标库(图标一律内联 SVG)
- 无真实数据处用规范占位符 [待替换: xxx],禁止 lorem ipsum
- 每生成一页即对照章节清单,不漏章
阶段 4 · 质量自检
按 references/quality-gates.md 逐条自检并修复,全部通过才算完成。
阶段 5 · 交付
- 输出摘要: 站点地图、设计令牌、预览方式、部署方式(GitHub Pages / Netlify / 任意静态托管 / 本地双击打开)
- 告知用户可继续提修改(换色、加页、改文案、切暗色模式)。
输出位置约定
- 一切产出放在会话工作区根目录
site-work/<project-slug>/下,中间产物在blueprint/子目录。 - 不修改工作区其他目录与既有文件。
完成检查
- [ ] 蓝图已获用户确认
- [ ] 所有页面生成且章节齐全
- [ ] 质量自检全部通过
- [ ] README 含预览与部署说明
