开源
Designer Skills
把专业设计师的方法拆成短小的技能：层级、字号、行宽、颜色、网格和分组。
Designer Skills · MC Dean · MIT
安装
在 Claude Code 里
/plugin marketplace add Owl-Listener/designer-skills /plugin install ui-design@designer-skills
命令逐字摘自项目的说明文件，运行前请先读一遍。
我们跑过一次
需求： 虚构：虚构小镇 Saltmere 的一家社区自行车修理店想重做预约页，手机上用户总是看不到预约按钮。
该技能输出四段文字点评（视线入口、视线流向、权重、强调），每段含观察、问题、修复，全部评为严重问题，并指出行动按钮被埋没是原因。修复建议正确但偏通用：把按钮做成实心、全宽、全页最重的元素。
我们的看法： 符合列表描述：结构清晰的层级点评，准确指出被埋没的按钮。可作设计师清单或智能体提示，但只给建议、不给重设计，普通人仍需有人去实现。
打开完整成品2026-11-02 由 AI Agent 跑了一次，版本 9a6930c。没有真人评判，你跑出来的结果也会不同。
为什么选它
它的界面设计插件一次讲一个好版面背后的道理，比如层级、适合阅读的行宽和分组，读起来像一门好的设计课。
为什么有它
多数人只能说不喜欢。这些技能讲出背后的原因。
你会得到什么
用在你的界面或文档上的建议，并讲明道理。
包里的技能
visual-hierarchy什么应该最先被看到，以及怎么做到。typography-scale一套能配合的字号。readable-measure让人读着舒服的行宽。color-system给产品定一套颜色系统。layout-grid让页面成整体的网格。spacing-system有规则而不是靠猜的留白。law-of-similarity为什么相似的东西会被看成一组。aesthetic-usability为什么好看的东西显得更好用。
怎么用
- 添加市场和插件。
- 问一个界面的问题，并说明用哪个技能。
- 改一处，再看一遍。
需要什么
Claude Code。项目也支持其他 Agent。
一句话总结
想弄懂一个设计为什么好或不好时，选它。
值得留意
这个合集很大，主要给专业设计师用，这里只列一个插件。同一项目还有一个视觉评审插件，从七个方面审查界面，安装方法相同。部分数值是网页惯例，不是定律。没有成品样例可看。