零代码静态网站生成与部署
给非开发者/普通人用的"建站流水线"：从一句话需求，到能访问的线上地址，全程不碰服务器、不碰数据库、不用买域名。
何时用
- 想给自己 / 朋友 / 对象 / 孩子 / 社团 / 班级 / 小店 / 公司快速做一个网站：个人博客、个人主页、官网/公司主页、落地页 Landing Page、活动信息页/活动报名页、电子请柬/婚礼邀请函、生日页、纪念日/表白页、成长记录/宝宝相册、作品集 Portfolio、线上简历 CV、接单页/报价页、课程介绍页、社团班级主页、小店菜单页/品牌页、照片墙、读书笔记页、贺卡页、帮助中心/FAQ 页、文档站、单页 H5……
- 用户说法常为："帮我做个网站/网页/页面/H5""用 AI 建站""不会代码怎么做网站""零基础建站""小白建站""做个官网"。
- 明确不想学服务器、域名、数据库，希望"说清楚要什么 → 拿到能访问的链接"
- 希望免费部署上线
不适用：需要后端逻辑、用户登录、数据库、动态数据、在线表单收集（纯静态无法直接存数据，见下方"边界"）的站点。
核心原则
- 纯静态优先：HTML/CSS/JS 三件套，能部署到任意静态托管，零运维。
- 先澄清再动手：非开发者说不清需求，先让 agent 提问（用途 / 页面 / 素材 / 风格 / 目标设备与浏览器），比硬猜准得多。
- 风格靠描述，不靠 skill 堆砌：用自然语言把"想要什么视觉"说清楚，底层 superpowers 元技能会自动路由到合适的设计能力（如
design-taste-frontend）。 - 部署走最稳通道：优先 WorkBuddy 原生「发布为应用」，零凭证零命令行。
- 质量为先，系统化而非套壳：本技能是「澄清→规范→代码→审查→部署」完整流水线，目标是产出视觉专业、响应式、移动端好用、可直接上线的站点，不是堆一个模板网页。每一步都有验收点（见「质量基准」），不满足就回头改，不将就上线。
- 选型跟着最低兼容目标走，不跟着最新特性走：动手前先锁定"主要给电脑看 / 手机看 / 都要"，以及"用户可能用什么浏览器打开"。目标设备与浏览器内核版本直接决定技术选型（尤其 CSS 框架）——宁可少点炫技，也要让最弱的设备开得出、看得清。详见下方「目标设备与浏览器兼容性」。
目标设备与浏览器兼容性（动手前必锁定，直接决定选型）
纯静态站"能跑"不等于"在所有用户设备上都对"。目标设备 + 浏览器内核版本是动手前就要问清的决策，它直接决定技术选型（尤其 CSS 框架），而不是生成完上线才发现安卓机样式全崩、再返工。完整决策树与降级方案见 references/browser-compat.md。
1. 先确认目标设备
- 仅电脑（PC）：可用更宽布局、hover 交互、信息密度高；可接受较新的 CSS 特性。
- 仅手机（移动端）：touch-first、竖屏单列、大点按区域、字号偏大；常见于单页 H5 / 请柬 / 活动页 / 分享到微信的页。
- 都要（响应式）：手机 / 平板 / 桌面三档断点都不溢出——本技能默认按"都要"产出，除非用户明确说只给某端。
2. 锁定浏览器内核基线（最容易被忽略的坑）
用户可能在低端安卓机 / 微信内置浏览器 / 系统自带浏览器打开，这些环境的内核往往是很老的 Chromium：
- 微信 iOS/Android 内置浏览器、大量安卓机自带 WebView，内核版本可能远低于你开发用的 Chrome。
- 典型翻车案例：用 Tailwind CSS v4 生成的站点，在安卓低版本 WebView 上样式大面积崩坏。原因：v4 依赖现代 CSS 特性（@layer 原生层叠、oklch() 颜色、color-mix()、@property 等），需要较新渲染内核（约 Chrome 111+）；很多安卓机系统 WebView 仍停留在 Chrome 90~100 区间，解析不了 → 布局全乱。
- 对策（按兼容要求分级）：
| 兼容要求 | 选型建议 |
|---|---|
| 只给最新 Chrome / Safari / Edge（PC 为主） | Tailwind v4 可用，享受新特性 |
| 要覆盖安卓中低版本 / 微信内置 / 老旧 WebView | 降级到 Tailwind v3（编译期产出标准 CSS，不依赖运行期内核新特性），或纯手写 CSS + autoprefixer + 保守语法 |
| 完全不确定用户设备 | 默认 Tailwind v3 或纯 CSS，宁保守不冒险 |
- 微信分享是高频场景：站点常通过微信群/朋友圈传播，等于"必须能在安卓低版本 WebView 上正常显示"——默认按"都要 + 微信内置可开"来兜底最稳。
> 原则：选型跟着最低兼容目标走，不跟着最新特性走。详见 references/browser-compat.md（含内核版本对照、Tailwind v4→v3 降级步骤、兼容性自检方法）。
质量基准（Quality Baseline · 上线前的镜子）
产出必须达到以下标准才算合格。每一步有验收点，不满足就回头改，不将就发布。
视觉（好看）
- 配色协调、有主色/辅色/背景三层，不用刺眼纯色块铺满
- 字体层级清晰：标题 / 小标题 / 正文 / 注释至少 3 档字号区分
- 留白充足，内容不挤边；卡片 / 分隔有节奏感
- 有细节质感：hover 反馈、过渡动画、图标或插画点缀（非必需但加分）
技术（能跑、快、兼容）
- 语义化 HTML（header/nav/main/section/footer），无裸 <div> 堆砌
- 响应式：手机 / 平板 / 桌面三档断点都不溢出、不错位
- 浏览器内核兼容：在最低目标内核（如安卓低版本 WebView / 微信内置浏览器）下样式不崩、不溢出；若用 Tailwind v4 须确认目标内核 ≥ 所需版本，否则降级 v3 或纯 CSS
- 无控制台报错、无死链、无外链失效资源
- 不引入重型框架，单页体积可控（首屏资源建议 < 1MB）
- 图片用合适尺寸与格式（优先 webp / 压缩后的 jpg），不丢原图大文件
内容可读性（易懂）
- 行宽适中（正文每行 40–75 字符），段落有呼吸感
- 关键信息一眼可见（首屏能看清"这是谁的、是干什么的"）
- 中文排版正常（标点、字间距、中英文混排不别扭）
无障碍（普适）
- 文字与背景对比度达标（正文 ≥ 4.5:1）
- 按钮 / 链接可键盘聚焦，有可见焦点样式
- 图片有 alt 文本，装饰图标记 aria-hidden
上线就绪（SEO / 分享）
- 每个页面有准确 <title> 与 <meta name="description">
- 社交分享有 og:title / og:description / og:image（分享到微信 / 钉钉 / 群聊不乱码）
- 有 favicon，无 404 资源
场景质量侧重（不同站点，质量优先级不同）
同一套流水线，但质量检查的重点随场景变化。生成前先对齐"这一版最该像什么"：
| 场景 | 第一优先级 | 质量检查侧重 |
|---|---|---|
| 个人博客 / 读书笔记 | 阅读体验 | 排版舒适、行宽、代码块样式、目录/分页 |
| 落地页 / Landing Page | 转化钩子 | 首屏价值主张清晰、CTA 按钮醒目、加载快 |
| 作品集 / Portfolio / 摄影 | 视觉冲击 | 大图质感、留白、动效克制、首屏惊艳 |
| 线上简历 / CV | 信息清晰 | 一屏读完核心、层次分明、可打印友好 |
| 电子请柬 / 生日 / 表白 | 氛围与情绪 | 主题统一、配色有温度、移动端温馨、轻动效 |
| 活动页 / 报名说明 | 信息获取 | 时间地点醒目、步骤清晰、联系方式可见 |
| 官网 / 公司主页 | 专业可信 | 品牌一致、结构完整、响应式无错 |
| 帮助中心 / FAQ / 文档站 | 检索与导航 | 分类清晰、锚点跳转、搜索友好 |
> 用法：第 0 步澄清时就把"场景类型"确认下来，第 1 步风格规范与第 3 步审查都对照上表侧重项收紧。
五步流程
第 0 步 · 需求澄清（先问后做）
让 agent 先向你提问，确认后再生成。提示词模板见 references/workflow.md §0。务必把"目标设备 + 浏览器"问清楚（见 references/browser-compat.md）。
第 1 步 · 风格设计
把风格描述清楚，让底层 design skill 出一份可验收的视觉规范——至少覆盖「质量基准·视觉」里的配色三层 / 字体层级 / 留白节奏 / 组件样式，并给出首屏与内页、手机与桌面的排布说明，先不写代码。模板见 references/workflow.md §1。
第 2 步 · 产出静态代码
生成纯静态多文件网站（HTML/CSS/JS），无后端、无数据库、无构建工具，双击能开、能直接托管；代码须满足「质量基准·技术」的语义化、响应式与浏览器内核兼容要求；CSS 框架选型须对照第 0 步锁定的设备/浏览器基线（需兼容安卓低版本/微信内置则 Tailwind v3 或纯 CSS）。模板见 references/workflow.md §2。
第 3 步 · 质量审查（对照质量基准全维度）
不依赖外部审查 skill，按「质量基准」全维度过一遍：视觉 / 技术 / 内容可读性 / 无障碍 / 上线就绪（SEO·分享）/ 浏览器兼容，并对照「场景质量侧重」表把本场景的优先级项收紧。模板见 references/workflow.md §3。
> 注：smart-code-review 在 SkillHub 实测查无此 skill，不要调用；质量审查由 agent 直接走。不合格项必须修复后再进第 4 步。
第 4 步 · 部署上线
见下方"部署通道"。优先 WorkBuddy 原生「发布为应用」。模板见 references/workflow.md §4。
部署通道（⚠️ 状态会随时间变化，发布前先确认）
| 通道 | 状态（2026-09-15 实测） | 说明 |
|---|---|---|
| WorkBuddy 发布为应用 | ✅ 最稳 | 零凭证、零命令行，原生支持多文件目录，一键出 *.app.workbuddy.host 地址 |
| 云开发 CloudBase | ⚠️ 需登录 | 先 tcb login 授权，否则 tcb env list 报无有效身份；CLI 比原生发布重 |
| Vercel / Netlify / Cloudflare Pages | ✅ 一行命令 | vercel --prod / netlify-cli / wrangler |
EdgeOne 技能（edgeone） |
❌ 当前不可用 | mcp-on-edge.edgeone.app 只剩 Next.js 演示，无 MCP 端点，SKILL.md 命令连不到真实服务，不要用 |
> 纯静态存不了数据：想做"信息收集 / 报名"类站点，静态页只能负责展示 + 引导，真正存数据得再接表单工具（如在线问卷 / 表格），别一上来奔数据库去。
边界与避坑
- 纯静态 ≠ 什么都能做：登录、存用户数据、后台管理都不行。需求若涉及这些，先拆出"能静态化的部分"做出来，动态部分另接服务。
- 别堆砌设计 skill：风格靠描述驱动即可，superpowers 会自动路由；不要手动
/xxx调一堆 UI skill。 - 部署通道会过期：上面的状态是 2026-09-15 实测，发布前用
curl探一下目标链接是否可达，或重新走一遍登录。 - 正文与链接一致：若对外声称用某平台部署，线上地址必须同源，否则"穿帮"损害可信度。
- 兼容性坑在动手前：Tailwind v4 等现代 CSS 框架在安卓低版本 WebView / 微信内置浏览器可能大面积崩样式，务必在第 0 步锁定浏览器基线、第 2 步按基线选型（详见
references/browser-compat.md）。
关联技能
design-taste-frontend（综合均衡设计，视觉质量的核心保障：anti-slop，避免廉价模板感）、UI UX Pro Max（求稳）、emil-design-eng（要动效）—— 由 superpowers 自动路由，无需手动调用code-review-checklist-helper—— 第 3 步质量审查可参考其维度，结合本技能「质量基准」使用xhs-creator-account-doctor—— 若用于小红书发布，做违禁词扫描（见references/xhs-compliance.md）html-to-png-image-cards—— 若需生成发布配图（如国潮guochao风格）
范例
完整可复现范例（水墨风个人博客）见 references/example-ink-blog.md：含第 0~4 步实际提示词、部署结果、配图方案。该范例即本 skill 的设计来源。
