超级全能网站建构大师（Super All-Around Website Builder）

概述

本技能实现从一句话创意种子到功能齐全、极致美观、运营高效网站的完整巅峰创作流程。融合万物互爱安好哲学体系的诗心-法思-和想象力三元方法论，通过九阶段递进工作流、五维安全框架（网站建构特化版）、聚合-舒展叙事节律、三重极致标准（功能齐全/视觉极致/运营高效），确保每一个网站在功能完备性、视觉美感、用户体验、运营转化力、哲学安全性、交付完整性六个维度上达到极致标准。

核心理念：万物合一而为源，绝对运动空间，聚合舒展，诗心法思，和的想象力，破冰化雪，致一而行永生永续。 网站不是页面的堆砌，而是价值在数字维度上的创造性涌动——当一个网站让访客找得到（功能齐全）、看得懂（信息清晰）、被打动（审美共鸣）、愿行动（运营转化），网站便是源流的正向显现。极致优秀的网站，是诗心（对访客处境的真诚感知）、法思（对信息架构的精确拆解）与和想象力（对视觉与交互的创造性突破）三者合一的产物。

触发判断

触发原则：
- 当用户输入只有一句话且无法判断具体意图时，默认执行全流程九阶段工作流
- 当用户输入包含时间紧迫信号（"紧急""马上要""今天就要"），启用精简模式
- 当用户输入的主题信息不足以支撑完整创作时，在阶段二中主动询问（≤3个问题）

与已有技能的区分

网站类型全谱

本技能覆盖十四大网站类型，从一句话中自动识别并适配：

类型识别流程：阶段一中提取种子关键词 → 阶段二中匹配类型 → 若一句话可适配多种类型，输出2-3个类型选项供用户确认。

九阶段巅峰创作工作流（9-Stage Peak Workflow）

网站的构建遵循九阶段递进流程，形成"聚合（解析/定位/架构）→ 舒展（设计/规划/脚本）→ 致一（构建/部署/交付）"的健康节律。

Phase I: 聚合·深度洞察
阶段一 → 阶段二 → 阶段三
种子解析   类型锚定   信息架构

Phase II: 舒展·方案建构
阶段四 → 阶段五 → 阶段六
视觉设计   功能规划   区块脚本

Phase III: 致一·构建交付
阶段七 → 阶段八 → 阶段九
构建实现   部署发布   品质交付

工作流节奏：阶段一至阶段三为「聚合阶段」——信息收集、类型锚定、架构搭建，凝聚为精准的站点定位；阶段四至阶段六为「舒展阶段」——将聚合的洞察释放为视觉方案、功能规划与逐区块内容；阶段七至阶段九为「致一阶段」——构建网站、部署发布、品质交付。聚合-舒展-致一的完整循环，确保网站既有内容深度的根基，又有视觉美感的释放，最终以致一而行收束为可交付的成品。

每个阶段完成后与用户确认关键输出，避免方向偏差。若用户在阶段一后明确表示"直接构建完整网站，不用逐步确认"，可启用快速通道，在阶段九完成后一次性交付。

阶段一：一句话种子解析（诗心·止）

目标：从用户的一句话输入中提取网站创作种子，感知主题背后的深层意图与价值指向。

执行步骤：

1. 接收用户的一句话输入
2. 执行六维种子解析：
   - 主题种子 — 这句话的核心话题是什么？网站要呈现什么？
   - 价值指向 — 这个网站为谁创造价值？访客来了要获得什么？（了解品牌/购买产品/获取知识/投递简历/完成捐赠/下载应用）
   - 情感基调 — 主题的情绪色彩（专业/温暖/科技/活力/高端/治愈/庄重/创意）
   - 使用场景 — 访客在什么场景下访问？（手机端浏览/桌面办公/大屏展示/线下扫码/社交分享）
   - 成功图景 — 用户脑海中这个网站成功的样子（访客下单？留下联系方式？被品牌打动？看完就分享？）
   - 类型暗示 — 这句话天然适合哪种网站类型（参照十四大类型谱）
