专业前端设计规范与智能审查 - Frontend Design Pro — 专业前端设计规范

基于 impeccable 设计规范，提供 10+ 专业命令自动审计/打磨/优化前端 UI，根治 AI 模板化设计顽疾，输出可直接落地的 CSS 代码。

基本信息

• 技能名称?Frontend Design Pro — 专业前端设计规范
• 中文名称?专业前端设计规范与智能审查
• 作者?antonia-sz
• 分类?专业技能
• 版本?1.0.0
• 标签?frontend, ui-design, css, design-system, accessibility, developer-tools, code-quality

使用方法

使用说明
核心用法
Frontend Design Pro 是一套 AI 前端设计质量提升系统，通过 10 余个专业命令（ /audit /polish /critique 等）将 impeccable 设计规范嵌入 AI 工作流。
典型工作流：

1. 生成 UI 时自动应用规范——拒绝 Inter+紫色渐变模板
2. 用 /audit 检查无障碍、性能、响应式问题
3. 用 /polish 做发布前最终打磨
4. 用 /distill 去除冗余， /bolder 或 /quieter 调节视觉强度
   规范覆盖六大维度：
   字体 ：Geist/DM Sans 替代 Inter，建立 1.25 比例系统
   色彩 ：OKLCH 色彩空间，中性色必带冷暖色调，暗色模式用 #0f0f0f 而非纯黑
   空间 ：4px/8px 网格系统，正文 65ch 限宽
   动效 ：cubic-bezier(0.16,1,0.3,1) 快入慢出，禁止 bounce 弹性动画
   交互 ：Focus 状态可见，Loading 用 skeleton 不用 spinner
   文案 ：按钮动词开头，错误提示具体可操作
   显著优点
   根治模板感 ：主动拦截 LLM 的 6 大可预测错误（Inter 字体、卡片嵌套、灰字彩底等）
   命令即执行 ：无需反复描述需求，一条命令触发完整设计审查或优化
   代码优先 ：所有建议落地为具体 CSS，不停留于概念讨论
   专业细节 ：涵盖 prefers-reduced-motion、OKLCH、modular scale 等现代前端最佳实践
   局限性与风险
   依赖作者维护 ：impeccable 为个人项目（3k stars），规范更新频率不确定
   审美主观性 ："个性字体""大胆设计"等判断带有作者个人偏好，未必适配所有品牌
   技术栈偏向 ：规范针对现代 CSS（OKLCH、CSS 变量），旧浏览器兼容性需自行处理
   命令覆盖不全 ：复杂动效设计、插画系统、品牌视觉策略等超出当前范围
   适合人群
   独立开发者/全栈工程师：快速产出专业级 UI 无需雇佣设计师
   AI 辅助编程用户：解决 ChatGPT/Claude 输出"看起来都一样"的问题
   设计系统建设者：获取具体可执行的设计 token 和代码规范
   常规风险
   低风险 。纯设计规范指导，不执行外部代码、不涉及敏感数据操作。注意： 输出需用户自行审查后集成，避免直接复制到生产环境。