Website Studio

website-studio 不是页面模板，也不是某个框架的脚手架。它是一套让不同 Agent 在不同工具条件下，都能完整走完建站流程的工作方法：先理解用户任务，再选择网站配方、比较设计方向、完成真实实现，并用可复核证据交付。

8 类网站配方 · 4 类能力配方 · 4 个执行适配器 · 3 个原创示例 · 6 个确定性验证器

开始阅读 Skill · 跨 Agent 配置 · 查看示例 · 了解质量门槛

目录 / Contents

• 为什么需要 Website Studio
• 适用场景
• 七阶段工作流
• 运行架构
• 快速开始
• 跨 Agent 使用
• 原创示例
• 质量门槛与验证
• 包结构
• 能力边界与免责声明

为什么需要 Website Studio / Why Website Studio

很多 Agent 能生成一个漂亮首屏，却容易漏掉真实内容、错误状态、移动端、键盘操作、部署路径或公开访问验证。Website Studio 约束的不是一种审美，而是一条完整交付链。

它不会让所有网站长得一样。相反，它要求视觉系统从产品任务、主题、受众和内容本身生长，并拒绝没有理由的通用渐变、万能卡片和装饰性界面。

适用场景 / Website Archetypes

每个项目选择一个主配方，最多加入一个辅助配方。不要为了显得“功能很多”而把所有模块混成一个万能页面。

两条执行路径

• Simple path：适合内容型、一到少量页面、轻交互且不需要持久数据、登录、上传或外部连接器的网站。
• Capability path：适合数据库、身份、上传、外部数据、写操作、私有内容和复杂工作流。

两条路径的区别是架构复杂度，不是质量等级。两者都必须完成响应式、无障碍、真实构建和视觉验收。

七阶段工作流 / Seven-Gate Workflow

当一个高影响设计决策尚未明确时，Agent 会比较恰好三个使用相同内容、视口和媒介的方案；最多进行四轮连续选择。用户已经给足方向或授权 Agent 决定时，流程会直接推进，不制造无意义的选择题。

运行架构 / Architecture

flowchart LR
    A["User Request"] --> B["1 Brief<br/>2 Design<br/>3 Content"]
    B --> C{"Simple or<br/>Capability"}
    C -->|Simple| D["4 Build"]
    C -->|Capability| E["5 Data · Auth<br/>Uploads · Connectors"]
    E --> D
    D --> F{"Adapter"}
    F --> G["Sites · Existing Project<br/>Static · Framework"]
    G --> H["6 Build + Browser QA<br/>+ Access Checks"]
    H --> I["7 Verified URL<br/>or Honest Handoff"]

Recipe 决定“做什么体验”，Capability 决定“需要什么后端能力”，Adapter 决定“在当前 Agent 和项目条件下如何实现”。

快速开始 / Quick Start

1. 获取完整 Skill

git clone https://github.com/Do-fei/website-studio-skill.git website-studio

也可以从 Releases 下载归档。请保留整个目录结构，并确保最终 Skill 目录名是 website-studio；Agent 会从 SKILL.md 开始，再按需加载 recipe、reference 和 adapter。

2. 安装或提供给 Agent

将完整文件夹放入 Agent 支持的 Skills 目录。不同 Agent 的目录、发现方式和项目规则不同；不支持原生 Skills 时，可以把本仓库作为项目资料提供。

查看完整的跨 Agent 安装与调用指南 →

3. 发起第一个任务

使用 website-studio，为我的产品制作一个完整官网。

请先判断：
1. 主网站配方；
2. Simple path 还是 Capability path；
3. 当前 Agent 可用的浏览器、数据和部署能力。

完成设计、实现、桌面与手机验收，并先交付私有预览；
未经我确认不要公开发布。

Skill 本身没有运行时依赖；附带的确定性验证器需要 Node.js 20+，且不依赖第三方 npm 包。

跨 Agent 使用 / Cross-Agent Usage

Website Studio 的可移植性来自能力路由和诚实降级，不是因为它假设所有 Agent 都拥有相同工具。

查看各类 Agent 的安装、触发和上下文配置 →

原创示例 / Examples

三个示例均使用原创布局与虚构内容，用来展示方法，不是要求复制的固定主题。下方图片是为 README 制作的原创矢量预览；可运行示例保存在对应目录。

Launch Site	Dashboard	Editorial Story
Landing Page · Simple path价值层级、CTA、证据和移动端节奏	Dashboard · State-rich UI指标层级、图表、表格及成功／加载／空／错误状态	Editorial Story · Narrative system长页叙事、图像节奏、来源和媒体边界

每个示例都带有自己的 site-quality.config.json，可用于理解路由、关键文本、资源、视口和访问模型如何进入验证流程。

质量门槛与验证 / Quality & QA

“构建成功”“视觉正确”“已经上线并可访问”是三种不同证据。Website Studio 不允许它们互相替代。

验证本包

npm test

验证一个网站项目

node scripts/inspect-project.mjs /path/to/project
node scripts/validate-config.mjs /path/to/site-quality.config.json
node scripts/validate-export.mjs --config /path/to/site-quality.config.json
node scripts/audit-media.mjs --manifest /path/to/media-manifest.json --release-mode public
node scripts/validate-deployment.mjs https://example.com/ --config /path/to/site-quality.config.json

自动验证不能替代浏览器检查。视觉层级、首屏理解、图片焦点、文字换行、触控、键盘、文本缩放、降低动态效果以及动态错误状态，仍需要真实页面证据。

包结构 / Package Map

website-studio/
├── SKILL.md          # 七阶段主工作流
├── references/       # 发现、设计、内容、实现、安全、QA 与发布规则
├── recipes/          # 8 类网站配方 + 4 类能力配方
├── adapters/         # Sites、现有项目、静态、通用框架
├── assets/           # Brief、矩阵、tokens 与中性页面 shell
├── scripts/          # 确定性检查工具
├── examples/         # 3 个原创、可运行示例
├── tests/            # 路由与验证器测试
├── THIRD_PARTY.md    # 第三方内容与责任边界
└── LICENSE           # MIT

Agent 不需要一次读完所有文件：先读 SKILL.md，再加载一个网站配方、必要能力配方和一个执行适配器。

能力边界与免责声明 / Boundaries & Disclaimer

• Website Studio 不是托管服务、数据库、身份提供商、连接器或浏览器。
• Skill 不会自动获得账号、凭据、外部写入权限或公开发布授权。
• 没有浏览器时可以完成构建与静态检查，但不能声称完成真实视觉验收。
• 没有部署工具或权限时，应交付已验证产物和部署清单，不能虚构网址。
• 安全、隐私、来源和版权说明属于工程工作流，不替代专业法律或安全审计。
• 公开可见、可搜索或非商业使用，不等于获得复制、修改或再分发许可。
• 本仓库的原创说明、模板、示例和代码使用 MIT License；用户项目中的品牌、数据、媒体和第三方依赖继续受各自条款约束。
• 详细的第三方内容边界见 THIRD_PARTY.md。

Website Studio 的目标不是让每个网站看起来一样，而是让不同 Agent 都能以同样诚实、完整和可验证的方式把网站做好。

从 SKILL.md 开始 · 下载最新 Release · 跨 Agent 配置 · 故障排查