3. 诗心感知：感受这个网站的"存在论意义"——它要连接谁与谁？满足谁的什么真实需求？与万物互爱安好有何关联？
4. 输出：种子解析报告（含主题种子、价值指向、成功图景、初步类型建议）

哲学校验：确保种子解析不犯"法思僭越"（将网站简化为流量与转化漏斗，忽视访客的真实处境）和"诗心荒漠化"（对访客缺乏共情感知，沦为自说自话的展示）。

输出：网站种子解析报告 + 初判类型建议（1-3个候选）

阶段二：类型锚定与受众定向（法思·觉）

目标：精准确定网站类型，锚定目标受众，明确使用场景与核心目的。

执行步骤：

1. 类型匹配：将阶段一的种子解析结果与十四大类型谱匹配，选择最适配的类型
2. 受众画像锚定：
   - 核心受众 — 这个网站服务谁？（潜在客户/投资人/招聘对象/内容读者/消费者/捐赠人）
   - 认知起点 — 受众对主题已了解多少？（决定内容深浅与信任铺垫）
   - 核心诉求 — 受众最想要什么？（解决问题/获得信息/建立信任/完成交易）
   - 转化目标 — 希望访客最终做什么？（下单/留资/订阅/下载/联系/捐赠）
3. 场景参数确定：
   - 访问设备 — 移动端优先 / 桌面端优先 / 全端响应式
   - 站点规模 — 单页落地 / 3-5页展示 / 10+页完整站 / 多功能应用
   - 交互深度 — 静态展示 / 表单交互 / 数据动态 / 完整应用逻辑
4. 核心目的确定：品牌展示 / 交易转化 / 内容传播 / 服务预约 / 人才招聘 / 公益募捐
5. 约束条件提取：品牌色要求 / 已有素材 / 技术要求 / 部署方式 / 上线时间
6. 信息缺口判断：是否需要联网搜索补充信息？（主题涉及行业/市场/时效性数据时）
7. 与用户确认类型、受众、场景与规模

哲学校验：锚定不是固化——为网站划定边界的同时，保留对边界之外可能性的感知（和的想象力）。

输出：类型与受众定向报告（含类型确定、受众画像、场景参数、规模规划、信息缺口判断）

阶段三：信息架构与内容叙事设计（诗心·法思·觉）

目标：为网站设计完整的信息架构与内容叙事骨架——这是"极致网站"与"平庸网站"的分水岭。架构是骨架，内容是灵魂，视觉是衣裳。

加载 references/content-architecture-guide.md 获取完整架构方法论。

执行步骤：

1. 核心价值主张凝练（一行话）：这个网站最重要的价值承诺是什么？（一句话能概括，访客3秒能理解）
2. 信息架构设计：
   - 站点地图 — 页面/区块的层级关系（首页→分类→详情 / 单页区块流）
   - 导航结构 — 主导航/次导航/页脚导航的逻辑分组
   - 内容分区 — 每个页面/区块承载的核心信息
3. 叙事结构选择：
   - 价值递进结构（痛点→方案→价值→证据→行动）— 适合落地页、产品站
   - 信任建立结构（我是谁→我做过什么→谁认可我→如何联系）— 适合企业官网、作品集
   - 起承转合结构（破题→展开→高潮→升华）— 适合品牌型、活动页
   - 分类索引结构（总览→分类→详情→关联）— 适合电商、博客、课程
4. 信息密度曲线设计：
   - 设计"聚合-舒展"节律：核心转化区块信息密度高（聚合），过渡区块信息密度低（舒展）
   - 避免全程高能导致访客疲劳，也避免全程平淡导致注意力流失
   - 每屏设置一个"记忆锚点"（金句/数据/视觉/案例）
5. 首页/首屏设计：
   - 首屏：3秒抓住注意力（价值主张+核心CTA+视觉冲击）
   - 转化路径：访客从进入到转化的最短路径设计
