企业官网建设流程全解析

构建 AI 驱动的 Web 界面规范审查技能：OpenMontage 中 web-design-guidelines 技能的工作流设计与实战

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

OpenMontage 在.agents/skills/web-design-guidelines/SKILL.md中封装了一个面向 AI 编程助手的「Web 界面规范合规审查」技能：当用户说出 "review my UI"、"check accessibility"、"audit design" 等意图时，Agent 会动态拉取最新规则、读取目标文件、逐条比对并输出file:line格式的审查结论。本文以该 SKILL.md 为骨架，结合仓库内的技能生态与源码，讲解这类「审查型 Agent 技能」的设计要点，并给出可直接复用的落地模式。

技能是什么：一份可被 Agent 加载的「审查协议」

web-design-guidelines技能位于仓库 .agents/skills/web-design-guidelines/SKILL.md。它的职责不是提供一套固定的 CSS 或组件规范，而是定义一套让 Agent 执行 UI 合规审查的协议：何时被触发、按什么顺序执行、依据什么规则、以什么格式输出。这使该技能与仓库内其他「知识型」技能形成互补——知识型技能告诉 Agent「怎么做对」，而审查型技能告诉 Agent「怎么检查别人做对了没有」。

从 skills/INDEX.md 的 Layer 3 技能清单可以看到，该技能被归类在Design类别下（第 325 行），与tailwind-design-system、vercel-react-best-practices、vercel-composition-patterns同组，来源标注为wshobson/agents、vercel-labs/agent-skills系技能集。这一归类说明审查型技能在项目中的定位：它服务于 UI/前端产出物的质量关口，而非某个具体渲染管线的运行时组件。

Frontmatter：技能的「自我介绍」与触发契约

SKILL.md 顶部是标准的 YAML frontmatter，它是 Agent 理解技能边界的第一份元数据：

其中description是最关键的设计点：它显式枚举了"review my UI"、"check accessibility"、"audit design"、"review UX"、"check my site against best practices"五类触发表达。这种「触发词枚举式」写法在 OpenMontage 的技能体系中是通用惯例——例如同目录的 tailwind-design-system/SKILL.md 同样在 description 中声明了「component libraries / design tokens / responsive patterns」等触发场景。将用户可能的自然语言请求显式写入描述，能显著提升 Agent 的意图匹配准确率，避免「用户要审查 UI，Agent 却去生成 UI」的误路由。

四步审查工作流：从拉取规则到输出结论

SKILL.md 将整个审查过程压缩为四步（How It Works 一节）：

1. Fetch the latest guidelines：从文档声明的远程来源获取最新版 Web Interface Guidelines；
2. Read the specified files：读取用户指定的文件（或提示用户给出文件/模式）；
3. Check against all rules：将文件逐一对照拉取到的全部规则；
4. Output findings：以file:line紧凑格式输出问题清单。

这套「先拉规则、再读文件、后比对、最后结构化输出」的流程是一个可复用的审查型技能模板，每一步都值得展开推敲。

第 1 步：每次审查前动态获取最新指南

SKILL.md 明确要求「Fetch fresh guidelines before each review」，并把规则源地址硬编码在文档的 Guidelines Source 小节。这种设计有两点深意：

• 规则时效性：Web 可访问性、设计最佳实践在持续演进。若把规则快照进技能文件，技能会随仓库老化；运行时拉取则保证 Agent 永远基于最新规则审查。
• 单一事实来源：规则由上游维护方集中维护，技能本体只保留「去哪里取规则」的地址与「怎么用规则」的流程，两者解耦。

在 OpenMontage 的技能生态中可以观察到同样的分层思路：例如vercel-react-best-practices的 SKILL.md 将SKILL.md声明为「可加载的入口与权威」，把 65 条规则的完整长文放在同目录AGENTS.md与rules/子目录中按优先级分层——入口文件只管「怎么加载、什么时候用」，规则内容独立存放。web-design-guidelines则更进一步，把规则内容整体外置为远程资源，只保留获取与执行协议。

第 2～3 步：定位目标文件并逐条比对

审查的输入是<file-or-pattern>（与 frontmatter 的argument-hint呼应），即单个文件路径或 glob 模式。Agent 需先读取这些文件，再依据拉取的规则逐条核对。这里的隐性要求是：规则集必须可枚举、可判定，否则 Agent 无法稳定产出「通过/不通过」的结论。这也是为什么 Web Interface Guidelines 这类面向机器消费的规则文档强调结构化输出格式——SKILL.md 第 4 步的「output format instructions」即由拉取内容附带下发，规则与输出契约打包在一起，避免技能与规则版本错位。

