1. 项目概述：为AI编码助手注入专业设计思维
如果你和我一样，日常重度依赖 Claude Code、Cursor 这类 AI 编码助手来提升开发效率，那你肯定也遇到过类似的痛点：让它写个功能代码，它写得又快又好；但一旦涉及到界面布局、交互逻辑、用户体验这些“设计”层面的问题，它的输出往往就显得有些“外行”了。要么是布局不符合基础的设计原则，要么是交互流程生硬，要么是完全忽略了可访问性。我们需要的不是一个只会写div和onClick的代码生成器，而是一个能理解“为什么这么设计”的、具备专业设计思维的合作伙伴。
这正是cuellarfr/design-skills这个项目试图解决的问题。它不是一个简单的代码片段库，而是一套系统化的“设计技能包”，专门用于武装你的 AI 助手。其核心目标是将那些经过数十年沉淀、散落在各种设计书籍和最佳实践中的 UX/UI 设计知识，结构化地“教”给 AI。通过安装这套技能，你的 Claude 或 Cursor 将瞬间获得从用户研究、交互设计、设计系统到无障碍审计等十个关键设计领域的深度知识，从而能在代码生成和代码审查过程中，主动应用这些设计原则，产出更专业、更人性化的解决方案。
简单来说，它把 AI 助手从一个“熟练的码农”，升级成了一个“懂设计的全栈工程师”。这对于独立开发者、小型团队或者那些设计资源紧张但依然希望产品具备良好体验的团队来说，价值巨大。你不再需要自己事无巨细地描述每一个设计细节，AI 能基于这套内化的知识体系，给出更合理的建议，甚至主动指出你方案中的设计缺陷。
2. 核心设计哲学与架构解析
在深入每个技能细节之前，理解这个项目背后的设计哲学至关重要。这决定了它为什么有效，以及如何最大化地利用它。它绝不是一堆设计理论文章的简单堆砌，而是一个经过精心架构的、面向“AI-人类”协作场景的知识工程。
2.1 渐进式深度与“开箱即用”原则
项目最巧妙的设计在于其“主文件+深度资料库”的架构。每个技能包的核心是一个SKILL.md文件，通常只有 200-350 行。这个文件是精华中的精华，包含了该领域最核心的框架、检查清单、快速参考表和决策流程。它的设计目标是：让 AI 在不加载任何额外文件的情况下，就能解决 80% 的常见设计问题。
例如，在“设计评审与评估”技能中，主文件会直接给出一个结构化的 9 步评审框架，以及尼尔森十大可用性原则、关键的 UX 定律速查表。当 AI 在评审一个登录表单时，它能立刻调用“系统状态可见性”、“匹配系统与真实世界”等原则进行判断，并给出具体的修改建议。这种“开箱即用”的特性，保证了响应的即时性和实用性。
而references/、templates/、examples/目录则提供了“按需加载”的深度。当问题涉及更复杂的场景时，AI 可以主动引用这些深度资料。比如，在讨论信息架构时，如果主文件的快速诊断不够，AI 可以调取references/中关于组织系统、标签系统、导航系统的详细评估方法。这种设计模仿了人类专家的思考模式：先凭经验和核心框架快速判断，必要时再查阅专业资料深入分析。
实操心得：在与安装了此技能的 AI 协作时，你可以有意识地引导它。对于快速检查，直接提问即可；对于复杂问题，可以明确说“请参考深度资料，为这个多步骤表单设计一个完整的错误预防和恢复流程”。AI 会知道去加载对应的
references/error-prevention.md文件来提供更详尽的方案。
2.2 观点鲜明与可操作化：从“考虑”到“执行”
很多设计指南停留在“你应该考虑用户体验”这种模糊的层面。而这个技能包的核心原则是“观点鲜明的默认值”和“可操作优于理论”。这意味着，它提供的不是开放式的思考题，而是具体的、带有量化指标的行动指南。
举个例子，在“UX 写作”技能中，它不会只说“文案要简洁”。它会明确给出基准：操作按钮文案最好在 1-3 个词之间；错误信息应能在 7 秒内被用户理解；句子长度建议平均低于 25 个词，阅读等级控制在 8 年级以下。在“设计提升”技能中，关于数据可视化，它会直接引用爱德华·塔夫特的“数据墨水比”原则，并给出具体建议：移除不必要的网格线、背景阴影，确保图表中超过 80% 的墨水都用于传递核心数据信息。
这种具体化带来了巨大的实操价值。当 AI 在生成一个仪表盘图表时，它会自动应用这些规则，生成一个去除了“图表垃圾”、重点突出的可视化组件，而不是一个花哨但难以阅读的图形。它让 AI 的设计输出从一开始就站在了一个较高的基准线上。
2.3 基于经典框架，而非发明新理论
技能的权威性来源于其根基。每个技能包都明确标注了其知识体系源自哪些经典的设计框架和著作。例如：
- 交互设计技能深度整合了 Alan Cooper 的《About Face》交互设计精髓和 Dan Saffer 的《Microinteractions》框架。
- 旅程地图技能基于 Polaine, Løvlie & Reason 的服务设计框架以及 Jim Kalbach 的映射方法论。
- 设计系统技能则遵循 Brad Frost 的“原子设计”方法论。
这样做的好处是双重的。首先，它保证了所传递知识的可靠性和行业认可度。其次，它让 AI 的“设计语言”与专业设计师的通用语言保持一致。当 AI 建议“考虑为这个交互添加一个‘弹簧动画’以提供物理感反馈”时，它是在运用交互设计中的“产品姿态”和“微交互”理论，这种沟通对于具备设计背景的开发者来说非常高效。
3. 十大核心技能深度拆解与应用场景
这套技能包涵盖了产品设计与研发全流程的关键环节。下面我将结合具体场景，拆解其中几个最具代表性的技能，看看它们是如何在实战中发挥作用的。
3.1 技能一：无障碍审计——让包容性设计成为默认项
无障碍设计常常被留到“最后再做”，结果往往就是草草了事。这个技能将 WCAG 2.2 标准转化为一个可执行的5 层审计流程，让 AI 能在开发早期和代码审查阶段就持续介入。
核心流程解析：
- 自动化扫描层：AI 会建议或直接集成 axe-core、Lighthouse 等工具到 CI/CD 流水线，自动检测如“图片缺失 alt 文本”、“颜色对比度不足”等基础问题。
- 键盘导航层：AI 会引导你或自动检查所有交互元素是否可以通过 Tab 键访问，焦点指示器是否清晰，键盘陷阱是否存在。例如，它会检查一个自定义下拉菜单是否能用方向键操作，而不仅仅是鼠标点击。
- 屏幕阅读器层：这是最容易被忽略的部分。技能包提供了测试脚本和清单，AI 会基于此审查 ARIA 属性是否被正确使用（如
aria-expanded,aria-describedby），语义化 HTML 结构是否合理（用 `