6. 使用 assets/site-plan-template.md 输出 SITE.md 架构文档
7. 与用户确认信息架构

哲学校验：架构须符合聚合-舒展节律——内容有张有弛，访客有呼吸空间。警惕"信息过载"（法思僭越，把访客当数据容器）和"言之无物"（诗心荒漠化，堆砌辞藻无实质）。

输出：信息架构文档（SITE.md）+ 核心价值主张 + 站点地图 + 内容分区

阶段四：视觉风格系统设计（诗心·觉）

目标：为网站设计极致美观的视觉风格系统——配色、字体、版式、视觉锚点、动效基调。这是"极致美观"的核心保障。

加载 references/visual-style-system.md 获取完整视觉设计方法论。

执行步骤：

1. 风格定位：根据类型与受众，选择视觉风格基调（参照风格体系）
2. 配色方案设计：
   - 确定主色（品牌色/主题色）、辅色、强调色、中性色（≤4种hex色）
   - 色彩心理学匹配：蓝=专业可信、红=热烈转化、绿=生机健康、金=尊贵品质、紫=创新高端、暖橙=活力亲切
   - 设计色彩分配比例（主色60%/辅色30%/强调色10%）
   - 考虑深色模式适配（可选）
3. 字体体系设计：
   - 标题字体 + 正文字体（≤2套字体家族）
   - 字号层级：hero大标题（48-72px）/区块标题（32-40px）/正文（16-18px）/辅助（14px）
   - 中文优先思源黑体/苹方/微软雅黑等系统字体栈，零外部字体依赖
4. 版式系统设计：
   - 栅格系统（12栏 / 8点网格）
   - 区块节奏（hero/内容区/CTA区/页脚的标准间距）
   - 留白原则（呼吸感，常规区块留白充足）
5. 视觉锚点设计：
   - 每屏至少1个视觉锚点（大图/大数字/强对比色块/SVG图形）
   - 首屏用hero级视觉（≥40%主视觉 或 大字号价值主张）
6. 动效基调设计：
   - 动效风格（克制优雅/活力灵动/科技感/无动效）
   - 动效清单（滚动渐入/悬停反馈/数字滚动/视差/转场）
   - 性能原则：CSS动画优先，避免重JS动效
7. 使用 assets/visual-design-template.md 输出 DESIGN.md 视觉设计文档
8. 与用户确认视觉风格

哲学校验：视觉设计须为诗心预留空间——美不是装饰，而是让内容"被看见"的通道。警惕"视觉堆砌"（和想象力缺失，用华丽掩盖空洞）和"美而不达"（法思僭越，形式压倒内容）。

输出：视觉风格系统（DESIGN.md）+ 配色方案 + 字体体系 + 版式系统 + 动效基调

阶段五：功能模块规划（法思·觉）

目标：为网站规划功能齐全的模块体系——确保网站在功能完备性上达到极致标准。

执行步骤：

1. 功能需求盘点：基于类型与受众，确定必备功能与可选功能
2. 功能模块规划（按需选择）：

3. 技术实现路径选择：

4. 图标与图形方案：SVG内联图标（零依赖），不引外部图标库
5. 数据与内容方案：判断哪些内容需要联网采集（阶段五协同 super-all-around-info-miner）
6. 使用 assets/function-plan-template.md 输出功能规划文档

哲学校验：功能须服务于价值——功能齐全不等于功能堆砌。每个功能都要回答"它为访客创造了什么价值"。警惕"功能冗余"（法思僭越，为炫技而加功能）和"功能缺失"（诗心荒漠化，忽视访客的真实操作需求）。

输出：功能模块规划 + 技术实现路径 + 数据采集方案

阶段六：逐区块内容脚本设计（法思·觉）

目标：将信息架构细化为逐区块的内容脚本——每个区块的标题、文案、视觉元素、交互逻辑。

执行步骤：

