设计卓越性规范是做什么的？

让AI构建的应用看起来像人工精心制作。没有通用模板。没有显而易见的模式。

<core_principle>

工艺标准

如果有人能看出它是AI生成的，那我们就失败了。

优秀的设计是隐形的。用户应该感受到应用的专业性，而不是注意到它遵循了某个模板。 </core_principle>

<color_system>

色彩哲学

AI色彩选择的问题

AI倾向于选择：

白色背景上的紫色渐变（Lovable 默认外观）
过于饱和的强调色
单个界面中颜色过多
在纯色效果更好的地方使用渐变

我们的方法：克制

基础调色板（默认）

/* 使用 Tailwind 的 slate 中性色阶 */
--background: slate-50       /* 页面背景 */
--surface: white             /* 卡片、弹窗 */
--border: slate-200          /* 分割线、边框 */
--text-primary: slate-900    /* 标题 */
--text-secondary: slate-600  /* 正文 */
--text-muted: slate-400      /* 占位符、提示 */

强调色（每个应用只选一个）

/* 默认：蓝色（专业、可信赖） */
--accent: blue-600
--accent-hover: blue-700
--accent-light: blue-50

/* 按应用类型可选： */
/* 金融/银行 → 绿色（金钱） */
/* 健康/养生 → 青色（平静） */
/* 餐饮/餐厅 → 橙色（食欲） */
/* 创意/设计 → 紫色（创造力） */
/* 紧急/预警 → 红色（注意） */

规则

每个应用只使用一个强调色，无一例外
谨慎使用强调色——仅用于按钮、链接、高亮
主按钮绝不使用渐变
背景为白色或近白色，不要彩色
深色模式：正确反转，不要只是变灰 </color_system>

<typography_system>

排版规则

字体栈

/* 不要到处指定 Inter 字体——使用系统字体 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

/* 这样在每个平台上看起来都像是原生 */

字号比例（Tailwind 类）

页面标题：    text-2xl font-semibold   (24px)
区块标题：    text-lg font-medium      (18px)
卡片标题：    text-base font-medium    (16px)
正文：        text-sm                  (14px)
小字/说明：   text-xs text-slate-500   (12px)

反模式

❌ 不要到处使用 font-bold ❌ 不要在一张卡片里混用太多字号 ❌ 长文本不要使用全部大写 ❌ 正文段落不要居中对齐 ❌ 不要使用纯黑色（#000）—— 请使用 slate-900

良好模式

✅ 标题：使用 semibold 或 medium，不要用 regular ✅ 正文：常规字重，良好的行高（1.5-1.6） ✅ 保持层级：每个组件最多3种字号 ✅ 大多数文本左对齐（居中布局中的标题除外） </typography_system>

<spacing_system>

间距与布局

间距比例

始终一致地使用 Tailwind 默认比例：

4   (1rem/16px)  - 小间隙、内联元素之间
6   (1.5rem/24px) - 中等间隙、组件之间
8   (2rem/32px)  - 大间隙、区块之间
12  (3rem/48px)  - 超大间隙、页面区块之间

页面布局

// 标准页面容器
<div className="p-4 md:p-6 lg:p-8">
  {/* 页面标题 */}
  <h1 className="text-2xl font-semibold mb-6">仪表盘</h1>
  
  {/* 内容区块，保持一致的间距 */}
  <section className="mb-8">
    {/* 区块内容 */}
  </section>
</div>

卡片内部间距

<Card>
  <CardHeader className="pb-4">  {/* 减少默认内边距 */}
    <CardTitle>标题</CardTitle>
  </CardHeader>
  <CardContent className="space-y-4">
    {/* 带有垂直间距的内容 */}
  </CardContent>
</Card>

反模式

❌ 不一致的内边距（这里 p-3，那里 p-5） ❌ 空白太少（拥挤感） ❌ 空白太多（断裂感） ❌ 同级元素使用不同的间隙大小 </spacing_system>

<animation_system>

动效与动画

理念

动画应该：

感觉自然，而非华丽
提供反馈，而非干扰
快速（150-300ms），而非缓慢
微妙，而非剧烈

标准过渡

// 悬浮状态 —— 使用 transition-colors 或 transition-all
<div className="transition-colors hover:bg-slate-50">

// 卡片悬浮 —— 微微抬起
<Card className="transition-shadow hover:shadow-md">

// 按钮悬浮 —— 内置于 shadcn，不要重写
<Button>已有动画</Button>

Framer Motion 模式

// 页面过渡
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
>

