7.3 设计打磨：让它变好看

MVP 做完了，它能用，但可能长得像个"程序员做的东西"——功能都有，但看着不太行。

这一节，我们用 AI 帮你把"能用"变成"好看"。

先看问题：你的 MVP 可能长这样

输入框大小不统一，间距忽大忽小
颜色只有默认的白色背景和蓝色链接
手机上打开排版乱了
加载数据时页面一片空白，用户不知道发生了什么
没有任务时页面也很空，没有引导

这些问题很常见，而且都很好修。

原则一：一致性

设计的第一原则不是"好看"，是"一致"。

让你的 AI 帮你做一件事：统一所有的间距和颜色。

Prompt：

帮我统一整个页面的设计规范：

1. 间距：所有模块间距用 8 的倍数（mb-4, mb-6, mb-8）
2. 圆角：所有卡片和按钮统一用 rounded-xl（12px）
3. 颜色：主色用 orange-500，辅助色用 orange-100，
   文字用 gray-800（标题）和 gray-500（辅助文字）
4. 阴影：所有卡片用 shadow-sm，hover 时升级为 shadow-md
5. 字号：标题 text-2xl，正文 text-base，辅助 text-sm

保持功能不变，只修改样式。

这个 prompt 的关键在于给出了具体的数值，而不是说"帮我美化"。如果你只说"美化"，AI 可能改得很夸张。给出具体的规范，它会在规范内优化。

原则二：视觉层次

好的设计让用户一眼就知道该看哪里、该做什么。

Prompt：

优化页面的视觉层次：

1. 页面标题最大最显眼
2. 三个输入框是视觉主体，用白色卡片承载，和背景形成对比
3. 保存按钮次之，但颜色最醒目
4. AI 鼓励区域用一个淡橙色背景的卡片
5. 统计数据放在右上角，小而精

加一些微妙的分隔：卡片之间用适当的留白区分，
而不是用线条分隔。

添加动画

静态页面看着"死"，加点动画就活了。

Prompt：

给页面添加以下微动画：

1. 页面加载时，卡片从下方淡入滑上来（用 Tailwind 的 animate 和 transition）
2. 勾选任务完成时，加一个短暂的缩放动画（scale 变大再变回来）
3. AI 鼓励语出现时，逐字打字效果（可以用 CSS animation 或简单的 JS）
4. 按钮 hover 时微微上移（transform: translateY(-2px)）

用 Tailwind CSS 实现，不要引入额外的动画库。
保持动画克制，时长在 200-300ms。

动画的黄金法则：快、少、自然。 200ms 的动画就够了。超过 500ms 用户就会觉得卡。

响应式设计

你的应用在手机上也得能用。大多数人可能是在手机上打开你的分享链接。

Prompt：

确保页面在手机端完美显示：

用 max-w-md 限制最大宽度，手机上全宽
输入框在手机上不要太大，padding 适当缩小
统计区域在手机上放在主内容下方（而不是右上角）
按钮要够大，至少 48px 高，方便手指点击
检查所有文字在小屏上不会被截断
底部留够安全距离（iPhone 底部横条区域）

用 Tailwind 的响应式前缀：sm:、md:、lg:

保存后，在浏览器里按 F12 打开开发者工具，点击左上角的手机图标，模拟不同手机尺寸。确保每个尺寸都看着没问题。

暗色模式

现代应用标配。而且 Tailwind 内置了暗色模式支持，加起来很快。

Prompt：

给页面添加暗色模式支持：

在 <html> 标签上用 class 切换 dark 模式
添加一个切换按钮（🌙/☀️ 图标），放在页面右上角
背景色：dark:bg-gray-900
卡片：dark:bg-gray-800
文字：dark:text-gray-100
输入框：dark:bg-gray-700 dark:border-gray-600
用 localStorage 记住用户的偏好

确保所有元素在暗色模式下都清晰可读，
特别是输入框的文字和 placeholder。

加载状态和空状态

这两个状态最容易被忽略，但对用户体验影响很大。

加载状态

Prompt：

添加加载状态：

1. 页面初始加载时（从 Supabase 读取数据），显示一个骨架屏（skeleton）
   - 三个灰色的长条模拟输入框
   - 一个灰色的方块模拟按钮
2. AI 鼓励按钮点击后，按钮文字变为"正在思考..."，加一个旋转的 loading 图标
3. 保存按钮点击后，短暂显示"已保存 ✓"

用 Tailwind 的 animate-pulse 做骨架屏效果。

空状态

Prompt：

添加空状态设计：

当今天还没有设定任何任务时：
1. 显示一个友好的插图区域（可以用大号 emoji 代替：📝🌅✨）
2. 一段引导文字："新的一天开始了！设定你今天最重要的 3 件事吧"
3. 输入框用虚线边框，暗示"这里需要填写"

当 AI 鼓励区域还没有内容时：
1. 显示一个半透明的提示卡片
2. 文字："保存任务后，点击这里获取 AI 的鼓励 ✨"

空状态设计的原则：告诉用户"这里可以做什么"，而不是什么都不显示。

用 UI 组件库省 80% 的时间

如果你不想从零写样式，用现成的组件库是最聪明的选择。2026 年最推荐的几个：

shadcn/ui — 当前最火的选择

它不是一个 npm 包，而是一组直接复制到你项目里的组件代码。好处是完全可控，不会被第三方更新搞坏。

# 在你的 Next.js 项目里初始化
npx shadcn@latest init

# 添加你需要的组件
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add dialog
npx shadcn@latest add toast

用法：

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function TaskCard() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>今天的任务</CardTitle>
      </CardHeader>
      <CardContent>
        <Button className="w-full">保存任务</Button>
      </CardContent>
    </Card>
  )
}

