让它好看

骨架有了,内容差不多了。这一章我们调外观——配色、字体、图片、动效、移动端体验。用一句话让设计感升级,是 Codex 最擅长的事之一。

6.1 升级首屏(Hero)

首屏就是用户打开页面第一眼看到的地方。它决定别人愿不愿意继续往下看。

一个像样的首屏通常有四样东西:

• 一句大标题:说清你提供什么。
• 一段副文案:解释给谁用、为什么有用。
• 一个主按钮:让用户知道下一步点哪里。
• 一点可信感:截图、数字、客户语录、使用场景都可以。

不要一上来让 Codex “做得高级”。这句话太空。你可以这样说:

6.2 配色:描述感觉,不要给十六进制

如果你不是设计师,不要硬报色号。你很可能会给出一组互相打架的颜色。

更好的办法是描述感觉:

• “像清晨阳光照进咖啡店,暖一点,不要黄得刺眼。”
• “像专业 SaaS 工具,干净、可信、少装饰。”
• “像年轻运动品牌,有活力,但不要满屏荧光色。”

Codex 会把这些感觉翻译成具体色值。你看到效果后再反馈:“再暖一点”“对比度高一点”“按钮更明显一点”。

6.3 字体:中文怎么选

中文网页最容易踩的坑是字体文件太大。一个完整中文字体可能几十 MB,加载慢,还可能有授权问题。

新手优先用系统字体栈。意思是:让 Mac、Windows、手机各自用自己系统里好看的中文字体。它不惊艳,但稳。

你可以让 Codex 这样处理:

6.4 图片:从哪里来,怎么用

图片不是装饰,它应该帮用户理解产品。选图时问自己:这张图是在说明产品、场景、结果,还是只是为了填空?

图片来源有三种:

• 自己拍:最真实,尤其适合服务、店铺、课程、作品集。
• 免版权图库:适合临时占位,但要避免太像库存照片。
• AI 生成:适合做背景、插画、图标、占位资产,但要检查细节。

无论来源,都要让 Codex 加上 alt 文本。这样搜索引擎和读屏工具都能理解图片。

6.5 排版精修

页面从“能看”到“像样”,很多时候不是差一个大设计,而是差几十个小细节。

你可以按这张清单让 Codex 自查:

• 标题之间层级是否明显。
• 段落行高是否舒服。
• 卡片之间间距是否一致。
• 按钮 hover 是否有反馈。
• 阴影是不是太重。
• 页面左右边距在手机上是否太窄或太宽。

6.6 移动端适配

很多新手只在电脑上看页面,结果发给朋友后才发现手机上按钮换行、卡片挤爆、标题大得吓人。

手机端至少检查这些:

• 首屏标题有没有占满整个屏幕。
• 按钮文字有没有挤成两三行。
• 卡片是不是一列排列,间距是否正常。
• 表单输入框是否好点。
• 横向滚动条有没有出现。

动手试试