第 4 步：file:line紧凑输出契约

审查结果采用 terse 的file:line格式（如src/components/Button.tsx:42）。这个选择对 Agent 工作流意义重大：

• 机器可消费：file:line是编辑器、LSP、代码搜索工具通用的坐标格式，Agent 可直接据此定位并派发修改任务；
• 信息密度高：每条问题占用一行，便于在长对话中作为后续工具调用的参数传递；
• 与审查解耦：输出「问题在哪」，而不直接替用户改代码，把「是否修改、如何修改」的决策留给用户或下游技能。

OpenMontage 对「Agent 输出契约」的重视在测试层也有印证：仓库 tests/contracts/test_agent_instruction_integrity.py、tests/contracts/test_agent_skill_pointers.py 等契约测试专门校验技能文件的指向与指令完整性。可以推断，file:line这类输出格式约定同样属于「技能契约」的一部分——它决定了 Agent 审查结果能否被后续流水线直接消费。

无参数回退：交互兜底设计

SKILL.md 的 Usage 小节规定了一种回退路径：

If no files specified, ask the user which files to review.

即当用户未附带文件参数时，Agent 不应擅自猜测审查范围，而应主动向用户询问目标文件。这是一个易被忽视但实用的交互设计：审查型技能的输入边界直接影响结论有效性——对错误的文件集执行审查，产出再精确也没有意义。该回退逻辑与 frontmatter 中argument-hint: <file-or-pattern>形成闭环：提示告知调用方「应提供文件路径或模式」，回退则兜住「没提供时怎么办」。

在 OpenMontage 中的应用场景：审查项目内的真实 UI

该技能最直接的用武之地是 OpenMontage 自带的 Web UI。仓库中存在一批真实的浏览器端界面可供审查：

• backlot/ui/board.html 与配套的 backlot/ui/board.js、backlot/ui/board.css（看板界面）；
• backlot/ui/index.html（入口页）；
• tools/graphics/templates/threejs_world/index.html（3D 世界模板）；
• remotion-composer 下的 React 渲染组件（如 src/components/HeroTitle.tsx）。

审查时只需向 Agent 给出目标，例如要求「review my UI，检查 backlot/ui 目录下的界面」，Agent 便会按技能协议拉取最新指南、读取上述 HTML/CSS/JS、逐条核对并返回file:line问题清单。若审查对象涉及 Tailwind 类名或 React 组件，可叠加 Design 类别的姊妹技能协同工作：用tailwind-design-system校验设计令牌与响应式模式，用vercel-react-best-practices检查渲染性能，再用web-design-guidelines兜底可访问性与最佳实践。

复用这套模式：如何把「审查协议」移植到自己的项目

从该 SKILL.md 可以抽象出构建审查型技能的最小模板，适合在任何以 Agent 为核心的工程中落地：

1. 定义 frontmatter name: 技能名 description: 枚举触发词 + 声明用途 metadata.argument-hint: 声明输入参数形态 2. 声明规则来源 在文档中固定「每次审查前获取规则」的地址， 让规则与流程解耦，保证时效性 3. 定义审查流程 拉取规则 → 读取目标 → 逐条比对 → 结构化输出 4. 约定输出契约 采用 file:line 这类机器可消费的紧凑格式， 使结果能直接进入后续工具链 5. 设置无参数回退 缺少输入时主动询问用户，不擅自猜测审查范围

OpenMontage 的技能安装方式也值得借鉴：skills/INDEX.md 第 312 行说明所有技能存放于.agents/skills/，通过npx skills add管理，Claude Code 侧则经由.claude/skills/的符号链接访问。这意味着新增此类技能不侵入核心代码，仅需放入技能目录并在索引中登记即可被 Agent 发现。

小结

web-design-guidelines技能示范了一种与「知识型技能」互补的 Agent 能力形态：它不内置任何具体规则，而是通过 frontmatter 触发契约、动态规则拉取、四步审查流程、file:line输出契约与无参数回退，把「审查 UI 是否符合最新 Web 规范」这项任务变成 Agent 可稳定执行的工作流。对于任何希望让 AI 助手承接代码质量把关工作的团队，这套「审查协议型技能」的模式都具备直接的移植价值。

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage