Agent Skills
返回列表
设计系统美化专家

设计系统美化专家

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_9a33df3c/design-system-polisher。

技能介绍

要解决的问题

生成式界面常常缺少一致的品牌细节：颜色只是近似值，font-size、letter-spacing、border-radius 和 box-shadow 各自为政。代码能运行，但放在一起会显得松散，尤其当团队希望接近 Apple、Vercel、Stripe、Linear 等成熟产品的视觉纪律时，手工逐条核对成本很高。

它如何工作

本技能将设计规范当作检查器使用。先选择品牌风格，再按 DESIGN.md 提取颜色、字体、间距、圆角、阴影、响应式断点和 Do's / Don'ts，随后对 HTML/CSS、React、Vue、Flutter 等界面做九维检查：视觉主题、颜色系统、字体排版、组件样式、布局原则、深度、圆角、响应式和规则冲突。发现问题后按高、中、低优先级输出修改建议，并给出具体 before/after 代码片段。

它不只是说“更美观”，而是把问题落到可执行值：例如把传统边框替换为 box-shadow: rgba(0,0,0,0.08) 0 0 0 1px，或按品牌启用 liga、tnum、ss01 等 OpenType 特性。对完整嵌入的品牌，可离线使用；对快速参考品牌，则提供关键参数摘要。

适用边界

它适合已有界面代码、组件页面或落地页，且目标风格能对应到某类品牌规范。若需求是“从零设计品牌”或需要像素级设计稿还原，它更偏审查与修正，而非完整设计流程。建议先确认品牌选择，再让它输出修改项；对于未完全嵌入的品牌，需接受其建议基于摘要参数而非完整规范。

使用场景

  • 重构内部运营后台时，对照 Linear 风格检查颜色、间距和圆角，并生成修复代码。
  • 做营销落地页时，用 Stripe 规范核对标题字重、负字距、蓝调阴影和保守圆角。
  • 上线前审查 React 组件，找出按钮、卡片、输入框不符合 Apple 胶囊链接与阴影规则的问题。
  • 把原型改成深色模式时，按 Supabase 的 HSL token 与绿色主色统一背景、文本和焦点状态。

适合人员

  • 负责内部产品页面的前端工程师，需要把散乱组件收敛到 Linear 或 Vercel 风格。
  • 做官网和落地页的设计工程师，需要按 Stripe 或 Airbnb 规范核对 CTA、阴影、圆角和字体细节。
  • 维护管理后台的产品工程师，需要在上线前修复按钮、输入框、徽章等组件的样式不一致。
  • 负责开源项目文档站的前端开发者，需要按 Supabase 或 Figma 风格统一深色主题和强调色。