shadcn/ui 基于 Tailwind CSS 和 Radix UI，样式现代、可访问性好、支持暗色模式。

其他选择

组件库	特点	适合场景
shadcn/ui	复制粘贴、完全可控、Tailwind	Next.js 项目首选
Ant Design	组件最全、中文生态好	后台管理系统
MUI (Material UI)	Google 风格、成熟稳定	通用 Web 应用
daisyUI	Tailwind 插件、轻量	想快速用 Tailwind 写 UI

给 AI 的 Prompt：

用 shadcn/ui 重构当前页面的 UI：
按钮用 shadcn 的 Button 组件
卡片用 shadcn 的 Card 组件
输入框用 shadcn 的 Input 组件
保持现有功能不变，只替换 UI 组件

图标和 Favicon

图标：Lucide Icons

shadcn/ui 配套的图标库，轻量好看：

import { Check, Star, Settings, User } from "lucide-react"

// 直接当组件用
<Check className="w-5 h-5 text-green-500" />
<Star className="w-5 h-5 text-yellow-500" />

Favicon：让应用在标签页上显示你的 Logo

让 AI 帮你生成一个 SVG favicon：

帮我生成一个 SVG 格式的 favicon：
- 简单的几何图形（圆形或方形）
- 用项目的主色（orange-500）作为背景
- 中间放一个白色的大写字母（项目名首字母）
- 保存为 app/favicon.svg

然后在 app/layout.tsx 里引用：

export const metadata = {
  icons: {
    icon: '/favicon.svg',
  },
}

字体选择

字体对"质感"的影响比你想象的大。推荐几个免费且好看的：

字体	风格	适合
Inter	现代、干净	几乎所有 Web 应用
Plus Jakarta Sans	圆润、友好	消费者产品
Geist	Vercel 出品、极简	开发者工具
思源黑体（Noto Sans SC）	中文首选	中文界面

在 Next.js 里使用（以 Inter 为例）：

// app/layout.tsx
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

配色工具

不知道用什么颜色？这些工具帮你：

Coolors.co：按空格随机生成配色方案，看到喜欢的就锁定
Realtime Colors：实时预览颜色在真实页面上的效果
Tailwind CSS 颜色：直接用 Tailwind 内置的颜色，不用自己调

选色原则：

主色 1 个（品牌色，比如橙色）
辅助色 1-2 个（灰色系为主）
强调色 1 个（按钮、链接用）
不要超过 3 种颜色

Before vs After

改造前：

白色背景 + 默认字体 + 没有间距 + 没有动画 + 没有加载状态
像一个 2005 年的网页表单

改造后：

渐变背景 + 卡片布局 + 呼吸感的间距 + 细腻的动画 + 优雅的加载/空状态
像一个 2024 年的现代 Web 应用

差距只在样式代码，功能一行没改。

设计 Prompt 技巧总结

差的 Prompt	好的 Prompt
帮我美化页面	统一间距为 8 的倍数，主色 orange-500，圆角 rounded-xl
加点动画	页面加载时卡片从下方 20px 处淡入，时长 300ms
手机上能用就行	用 max-w-md 限制宽度，按钮高度至少 48px
加暗色模式	dark:bg-gray-900 背景，dark:text-gray-100 文字，localStorage 记住偏好
显示加载状态	用 animate-pulse 做骨架屏，三个灰色长条模拟输入框

规律：越具体的 prompt，出来的效果越好。 不要让 AI 猜你想要什么，直接告诉它。

本节小结

要点	说明
一致性	统一间距、颜色、圆角、字号
视觉层次	重要的东西大且醒目，次要的退后
动画	快（200-300ms）、少、自然
响应式	手机优先，确保小屏也能用
暗色模式	Tailwind 的 dark: 前缀，加 localStorage 记忆
加载/空状态	告诉用户"正在加载"或"这里可以做什么"
Prompt 技巧	给具体数值，不要说"帮我美化"

应用变好看了。下一节，我们把它部署上线，让全世界都能用。

🏋️ 本节练习

练习 1：设计规范化（15分钟）

用 AI 统一你项目的设计规范：

选定一个主色（推荐 Tailwind 的 orange-500 或 blue-500）
用 prompt 统一间距（8的倍数）、圆角（rounded-xl）、字号
对比前后效果

练习 2：组件库迁移（20分钟）

把你的项目迁移到 shadcn/ui：

npx shadcn@latest init 初始化
添加 button、card、input 组件
用 shadcn 组件替换原生 HTML 元素

练习 3：响应式检查（10分钟）

按 F12 打开开发者工具
切换到手机视图
用 AI 修复所有排版问题

练习 4：空状态设计（10分钟）

清空所有数据，看看页面长什么样
如果是空白一片，用 AI 加上友好的引导文字和图标

先看问题：你的 MVP 可能长这样​

原则一：一致性​

原则二：视觉层次​

添加动画​

响应式设计​

暗色模式​

加载状态和空状态​

加载状态​

空状态​

用 UI 组件库省 80% 的时间​

shadcn/ui — 当前最火的选择​

其他选择​

图标和 Favicon​

图标：Lucide Icons​

Favicon：让应用在标签页上显示你的 Logo​

字体选择​

配色工具​

Before vs After​

设计 Prompt 技巧总结​

本节小结​

🏋️ 本节练习​

先看问题：你的 MVP 可能长这样

原则一：一致性

原则二：视觉层次

添加动画

响应式设计

暗色模式

加载状态和空状态

加载状态

空状态

用 UI 组件库省 80% 的时间

shadcn/ui — 当前最火的选择

其他选择

图标和 Favicon

图标：Lucide Icons

Favicon：让应用在标签页上显示你的 Logo

字体选择

配色工具

Before vs After

设计 Prompt 技巧总结

本节小结

🏋️ 本节练习