首页
/
行业洞察
/
正文
INDUSTRY INSIGHT · 深度
GSD-2 内置技能解析:用 web-design-guidelines 对 UI 代码做 Web Interface Guidelines 合规审查
📅 2026/10/9 1:21:41
✍️ 爱科研究院
👁 阅读 3,247
人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载在 GSD-2gsd-2这个面向长时自治的元提示meta-prompting、上下文工程与规格驱动开发系统中代码审查类工作被拆解为一系列可插拔的技能Skills。其中web-design-guidelines 是一个专注于 Web 界面规范合规审查的内置技能当 Agent 被要求review my UIcheck accessibilityaudit designreview UXcheck my site against best practices时它会拉取最新版 Web Interface Guidelines按规则逐条核对指定文件并以file:line的简洁格式输出审查结论。读完本文你将掌握该技能的工作流程、触发机制、frontmatter 结构以及它在 GSD-2 技能解析与发现体系中的底层实现。技能定位UI 合规审查的标准作业程序web-design-guidelines不是一套固定的审查规则而是一套**先取规则、再审代码、再给结论的审查协议**。它的核心设计在于审查依据不是硬编码在技能文件里的旧清单而是每次审查前从最新来源拉取从而避免规则过期。该技能的 frontmatter 定义了 Agent 如何识别与使用它--- name: web-design-guidelines description: Review UI code for Web Interface Guidelines compliance. Use when asked to review my UI, check accessibility, audit design, review UX, or check my site against best practices. metadata: author: vercel version: 1.0.0 argument-hint: file-or-pattern ---其中argument-hint: file-or-pattern明确告诉调用方该技能需要一个文件路径或 glob 模式作为入参metadata.author: vercel与metadata.version则标注了规则体系的来源与版本基线。这种 frontmatter 结构是 GSD-2 全部技能的通用约定skill-discovery.ts 中的parseSkillFrontmatter会读取name与description字段来生成技能元数据因此 description 中列出触发短语review my UIcheck accessibility等是技能被正确激活的关键。工作流程取规则 → 读文件 → 逐条核对 → 输出 file:line技能正文给出了四步标准作业程序SOP从下面的来源 URL 拉取最新版 Guidelines读取用户指定的文件若未指定则向用户询问文件或模式用拉取到的全部规则逐条核对目标文件以简洁的file:line格式输出审查发现。关键的规则来源https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md技能明确要求每次审查前都要先获取最新规则并使用 WebFetch 工具检索因为fetched content contains all the rules and output format instructions——即规则全集与输出格式说明都随每次拉取动态更新技能文件本身不保存规则副本。这意味着该技能天然具备规则保鲜能力当上游 Guidelines 新增规则或调整输出格式时技能无需修改即可自动跟随。使用方式带参调用与无参回退技能定义了两种调用形态用户提供文件或模式参数时依次执行拉取规则 → 读取指定文件 → 应用全部规则 → 按规则要求格式输出。未指定文件时不强行猜测而是向用户询问要审查哪些文件If no files specified, ask the user which files to review。这种先澄清入参、再执行审查的交互设计与该技能在 GSD-2 系统中的激活触发词共同保证了它只在 UI 审查语境下被唤起避免误用。注册与触发系统上下文中的技能路由该技能被注册在 GSD-2 的系统上下文触发器表中。system-context.ts 中维护了一个BUNDLED_SKILL_TRIGGERS数组其中对应条目为{ trigger: Review UI code for Web Interface Guidelines compliance — UX, design, and accessibility patterns, skill: web-design-guidelines }buildBundledSkillsTable()会遍历该数组用resolveSkillReference将技能名解析为绝对路径并把触发器 → 技能路径对照表注入系统提示词若技能未安装解析结果为unresolved则该行被跳过。这条注册关系还受到回归测试的保护bundled-skill-triggers.test.ts 断言web-design-guidelines必须出现在BUNDLED_SKILL_TRIGGERS中归属于 PR #5060 引入的之前未暴露的技能批次同时断言每个触发器条目都非空、技能 ID 全局唯一。这套测试保证了技能路由表不会在后续改动中静默退化。源码视角技能如何被发现、解析与加载要理解web-design-guidelines在运行时的完整生命周期需要看 GSD-2 的技能基础设施技能目录与解析优先级preferences-skills.ts 中的getSkillSearchDirs定义了技能查找目录按优先级排列目录解析方式说明~/.agents/skills/user-skillskills.sh 生态目录全局cwd/.agents/skills/project-skill项目级技能可提交到版本库~/.claude/skills/user-skillClaude Code 官方技能目录cwd/.claude/skills/project-skill项目级 Claude Code 技能~/.gsd/agent/skills/user-skill旧版目录仅当迁移未完成时作为回退解析规则resolveSkillReference依次支持绝对文件路径 → 绝对目录内部查找SKILL.md→ 裸技能名在已知目录中扫描name/SKILL.md。技能文件被约定命名为SKILL.md这正是 web-design-guidelines/SKILL.md 的落盘位置。技能发现与上下文注入skill-discovery.ts 负责在 auto-mode 会话中发现新安装的技能它在会话开始时对技能目录做快照snapshotSkills随后用detectNewSkills比对差异解析新技能 frontmatter 中的name/description最后通过formatSkillsXml生成newly_discovered_skillsXML 块注入系统提示词使后续单元能直接read加载匹配的技能文件。这套机制与本文主题的直接关联是web-design-guidelines的 description 字段质量直接决定了它能否在新技能发现、偏好匹配中被正确选中。偏好配置用 always/prefer/avoid 控制审查技能的选用GSD-2 允许通过偏好配置精准控制技能选用详见 docs/user-docs/skills.md--- version: 1 always_use_skills: - web-design-guidelines prefer_skills: - frontend-design avoid_skills: - some-other-skill skill_rules: - when: frontend styling work prefer: [frontend-design] ---always_use_skills无条件加载的技能prefer_skills优先倾向使用的技能avoid_skills明确回避的技能skill_rules按任务条件动态路由到特定技能。此外skill_discovery偏好控制技能的自动发现方式auto自动发现并应用、suggest识别但需确认默认、off关闭。如果希望 UI 审查流程完全自动化可将其设为auto若希望保持人对技能使用的控制权保留suggest即可。与相邻技能的分工web-design-guidelines在 GSD-2 的 UI 审查能力矩阵中并非孤军作战docs/dev/FILE-SYSTEM-MAP.md 列出了完整的技能清单与其相邻的技能各有侧重技能定位web-design-guidelines按 Web Interface Guidelines 做整体合规审查输出file:lineuserinterface-wikiUI/UX 最佳实践百科覆盖动画、CSS、音频、排版、预取、图标 11 大类同样输出file:line发现accessibilityWCAG 无障碍标准专项如 WCAG.md 参考web-quality-auditLighthouse 式综合质量审计性能、可访问性、SEO、最佳实践frontend-design前端设计原则make-interfaces-feel-better交互体验改进模式其中userinterface-wiki与web-design-guidelines构成规则百科 外部规范互补前者提供可检索的分类规则155 个文件规模的参考库后者则每次动态拉取外部最新规范。二者都遵循file:line输出约定便于后续修复直接定位到行。实践建议把 UI 审查固化到工作流中综合来看在 GSD-2 中落地 UI 合规审查的推荐路径是确认技能已安装技能目录采用 Agent Skills 开放标准SKILL.md格式可通过npx skills add安装到~/.agents/skills/也可直接在项目.agents/skills/下放置SKILL.md实现项目级共享可提交版本库。显式调用或靠触发词唤起直接要求review my UI / check accessibility / audit design / review UX或在 auto-mode 下启用skill_discovery: auto让系统按任务自动匹配。每次审查前先获取最新规则技能会通过 WebFetch 拉取最新版 Web Interface Guidelines确保审查依据不过期。以file:line为准输出所有发现都落在具体文件行上并遵守当次拉取内容中规定的输出格式。这套机制的核心价值在于审查标准与代码审查解耦规则集可以独立演进由上游维护而 GSD-2 侧的技能只需稳定维护拉取—比对—定位这条链路即可持续产出有行号定位的、可执行的 UI 合规审查结果。赞分享人工智能AI Agent代码智能体Agent 编排CLIAI 应用【免费下载链接】gsd-2A powerful meta-prompting, context engineering and spec-driven development system that enables agents to work for long periods of time autonomously without losing track of the big picture项目地址https://gitcode.com/gh_mirrors/gs/gsd-2点击查看免费下载相关推荐AG Kit web-design-guidelines 技能实战用 Web Interface Guidelines 为 UI 做合规审计AG Kit web design guidelines 技能实战用 Web Interface Guidelines 为 UI 做合规审计 Web Inte人工智能AI 技能AI 插件Cosmos 动态规划实战House Robber打家劫舍—— 不相邻房屋最大偷窃金额的 1D DP 解法Cosmos 动态规划实战House Robber打家劫舍—— 不相邻房屋最大偷窃金额的 1D DP 解法 House Robber 是动态规划Dyna前端UI组件open-slide 技能体系实战web-design-guidelines —— 让 Agent 按 Web 界面规范自动审查 UI 代码open slide 技能体系实战web design guidelines —— 让 Agent 按 Web 界面规范自动审查 UI 代码 本篇技术指南以上一篇Podman 远程客户端搭配 QEMU 虚拟机Windows 平台从 gvproxy 到 Ignition 的完整实战指南下一篇新蜂商城订单系统深度剖析从创建到支付的完整生命周期创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
📌 标签:
工业官网
设计趋势
AI 建站
SEO
获取完整报告 →
RELATED ARTICLES
推荐阅读
2026/10/9 1:21:41
js:关于箭头函数this指向和bind
2026/10/9 1:16:40
17.动态内存
2026/10/9 1:16:40
Claude Code 中断协议解析:interrupt 请求中 send_now 的 message_uuid 精确匹配语义(claude-code-system-prompts)
2026/10/9 5:47:00
分布式光纤选型实战:从DTS/DAS/DSS到敷设验收全链路避坑指南
2026/10/9 5:47:00
微服务上线前三大硬伤:HTTP复用、Nacos注册、环境配置
2026/10/9 5:47:00
生产级Java成绩管理系统:毕业设计可落地实战指南
2026/10/9 5:47:00
LSTM股票指数预测实战:从时序建模到数据泄露避坑
2026/10/9 5:47:00
从设计到实测:亲手打造OpenRIG开放式硬件机架
2026/10/9 5:41:59
OMS、O2O 与 CRM 分工:服装品牌订单履约和会员数据如何协同
2026/10/9 0:01:35
RISC-V裸机启动全流程:从复位向量到main函数的七步实现
2026/10/9 0:01:35
Java时间API实战:LocalDate、Date与ZonedDateTime的转换与避坑指南
2026/10/9 0:01:35
EasyTier实践:从NAT穿透到子网代理的异地组网部署与排错
2026/10/8 5:02:14
Jev+Agent接管浏览器:browser-use实战与jev-ultrafast性能优化
2026/10/9 1:10:43
多智能体集群实战:DeepAgents编排、MCP与A2A协议及Skills体系
2026/10/9 3:31:49
hindsight:面向LLM应用的事后可观测性工程实践
2026/10/8 4:30:43
我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频
2026/10/9 3:32:01
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证
2026/10/8 4:32:33
2026 大模型集体涨价:用 Python 做企业 Token 成本测算与选型避坑(附配置)