用途:Frontend Design Pro 是一套前端设计语言规范 skill,用于引导 AI 生成或修改 UI 代码时遵循专业设计原则,减少模板化、可预测的设计错误。灵感来源为 impeccable 项目。
主要能力:覆盖字体、色彩、空间、动效、交互与 UX 文案六类规范。字体上建议使用 Geist、Instrument Serif、DM Sans、Sora 等有个性的字体,建立 modular scale(1.25 或 1.333),避免 Arial、Inter、system-ui,单页不超过 2 种字体族。色彩上建议用 OKLCH 定义颜色,中性色带色调,暗色模式背景用 #0f0f0f 而非纯黑,禁止彩色背景配灰色文字。空间上建立 4px 或 8px 间距系统,正文宽度 65ch、宽容器 1280px。动效 easing 用 cubic-bezier(0.16, 1, 0.3, 1),微交互 100-200ms、页面过渡 300-500ms,尊重 prefers-reduced-motion,避免 bounce/elastic 与超过 600ms 的动画。交互上要求 focus 状态清晰、loading 用 skeleton、错误信息具体可操作。UX 文案要求按钮动词开头、空状态说明原因并给下一步。
使用方式:在 UI/前端相关对话中使用命令,包括 /audit(检查无障碍、性能、响应式)、/critique(UX 评审)、/polish(发布前打磨)、/distill、/colorize、/animate、/bolder、/quieter、/delight、/normalize、/harden。执行时自动应用规范;/audit 列出 3-5 个具体问题,/polish 输出完整修改代码并说明改动,其他命令先说明修改再输出代码。
适用场景:AI 辅助生成或审查前端界面、组件打磨与设计系统对齐。限制:具体安装方式、平台支持与收费信息暂未提供。