web-design-guidelines
作者 ehmoweb-design-guidelines 是一套与框架无关的指南，帮助你构建、审查并修复可访问、响应式的 Web UI。适用于语义化 HTML、WCAG 2.2 检查、表单、焦点状态、对比度、深色模式、性能，以及跨 HTML、CSS 和 JS 的布局决策。
该技能评分 84/100，属于目录用户的优质候选项。它为 agent 提供了清晰的触发条件、扎实的操作指导，以及足够结构化的覆盖范围，明显优于通用的 web 设计提示。不过，用户仍应预期它更依赖完整的 markdown 规则，而不是轻量化的安装体验。
- 触发条件明确：frontmatter 明确说明可用于 HTML、CSS、web components、WCAG 合规、响应式设计和 Web 性能。
- 工作流价值高：仓库包含较大的 `SKILL.md`、`AGENTS.md` 和分节规则，共有 13 个 H2、79 个 H3，以及 accessibility、forms、performance、dark mode 和 i18n 等命名分类。
- 安装决策证据充分：metadata 引用了 WCAG 2.2、MDN、web.dev，以及 70+ 条规则摘要，说明它是基于真实标准的参考型技能，而不是占位内容。
- 未提供安装命令或脚本，因此采用方式主要是手动的，并依赖阅读 markdown 指南。
- `SKILL.md` 中包含占位标记，因此在用于高风险工作前，用户应先确认所引用的各个部分是否完整。
web-design-guidelines 技能概览
这个技能适合做什么
web-design-guidelines 技能是一套面向 Web 平台的实用设计与可访问性指南，适合用于构建、审查或修复网页 UI。它最适合那些需要的不只是泛泛提示的人：前端工程师、做代码的设计师、可访问性审查人员，以及必须对 HTML/CSS/JS 选择给出可辩护依据的 AI agent。
它能帮你做哪些判断
当你的任务是选择语义化标记、满足 WCAG 2.2 预期、改善响应式表现，或避免常见的 Web UI 回归时，就该用这个技能。web-design-guidelines 技能的核心价值，在于把“让这个表单更可访问”或“改善移动端布局”这类宽泛目标，转化为具体的平台规则。
它为什么不一样
这个仓库不绑定任何框架，而且对基础原则有明确立场：语义化 HTML、键盘可用性、焦点状态、对比度、响应式设计和性能。对于 web-design-guidelines for UI Design 来说，这让它能跨 React、Vue、纯 HTML 和设计系统工作通用，因为这些指导本身位于框架选择之下。
如何使用 web-design-guidelines 技能
安装并加载正确文件
使用 web-design-guidelines install 命令安装技能包：
npx skills add ehmo/platform-design-skills --skill web-design-guidelines
安装完成后，加载 SKILL.md 获取完整规则集。如果你只关心某一个问题，先看 rules/_sections.md。AGENTS.md 是最快了解文件结构、适用范围和优先级层级的入口。
把模糊需求改写成有用的提示词
这个技能在你的输入明确写出 UI 面、目标约束和你想让它做出的判断时效果最好。更好的提示词包括：
- “审查这个结账表单的键盘操作和标签问题。”
- “重构这个卡片网格，让它在移动端仍然易读，并满足对比度规则。”
- “检查这个 modal 的焦点捕获、Escape 行为和 ARIA 命名。”
对于 web-design-guidelines usage，请带上实际的标记、组件 API 或布局约束。如果你只说“提高可访问性”，输出通常会过于宽泛，不够可靠。
建议的阅读顺序
先读 SKILL.md，再读 AGENTS.md，然后按需加载 rules/_sections.md。如果你在排查某个具体问题，先只读相关章节：可访问性、表单、响应式设计、排版、性能或导航。这样可以让工作更聚焦，也能减少无关建议。
更容易得到好结果的工作流
可以按这个顺序来：先确认用户问题，再定位相关规则章节，然后做最小结构修复，最后重新检查键盘、标签、对比度和移动端表现。这个技能最擅长的，是让你产出审查结论或补丁，而不只是抽象地解释最佳实践。
web-design-guidelines 技能 FAQ
这只适用于可访问性工作吗？
不是。可访问性是最大的一部分，但这个技能也覆盖响应式布局、表单、排版、性能、深色模式、导航、触控、i18n、动画以及 PWA 相关问题。如果你的任务不止 WCAG，这个技能依然适用。
我需要是前端专家才能用吗？
不需要。只要你能提供 HTML、组件代码，或者基于截图描述问题，web-design-guidelines skill 对初学者也很友好。不过，你确实需要把界面和希望改变的行为说具体。
什么时候不该用它？
如果你的任务纯粹是视觉品牌、文案写作，或者没有 UI 实现的产品策略，就可以跳过它。对于服务器端架构问题，它也不是合适工具，除非答案取决于网页界面行为。
它比普通提示词强在哪里？
普通提示词往往只会给出泛泛建议。这个技能锚定在平台规则上，所以 web-design-guidelines guide 类请求可以更可靠地判断语义元素、键盘流、ARIA 用法和响应式行为，而不是靠猜。
如何改进 web-design-guidelines 技能
提供最小但完整的 UI 上下文
最好的输入会包含组件名称、相关代码和失败模式。例如：“这是一个带关闭图标、两个输入框和一个主操作按钮的 modal；请审查它的焦点管理和标签。”这比“让它更可访问”强得多。
说清楚你最在意的约束
如果你最关注移动端，就写明视口限制、断点或触控目标大小。如果你最关注可访问性，就点出具体问题：键盘可用性、对比度、标签、减少动效或屏幕阅读器命名。web-design-guidelines usage 会随着技能知道哪个取舍更重要而明显提升。
注意常见失误
最常见的问题包括：过度使用 <div>、隐藏的交互控件没有标签、焦点状态太弱，以及文本被翻译或缩放后布局崩掉。如果第一次输出显得很泛，就要求它针对准确的组件树或 CSS 做一次基于规则的审查。
通过复核循环持续迭代
第一轮之后，可以针对你仍不放心的点要求二次检查，比如：“重新审查键盘顺序”“验证对比度和焦点样式”或“只识别需要改动的标记”。这样能让 web-design-guidelines 技能保持聚焦，通常也能得到更锋利的最终实现。