技能说明
适用：需要跨 Codex、Claude Code、Cursor、GitHub Copilot、OpenCode 等 Agent 完成完整网页设计、实现、独立评审和浏览器验收的任务。仓库包含 17 项技能（1 个总协调 + 16 个专业技能），按需路由。核心能力：需求与参考拆解、视觉方向和设计系统、响应式实现、独立评审、无障碍 / 性能 / 浏览器实测。安装后建议开启新会话并用 $web-design-orchestrator 启动。边界：不保证获奖或转化提升；自动检查不能替代用户研究。完整验证需要 Node.js 20+、Python 3 和项目依赖；仓库内部评分不应当作外部验证。MIT 协议。GitHub 页面当前显示 8 stars（截至本次核对）。
关于此技能
World-Class Web Design OS 是面向网页与界面设计、实现和验收的跨 Agent 技能工作流，包含 1 个总协调技能和 16 个按需调用的专业技能。它按项目目标引导发现、参考拆解、视觉方向、设计系统、实现、独立评审、响应式处理、无障碍与性能检查、真实浏览器验收；不是组件库，也不强制所有项目采用同一种风格。
核心能力
分阶段、多技能协作
先澄清目标和用户任务，再按需调用设计发现、视觉方向、设计系统、前端实现、评审与验收等专业技能，控制每阶段启用数量。
把验收变成可检查证据
包含截图、键盘操作、无障碍、响应式溢出、控制台与动效偏好等检查思路，并将实现与独立评审分开。
跨 Agent 安装与路由
支持 Codex、Claude Code、Cursor、GitHub Copilot、OpenCode 和通用 Agent Skills 安装方式；按任务路由必要的技能，而非每次加载全部内容。
适用场景
完整网站或界面重设计
需要把业务目标、视觉路线、组件、交互、响应式实现和验收串成连续工作流。
解决“能生成页面但不知道哪里不对”
通过独立评审、AI 痕迹检查和浏览器证据找出结构、视觉、交互及技术问题。
多类网页项目
可用于内容型网站、产品界面、工业商业网站和数据体验等不同方向，按项目重新定视觉路线。
使用步骤
- 01
安装技能组
Codex 可运行 npx --yes github:Lrinvl1203/world-class-web-design-os install --agent codex；兼容 Agent 也可运行 npx --yes skills add Lrinvl1203/world-class-web-design-os -g。
- 02
开启新会话并给出目标
安装完成后开启新的 Agent 会话，以 $web-design-orchestrator 指定网站受众、目标和需要验证的设备。
- 03
按阶段设计与实现
先检查现有代码、素材和设计系统；必要时拆解参考并比较多种视觉方向，之后建立设计规则、实现并针对移动端重新组织。
- 04
独立评审并验收
让评审与实现分开，重新渲染后检查截图、键盘、无障碍、溢出和控制台；未通过时修复并复测。
常见问题
会保证页面获奖或提高转化吗？+
不会。仓库明确说明不保证获奖或转化提升；自动化检查是必要证据，不替代真实用户研究。
必须使用同一种视觉风格吗？+
不是。该工作流约束决策与验收流程而非固定皮肤；当方向未确定且范围允许时，会先提出几种有实质差异的路线。
支持哪些 Agent？+
仓库列出 Codex、Claude Code、Cursor、GitHub Copilot、OpenCode，以及通用 Agent Skills 安装方式。安装后新开会话以刷新技能发现。
完整验证需要额外依赖吗？+
需要运行完整验证时，仓库要求 Node.js 20+ 与 Python 3，并需按 README 安装依赖；只用工作流技能时应根据具体任务按需加载，不必默认跑完整套测试。
GitHub 热度和内部评分能代表用户验证吗？+
不能。当前 GitHub 页面记录为 8 stars；仓库示例中的设计分数是内部评估，README 将多项实测状态标为待用户或外部验证，不能等同于真实转化、用户研究或奖项结果。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/20
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx --yes skills add Lrinvl1203/world-class-web-design-os -g