视觉优化

本节目标

让番茄时钟从"能用"变成"好看"。用 AI 来美化界面的配色、布局、字体和动画效果。

整体美化

在聊天面板中输入：

帮我美化这个番茄时钟的界面。要求：

• 现代简约风格
• 居中布局
• 好看的配色（工作模式和休息模式用不同的颜色）
• 时间数字用大号字体
• 按钮有圆角和悬停效果
• 整体看起来像一个正式的产品

看看效果

接受更改，刷新浏览器。你应该能看到界面有了明显的变化。

继续调整

如果某些地方不满意，直接告诉 AI。比如：

时间数字再大一点，按钮之间的间距再宽一点

或者：

我不喜欢这个红色，换成更柔和的珊瑚色

或者：

给倒计时数字加一个圆形的进度条背景，能直观看到剩余时间

每次调整都很快——说一句话，AI 改一下，你刷新看效果。 不满意就继续说，满意就进入下一步。

手机适配

现在试试在浏览器中把窗口缩小，看看页面在窄屏幕下是否正常显示。如果布局乱了，告诉 AI：

让这个页面在手机上也能正常显示，做一下响应式适配

提示词对比

美化界面时，描述的具体程度会很大程度影响结果：

模糊的说法：

把界面变好看

AI 会按自己的审美来做，结果不可预测。

具体的说法：

用深色背景、白色文字，圆形的进度条包围着时间数字，底部三个胶囊形按钮，工作模式用番茄红配色，休息模式用薄荷绿配色

AI 会更精准地实现你想要的效果。

核心要点

对于视觉效果，越具体的描述越好。如果你有参考图片或者喜欢的网站风格，可以告诉 AI："参考 XXX 的风格来做"。

常见问题

改完之后功能坏了

告诉 AI：

美化界面之后，倒计时功能好像不正常了，请检查一下，确保功能还是正常的

不同浏览器显示不一样

不同浏览器对样式的处理会有细微差异，这是正常的。如果差异很大，告诉 AI：

在 Chrome 上显示正常，但在 Safari 上按钮的样式不对，请修复兼容性问题

下一步

界面已经很好看了。最后一步，我们给番茄时钟加上提示音，让时间到了的时候有声音提醒。