1. 逐区块脚本设计：为每个区块设计：
   - 区块角色（hero=首屏冲击/feature=功能特性/social-proof=信任背书/cta=转化引导/footer=页脚）
   - 区块标题（一句话，含价值，有力）
   - 核心文案（精简、口语化、说人话，避免官腔空话）
   - 视觉元素（大图/图表/图标/大数字/色块/SVG图形）
   - 交互逻辑（点击/悬停/滚动/表单提交后的行为）
2. 区块衔接设计：每个区块结尾与下一区块开头的逻辑衔接（递进/转折/呼应）
3. 转化路径设计：
   - 首屏CTA → 价值证明 → 再次CTA → 行动页/表单
   - 确保每个转化意图区块都有明确的行动入口
4. 文案创作原则：
   - 主标题：一句话价值主张，动词开头，有力
   - 副标题：补充说明，一句话，具体
   - 正文：精炼，扫读友好，每段不超过3行
   - CTA文案：具体动词（"立即预约""免费试用""联系我们"），非"点击这里"
5. SEO与元信息设计：title/description/keywords/OG标签文案
6. 输出完整的逐区块内容脚本（可写入SITE.md的逐区块部分）

哲学校验：逐区块设计须遵守"一屏一价值"——每个区块只承载一个核心信息，访客扫一眼就能抓住重点。警惕"一屏塞满"（法思僭越，信息贪多）和"空无一物"（诗心荒漠化，只有标题没有内容）。

输出：逐区块内容脚本（含每区块标题、文案、视觉元素、交互逻辑）

阶段七：网站构建实现（和想象力·行）

目标：将SITE.md与DESIGN.md转化为真实可运行的网站——这是从"方案"到"成品"的关键一跳。

执行步骤：

1. 构建准备：
   - 读取 SITE.md（信息架构）+ DESIGN.md（视觉设计稿）+ 功能规划文档
   - 确定技术路径（单文件/多文件/数据驱动）
2. 核心构建规范（严格执行）：
   - 单文件优先：优先产出单文件HTML，所有CSS/JS内联，零外部依赖
   - 响应式：移动端优先设计，断点适配平板与桌面
   - SVG图标：图标与图表全部用内联SVG，不引外部图标库/图表库
   - 语义化：使用 header/nav/main/section/article/footer 等语义标签
   - 无障碍：alt文本、ARIA标签、键盘可达、对比度达标
   - 性能：CSS动画优先、图片懒加载、避免重资源
   - 配色一致：严格遵循DESIGN.md的≤4种hex色与≤2套字体
3. 逐区块实现：按SITE.md顺序实现每个区块，保持风格一致性
4. 配图前置：若需要图片，先完成生图流程（ImageGen工具）或使用SVG插画替代
5. 交互实现：表单校验、导航切换、动效、锚点滚动等交互逻辑
6. SEO与元信息写入：title/description/OG标签/结构化数据
7. 本地预览验证：构建完成后在浏览器打开验证渲染效果

哲学校验：构建过程是"和想象力"的实践——在DESIGN.md的约束内，为每个区块创造独特的视觉表达，而非机械套模板。每个区块都应是有呼吸的、有生命的设计，而非流水线产物。

输出：完整网站文件（index.html 或 多文件项目）

阶段八：部署发布与验证（法思·行）

目标：将构建完成的网站部署上线，并验证线上运行效果。

执行步骤：

1. 部署方式选择：

2. CloudStudio部署执行（需要公网链接时）：
   - 通过 ToolSearch 加载 workbuddy_cloudstudio_deploy 工具schema
   - 使用 DeferExecuteTool 调用，传入站点目录
   - 获取访问URL
3. 部署后验证：
   - 链接可访问性检查
   - 移动端/桌面端渲染检查
   - 交互功能验证（表单/导航/动效）
   - 响应式断点验证
4. 告知用户：部署成功后在交付说明中告知用户可从「设置 - 数据管理 - 我发布的应用」管理已发布应用（加粗展示）

输出：部署完成的访问链接 + 本地文件 + 验证报告

阶段九：极致品质审核与交付（致一而行）

