前言¶
用大模型写前端界面，功能往往一次就能跑通，但间距、字号、配色和组件层次常常「像 demo」：各元素自成一派，缺少统一的设计语言。自己对照 Apple HIG 或 Stripe 文档改 CSS，耗时长，且不同品牌规范差异大，很难在对话里稳定复用。
下面介绍 SkillHub 社区 Skill design-system-polisher（坐标 @user_9a33df3c/design-system-polisher）。它把多套顶级品牌设计系统规范嵌入 Skill 本体，在对话里先选风格，再按选定规范检查并优化界面代码；requires_api_key=false，规范内嵌，可完全离线运行。
这是什么¶
design-system-polisher 是面向「代码生成界面」的设计系统美化 Skill：依据已嵌入的品牌设计系统规范，对 Agent 产出的 UI 做美观度与一致性方面的检查与优化。
- 维护与分发：SkillHub 社区来源（
community），发布者user_9a33df3c，分类design-media，当前版本 1.0.1。 - 解决的问题：减少「能跑但不好看」的界面；把分散在各品牌文档里的设计约束收敛到一次风格选择 + 一轮优化流程里。
与单纯在提示词里写「用 Tailwind 好看一点」相比，本 Skill 强调按具体品牌设计系统（而非泛泛的「现代感」）做对照和改写。
核心功能¶
以下能力均来自 SkillHub 官方简介与页面说明，未额外扩展：
- 多品牌设计系统库：内置 59 套顶级品牌设计系统规范，页面列举包括 Apple、Airbnb、Vercel、Stripe、Linear、Figma、Framer、Supabase、MongoDB 等（完整列表以 Skill 内嵌资料为准）。
- 启动时选风格：Skill 启动后会引导用户选择要遵循的设计系统，后续优化以该套规范为基准。
- 检查与优化界面代码：针对 Agent 生成的界面相关代码，按选定规范做美观度与一致性的检查与优化（具体检查项由 Skill 内
SKILL.md及嵌入规范定义）。 - 离线可用：所有设计规范完整嵌入 Skill，不依赖外网拉取规范文档；SkillHub 标签标明
requires_api_key=false，无需 API Key。
安装与启用¶
安装流程以 SkillHub 安装说明 为准。核心是安装 skillhub CLI，并把 Skill 装到当前 Agent 能识别的 skills 目录（必须用 --dir，否则默认 ./skills/ 可能不会被识别）。
1、检查或安装 skillhub CLI¶
command -v skillhub && skillhub --version
若未安装，可使用官方脚本（完整安装含 CLI 与默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
仅需 CLI 时：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2、安装 design-system-polisher¶
将 <skills 目录> 换成你当前客户端使用的路径，例如：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
skillhub install @user_9a33df3c/design-system-polisher --dir <skills 目录>
SkillHub 页面也支持把下面提示词发给 AI，由 Agent 按安装文档完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_9a33df3c/design-system-polisher`。
安装后按你所用客户端的要求刷新或重启 Agent，使新 Skill 被加载。
典型用法¶
官方页面未给出单独的业务代码示例；结合简介与通用 Skill 工作方式，可复现的流程如下。
- 在已启用本 Skill 的对话中，让 Agent 生成或打开待美化的界面代码（如 React/Vue/HTML+CSS 等）。
- 触发 design-system-polisher（或说明需要「按设计系统规范优化界面」）；Skill 启动后会请你选择一套品牌设计系统（59 套之一）。
- 确认风格后，让 Agent 基于选定规范检查并改写布局、间距、字体、颜色、组件样式等，使输出更贴近该品牌设计系统。
若需核对 Skill 内的具体步骤与约束条目，安装完成后阅读该目录下的 SKILL.md 即可（标准 Skill 格式）。
适用场景与注意¶
适合谁
- 用 Cursor、Claude Code、Codex 等 Agent 写前端界面，希望成品更接近知名产品视觉规范的团队或个人。
- 需要在多种品牌风格之间切换（例如这次按 Vercel、下次按 Stripe），又不想每次手写长篇设计提示词的场景。
- 希望规范内嵌、离线可用，且不需要额外 API Key 的环境。
限制与注意
- 优化效果取决于底层模型对设计规范的理解与代码改写能力；Skill 提供的是规范对照与流程，不能替代设计评审或真实用户测试。
- 59 套品牌中，页面仅举例部分名称；实际可选列表以 Skill 内嵌内容为准。
- SkillHub 统计（截至资料抓取）：评分 100000，下载 5203，安装 99；社区来源，升级与问题反馈需通过 SkillHub 或发布者渠道跟进。
- 安装路径务必使用
--dir指向正确 skills 目录，否则 Agent 可能无法加载。
结尾¶
design-system-polisher 把多套顶级品牌设计系统规范收进一个 Skill：先选风格，再按规范打磨 AI 生成的界面，并支持离线、免 API Key。若你正在处理「功能对了、观感不对」的 UI 代码，可以在 SkillHub 安装试用。
