前端设计专家 —— 提升前端设计品质

灵感来源：完美无瑕⭐ 3千

一套专业的前端设计语言规范，让AI生成的UI摆脱"千篇一律的模板感"。

为什么需要这个技能？

大型语言模型从相同的通用模板中学习，若缺乏引导就会产生相同的、可预测的错误：

• Inter字体 + 紫色渐变
• 卡片嵌套卡片再嵌套卡片
• 彩色背景上的灰色文字
• 弹性/Bounce动画（显得过时）

此技能通过设计规范和反模式清单，主动引导AI产出专业设计。

设计规范（核心原则）

字体 (Typography)

• ✅ 选择有个性的字体：Geist, Instrument Serif, DM Sans, Sora
• ✅ 建立字体比例系统（模数比例：1.25 或 1.333）
• ❌ 禁止：Arial, Inter（过于通用）, system-ui（缺乏个性）
• ❌ 禁止：同一页面超过2种字体系列

色彩 (Color & Contrast)

• ✅ 使用OKLCH色彩空间定义颜色（感知均匀）
• ✅ 中性色永远带色调（暖灰 / 冷灰，不要纯灰）
• ✅ 暗色模式：背景用 #0f0f0f，不要纯黑 #000000
• ❌ 禁止：彩色背景上使用灰色文字
• ❌ 禁止：纯黑/纯灰（始终带一点色调）

空间设计

• ✅ 建立 4px 或 8px 基础间距系统
• ✅ 用留白创造呼吸感，不要把元素挤在一起
• ✅ 内容宽度限制：正文 65ch，宽容器 1280px
• ❌ 禁止：随意的内边距数值（13px, 22px）

动效设计

• ✅ 缓动效果使用 cubic-bezier(0.16, 1, 0.3, 1)（快入慢出）
• ✅ 微交互时长：100-200ms；页面过渡：300-500ms
• ✅ 尊重 prefers-reduced-motion 系统偏好
• ❌ 禁止：弹跳/弹性缓动效果（显得廉价）
• ❌ 禁止：超过 600ms 的动画（太慢）

交互设计

• ✅ 焦点状态必须清晰可见（不要移除轮廓线）
• ✅ 加载状态：骨架屏优于加载指示器
• ✅ 错误信息：具体 + 可操作（例如"邮箱格式不对" vs "输入有误"）
• ❌ 禁止：禁用状态没有提示原因

用户体验文案

• ✅ 按钮文字：动词开头（例如"保存更改" 而不是 "确认"）
• ✅ 空状态：说明原因 + 提供下一步操作
• ✅ 错误提示：说人话，不要用技术术语
• ❌ 禁止：使用"请稍候..."（应说明正在做什么）

命令列表

在任何 UI/前端相关对话中使用这些命令：

Enforce Rules

When a user makes a design-related request:

1. Automatically apply design specifications: When generating or modifying UI code, proactively follow the above specifications
2. When receiving commands:
   • /audit: Check and list 3-5 specific issues (with line numbers/component names)
   • /polish: Output the modified complete code + explain what was changed
   • Other commands: First explain what modifications to make, then output the modified code
3. Proactively alert about anti-patterns: Briefly point out when user code contains anti-patterns
4. Prioritize giving code: Design suggestions should be implemented into specific CSS/code, not remain at the conceptual level

Example

User says: "Help me write a login form"

Output characteristics after automatically applying specifications:

• Use Geist or DM Sans fonts (not Arial/Inter)
• Input box focus state uses 2px solid oklch(0.6 0.2 250) (a blue with a hue)
• Button text: "Login" instead of "Confirm"
• Error prompt: "The email format is incorrect, please check before and after the @ symbol" instead of "Input error"
• Loading state uses skeleton, not spinner
• Spacing uses multiples of 8px (8/16/24/32px)