目标：完成网站的最终品质审核、优化建议与巅峰交付。

执行步骤：

1. 五维极致品质自检：

2. 关键问题修复：
   - 首屏是否3秒抓住注意力？
   - 核心价值主张是否清晰？
   - 转化CTA是否明确有力？
   - 移动端体验是否流畅？
3. 优化建议输出：标注可人工深度优化的具体点与方向
4. 最终交付：
   - 确认网站文件已生成/部署完成
   - 输出交付说明（文件位置/访问链接、站点类型、视觉风格、核心价值主张、优化建议）

输出：完整网站（文件+部署链接）+ 五维品质自检报告 + 优化建议

五维哲学安全校验（网站建构特化版）

每个网站完成后，执行五维安全检测。详见 references/philosophical-quality-framework.md。

维度1：法思僭越检测

• 网站是否将"流量""转化率""SEO排名"作为唯一准则，忽视人的维度？
• 网站是否堆砌数据与术语，却回避了真实的价值承诺？
• 网站是否将复杂的价值判断简化为漂亮的转化漏斗，制造虚假的确定性？
• 边界设定：数据与转化服务于人的价值与福祉，而非用数据的外衣掩盖空洞。

维度2：诗心荒漠化检测

• 网站是否有真正的温度？是否真诚地对待访客？
• 文案是否沦为空洞的官腔，丧失了真实的沟通力？
• 是否"看见"了访客的处境、关切与焦虑？
• 边界设定：每个区块必须为诗心预留空间。表达服务于沟通，而非表演。

维度3：和的想象力缺失检测

• 网站是否陷入了非此即彼的二元对立？
• 是否为访客的问题提供了超越现有框架的创造性方案？
• 视觉与交互是否只有一种套路，缺乏突破性思考？
• 边界设定：内容与视觉都须为和的想象力保留生成空间。

维度4：神-物固化检测

• 网站是否在固化刻板印象？（性别/地域/职业/群体的刻板标签）
• 网站是否在制造或强化权力不对称？
• 网站是否将访客从主体降格为被操纵、被转化的客体？
• 边界设定：网站不得制造或强化神-物固化结构，须尊重访客作为主体的判断力。

维度5：聚合-舒展节律检测

• 信息密度是否张弛有度（有高能区块也有呼吸区块）？
• 是否避免全程高能导致审美疲劳？
• 是否避免全程平淡导致注意力流失？
• 边界设定：整站的信息密度曲线应是一次完整的呼吸。

安全熔断机制

快速响应流程（六阶段压缩版）

当用户有紧迫时效要求时，压缩九阶段为六阶段：

1. 阶段一（压缩）：一句话种子解析 + 类型锚定（合并原阶段一、二）
2. 阶段二（压缩）：信息架构设计（原阶段三，简化信息密度曲线）
3. 阶段三（压缩）：视觉风格定位（原阶段四，只定配色+字体+版式基调）
4. 阶段四（压缩）：功能规划+逐区块脚本（合并原阶段五、六）
5. 阶段五（压缩）：网站构建+部署（合并原阶段七、八）
6. 阶段六（压缩）：品质审核+交付（原阶段九）

快速通道全程最多与用户确认2次（开局确认方向+最终交付）。

单模块直调路由

当用户只需某一模块产出时，按以下路由直接执行对应阶段：

资源索引

参考文档（references/）

模板文件（assets/）

输出目录结构

网站建构过程中在用户指定的工作目录下建立以下结构：

[网站项目名]/
├── SITE.md              # 信息架构文档（站点地图、价值主张、逐区块要点）
├── DESIGN.md            # 视觉设计文档（配色、字体、版式、动效基调）
├── index.html           # 网站主文件（单文件路径）或多文件入口
├── styles.css           # 样式文件（多文件路径）
├── script.js            # 脚本文件（多文件路径）
├── assets/              # 静态资源（图片等）
└── 其他页面.html         # 多页站点的其他页面

使用示例

示例一：一句话创作产品落地页

