文章目录
- 快速导航
UI设计Skill怎么装：98 个 MIT/Apache Agent Skill 合集用法
为什么需要「Skill」，而不是再写一句「帮我做漂亮 UI」
让 Cursor 或 Claude Code 直接「做个高级界面」，结果经常是紫渐变、居中大按钮和模板感插画。问题不在模型，而在缺少可复用的流程与约束：没有设计系统检查清单、没有排版尺度、没有 ASO 截图职责划分时，Agent 只能现场即兴。
开源社区已经把 UI 打磨、设计系统、动效、Apple HIG、无障碍与 ASO 流程写成 Agent Skill（常见为 SKILL.md 或可安装技能包）。任务匹配时，Agent 按清单工作，而不是自由发挥。站点上线的 UI / ASO 设计 Skill 库 把约 98 个标明 MIT / Apache-2.0 的条目做成合集：按标签筛选、打开详情、一键复制安装命令并跳到 GitHub。本站只托管元数据，不镜像技能文件树。
这个合集适合谁、不适合谁
| 场景 | 用合集？ | 说明 |
|---|---|---|
| 用 Cursor / Claude Code 做产品 UI | 是 | 装 UI 打磨、排版、组件库选型类 Skill |
| 写商店截图文案与帧职责 | 是 | 选带 ASO / screenshots 标签的条目 |
| 只想看竞品预览图找灵感 | 否 | 去 App Store 截图灵感库 |
| 要抄某品牌落地页色板 | 否 | 去 品牌设计参考库 抽 :root 变量 |
| 需要可商用装饰表情 | 否 | 去 可商用表情包图库 |
使用步骤（约五分钟）
- 打开 设计 Skill 库，用搜索或标签缩小范围：UI 打磨、设计系统、ASO、商店截图、动效、Apple HIG、无障碍等。
- 点卡片进入详情页
/tools/design-skills/[id]：阅读概览、原则摘要、安装说明与许可徽章。 - 复制安装命令（多数为
npx skills add owner/repo；部分项目用自有 CLI，如uipro init、impeccable install）。在你的项目根目录执行。 - 按上游 README 选择 Cursor / Claude Code 等目标；用
/斜杠菜单或让 Agent 在相关任务中自动发现 Skill。 - 改 UI 或截图前，先打开上游
LICENSE再确认一次——收录时核对过 MIT/Apache，但仓库可能更新。
许可汇总见站点 /design-skills/LICENSES.txt。侵权或下架请走联系页。
推荐挑选顺序（ASO / 截图向）
不必一次装几十个。建议按「本周任务」装 1–3 个：
| 本周任务 | 优先标签 / 方向 | 装完之后做什么 |
|---|---|---|
| 首图卖点与五帧叙事 | ASO、商店截图 | 先用白板或五帧模板定序，再让 Agent 按 Skill 审文案 |
| 界面像「产品」而不是模板 | UI 打磨、设计系统 | 约束色板、间距、组件，再进 截图生成器 出图 |
| 跟 Apple 视觉语言对齐 | Apple HIG | 对照系统控件密度与文案语气，避免「安卓感」误伤 |
| 无障碍与字号 | 无障碍、排版 | 检查对比度与动态字体对截图安全区的影响 |
装好 Skill 后，仍要用真实产品界面出图；Skill 管的是品味与流程，像素级多尺寸导出仍交给本地截图与批量处理工具。
许可与商标边界（务必读）
- 合集收录标准：GitHub 上标明 MIT 或 Apache-2.0（当前约 93 MIT + 5 Apache-2.0）。具体条款以各仓库
LICENSE为准。 - 商标不在开源许可里：Apple、App Store、Cursor 等名称与标识不因 MIT/Apache 而可随意商用暗示背书。
- 本站不下载技能正文：页面上的星标、简介、安装提示来自元数据；技能内容始终在上游。搜索与复制在浏览器本地完成。
- 发现许可有误：通过联系页说明仓库与原因，核实后更新或移除。
和灵感库、品牌 HTML、截图工坊怎么串
一条务实工作流：
- 在 截图灵感库 看同品类榜单首图结构（只参考，不商用下载图）。
- 在 品牌设计参考 复制接近你产品气质的
:root变量，喂给 Agent。 - 在本 Skill 库安装「UI + ASO」相关 Skill，让 Agent 按清单改界面与截图文案。
- 回到应用截图工坊主流程生成多尺寸预览图，必要时用截图合规检查扫一眼。
常见坑
- 把 Skill 当最终设计稿：Skill 不会替你上传 App Store Connect；它只改善 Agent 输出。
- 一次装太多：描述互相重叠时，Agent 可能混用冲突的审美规则——按任务开关。
- 忽略上游更新：
npx skills add之后定期看 GitHub Release。 - 用「专业版」心态找付费墙：本站工具均在浏览器本地免费使用，无付费套餐。
小结清单
- 标签筛到 ≤10 个候选
- 打开详情确认许可为 MIT 或 Apache-2.0
- 复制安装命令并在项目根执行
- 用一个真实 UI/ASO 任务验证 Skill 是否被调用
- 需要看图灵感或色板时，分别链到灵感库 / 品牌参考，而不是硬塞进 Skill