界面优化 — 第二章

阅读完上一篇后，想必大家都有了一些自己创作的网页，同时我猜测大家应该遇到了两个问题：

1. 页面在一些比较奇怪的尺寸下显示不佳
2. 旧手机用户会发现苹果那丑丑的 emoji 在你的页面上很难看

那么这章我就先讲如何优化界面并去掉一些 AI 味。（AI loop）

这篇文章比上一篇短多啦

响应式

在一些大型网站中你会发现，无论用手机看还是电脑看，它都会把所有内容以一个合适的排版呈现给你。这是怎么做到的呢？答案只有三个字：响应式。

顾名思义：响应窗口尺寸，自动适配。这样对AI说：

帮我适配好各种屏幕尺寸，使用媒体查询

（AI 会增加一些 CSS 样式适配窗口）

emoji

在现在的安卓与 Win 8.1+ 系统当中，emoji 都是彩色的而且非常好看，但是作为网站开发者，你必须要考虑你的奇葩用户的设备，比如 Win 7，这个全球仍然有 10% 的人在用系统对 emoji 的支持那是烂成史了。

解决办法：

1. Font Awesome：这是一个图标库，图标各式各样，只有你想不到，没有它画不到的。

2. SVG

SVG 作为矢量图非常适合当作图标，而且它一个 SVG 文件极小，加载速度快。

不过 AI 在画 SVG 方面可以说是不尽如人意，目前也只有 Kimi 可以画出比较好看的 SVG。当然图片是可以矢量化的，这里推荐一个矢量化工具：https://svglo.com/zh-cn/

好了，SVG 准备好就到要放进页面的时间了。这里注意一个坑点：

不要直接把 SVG 扔给对话型 AI ，AI 生成内容不完全可靠，AI 生成时一旦 SVG 少写一个字符，整个都会崩溃。

正确做法：

1. 告诉AI把xxx位置的图标替换为./image/xxx.svg
2. 那么你的文件夹结构长这样：

├─ image
│  └─ xxx.svg
└─ index.html

注 ：index中文名为索引，我会单独开一小节来解释。

怎么记住

根据我这么长时间的观察，页面中很多里的AI slop，大都是以下几种：

• 蓝紫渐变色。
• 图标上下弹跳
• 啥子都会用的页面有一堆提示性文字

你只需要给出反向提示词就ok了。
我推荐v0，有时间把自己对页面的要求整理一下

<!-- AGENTS.md -->
AI行为规范文档
1. 要求一
2. 要求二

每次开新对话时把这个文件发给它，它会遵循的。

最后想说的话

为什么我最开始不一开始就使用Agent、Openclaw等AI工具，不是难，而是我希望读我文章的朋友从自己手动做，自己踩坑，明白页面背后的原理，而不是向Agent发一句话，其他全交给AI，若是如此你很快会失去对代码的掌控权，一个小错误都要问AI，而非自己判断哪里出问题了，不仅浪费token 费钱 ，整个项目曾经出现过什么问题你是一知半解，看AI在那瞎逼逼.有些人以为自己会敲git add .、git commit、git push就认为自己非常牛逼、非常专业，你的.gitignore呢？逗呢？都不看AI在仓库中生成了什么，AGENTS.MD也不写，满仓库的preview.png给谁看呢？Object2 曾有言：别几把污染GitHub。。

本文就到这里，下篇传送门