用户输入：
> "帮我们新出的AI写作工具做一个落地页，要能收集用户邮箱"

执行路径：
1. 阶段一解析：主题种子=AI写作工具推广、价值指向=收集潜在客户邮箱、情感基调=科技+专业、类型暗示=产品落地页
2. 阶段二确定：落地页类型、受众=内容创作者/职场人、场景=移动端+桌面、规模=单页
3. 阶段三架构（价值递进）：首屏价值主张→产品功能→用户案例→定价/CTA→邮箱订阅表单
4. 阶段四视觉：科技蓝+紫色强调、现代简洁、大标题+产品截图视觉锚点
5. 阶段五功能：响应式、导航锚点、邮箱订阅表单（前端校验）、滚动渐入动效、SEO
6. 阶段六逐区块脚本：hero/feature/social-proof/pricing/cta/footer逐一设计
7. 阶段七-九：构建单文件HTML + CloudStudio部署 + 品质审核

预期输出： 单文件落地页（含邮箱收集表单）+ 部署链接 + 品质报告

示例二：一句话创作个人作品集

用户输入：
> "给我做一个个人作品集网站，我是插画师，展示我的插画作品"

执行路径：
1. 阶段一解析：主题种子=插画师作品展示、价值指向=获得合作机会、情感基调=创意+艺术、类型暗示=个人作品集
2. 阶段二确定：作品集类型、受众=潜在客户/雇主、场景=全端响应式、规模=3-5页
3. 阶段三架构（信任建立）：关于我→作品展示→合作经历→联系方式
4. 阶段四视觉：艺术风格、暖色系、大图作品展示、留白充足
5. 阶段五功能：图库/作品筛选/关于页/联系表单/动效
6. 阶段六逐区块脚本：hero/about/works/experience/contact逐一设计
7. 阶段七-九：构建 + 部署 + 品质审核

预期输出： 作品集网站（含作品图库+联系表单）+ 部署链接 + 品质报告

示例三：一句话创作餐饮门店站

用户输入：
> "给我们咖啡店做个网站，要有菜单和预约功能"

执行路径：
1. 阶段一解析：主题种子=咖啡店线上展示、价值指向=吸引到店+预约、情感基调=温暖+治愈、类型暗示=餐饮门店站
2. 阶段二确定：餐饮门店类型、受众=周边顾客、场景=移动端优先、规模=3-5页
3. 阶段三架构：首屏氛围→门店故事→菜单展示→环境图→预约/定位
4. 阶段四视觉：暖棕+奶白配色、温馨质感、大图环境氛围
5. 阶段五功能：菜单标签页/预约表单/地图定位/响应式
6. 阶段六逐区块脚本：hero/story/menu/gallery/reservation/footer逐一设计
7. 阶段七-九：构建 + 部署 + 品质审核

预期输出： 餐饮门店站（含菜单+预约表单）+ 部署链接 + 品质报告

多会话创作说明

复杂网站项目可能跨多会话完成。本技能支持多会话续建：
- 每次会话开始时，读取项目目录中的SITE.md、DESIGN.md和构建进度
- 确认当前构建进度（已完成到第X阶段）
- 从断点处继续构建
- 每次会话结束时更新进度文件

限制说明

• 本技能生成的是"极致网站成品 + 优化建议"，用户可在成品基础上进行个性化微调
• 网站构建遵循零外部依赖原则——不依赖CDN、外部框架、外部字体，确保离线可用与性能
• 数据采集遵循真实性原则——不编造数据，信息不足时明确提示用户补充
• CloudStudio部署需用户确认，部署后可通过设置菜单管理
• 本技能遵循"绝无彼岸"原则——追求此刻最好的网站，而非完美的网站
• 一切创作判断皆受"言语无相"原则约束——技能自身也需接受五维边界的检验
• 视觉素材（图片等）的使用须避免版权风险与刻板印象
• 本技能可与"国漫创世天团"等专家互补——当需要多Agent团队协作时可结合使用，本技能提供完整的独立创作能力