// 列表交错
<motion.div
  variants={{
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: { staggerChildren: 0.1 }
    }
  }}
  initial="hidden"
  animate="show"
>
  {items.map(item => (
    <motion.div
      key={item.id}
      variants={{
        hidden: { opacity: 0, y: 20 },
        show: { opacity: 1, y: 0 }
      }}
    >
      {item.content}
    </motion.div>
  ))}
</motion.div>

// 微交互 —— 按钮按压
<motion.button whileTap={{ scale: 0.98 }}>
  点击我
</motion.button>

动画时长

悬浮效果：150ms
小过渡：200ms
页面过渡：300ms
复杂动画：最长 400-500ms

反模式

❌ 弹跳效果（显得廉价） ❌ 过慢的动画（>500ms 让人觉得迟钝） ❌ 每个元素都加动画（过于繁多） ❌ 到处使用旋转加载器（请使用骨架屏） ❌ 夸张的入场动画 </animation_system>

<component_patterns>

组件设计模式

卡片

// 简洁的卡片 —— 没有过度装饰
<Card className="bg-white border shadow-sm">
  <CardContent className="p-4">
    {/* 内容 */}
  </CardContent>
</Card>

// 不要： rounded-3xl、重阴影、渐变边框

按钮

// 主要操作
<Button>保存</Button>

// 次要操作
<Button variant="outline">取消</Button>

// 危险操作
<Button variant="destructive">删除</Button>

// 图标按钮
<Button variant="ghost" size="icon">
  <Settings className="h-4 w-4" />
</Button>

// 不要：渐变按钮、3D效果、主按钮内放图标（通常）

表单

// 简洁的表单布局
<div className="space-y-4">
  <div className="space-y-2">
    <Label>姓名</Label>
    <Input placeholder="输入姓名" />
  </div>
  
  <div className="space-y-2">
    <Label>邮箱</Label>
    <Input type="email" placeholder="[email protected]" />
  </div>
</div>

// 不要：内联标签、浮动标签（除非要求）、输入框内的图标

表格

// 简洁的表格
<Table>
  <TableHeader>
    <TableRow className="bg-slate-50">
      <TableHead>姓名</TableHead>
      <TableHead>状态</TableHead>
      <TableHead className="text-right">操作</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow className="hover:bg-slate-50">
      <TableCell>张三</TableCell>
      <TableCell><Badge>活动中</Badge></TableCell>
      <TableCell className="text-right">
        <Button variant="ghost" size="sm">编辑</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

// 不要：斑马条纹（过时）、重边框、内容居中

</component_patterns>

<anti_patterns_detail>

AI生成的警示信号

“Lovable Look”（避免）

紫色/紫罗兰作为主色
白色卡片上的渐变背景
到处使用 rounded-3xl
标题中的表情符号
“欢迎回来，用户！👋”
通用库存照片风格插图

“Bootstrap Look”（避免）

厚重的投影
圆角药丸按钮
到处是蓝色链接
等高的卡片组
Jumbotron 风格标题

“Material Look”（除非要求，否则避免）

悬浮操作按钮
到处是凸起的卡片
所有元素上的波纹效果
桌面端的汉堡菜单

什么让它看起来像“人工制作”

克制 —— 并非每个功能都被强调
层级 —— 清晰的主、次、再次要内容
留白 —— 呼吸的空间
一致性 —— 重复使用相同的模式
微妙的细节 —— 不经意的小点缀
真实内容 —— 没有可见的占位文本 </anti_patterns_detail>

<review_checklist>

设计审查清单

颜色检查

仅使用一种强调色
白色背景上没有渐变
无纯黑色文本
有足够的对比度，符合无障碍要求

排版检查

每个组件最多3种字号
正确的层级（semi-bold 标题，常规正文）
没有全部大写的段落
行高可读（1.5以上）

间距检查

整体内边距一致
区块之间有足够的留白
内容不显得拥挤
移动端间距按比例缩放

动画检查

过渡效果微秒（150-300ms）
没有弹跳/弹簧效果
加载使用骨架屏，而非旋转图标
悬浮状态提供反馈

组件检查

卡片没有过度装饰
按钮遵循层级（主要/次要）
表单布局简洁
表格可读且可交互

最终检查

用户是否能看出这是AI制作的？（应该是“否”）
它看起来像真正的产品吗？（应该是“是”）
它是否与现代SaaS应用一致？（应该是“是”） </review_checklist>

在你喜欢的 AI 中提问

文档

设计卓越性规范 是做什么的？