从数据整理到界面完工，全程只靠对话
上一期我们聊了怎么把“能看”的网页改到“好看”。但光好看还不够——页面里的内容仍需要丰富多彩。
今天我们进入下一步：给你的网页接上一个轻量数据库，让内容充实起来。
还是用「汉字拆解网」当例子。这次的目标是：做一个笔画学习卡片功能，50个HSK一级汉字，每张卡片有书写动画、拼音、组词、例句，还能一键切换。
听起来工程量不小？其实全程只靠对话就搞定了。
第一步：数据别让Gemini自己编，找个专门的AI来整理
很多人一上来就让Gemini又整理数据又写代码，结果两头都不精。
我的做法是：把“整理数据”和“写代码”拆成两步，交给不同的AI。
我先找智谱清言，给了一句话：
列出50个HSK一级的汉字，只要汉字和拼音+一个组词+一句话
它立刻返回了一份结构清晰的数据，比如：
八(bā) → 组词：八个 → 句子：我有八个苹果。
ChatGLM返回的汉字库数据
汉字库数据导入项目代码
50个字，格式统一，拿来就能用。
为什么不直接让Gemini做？因为交给其它AI更高效，也更省token。
第二步：一句话让Gemini把数据接入界面
数据准备好了，接下来把它喂给Gemini。我把整理好的汉字库文件传进去，然后只说了一句：
根据data里的汉字库，将笔画界面的卡片加入组词和句子，并把所有数据连入笔画界面中——一字一卡片，包含书写动画、拼音、英语翻译、组词带拼音和翻译、例句带翻译。
Gemini跑了大约3分钟，一次性完成了：
- 全量数据接入
50个汉字全部连入界面，点击就能切换
- 卡片信息升级
米字格书写动画 + 基础信息 + 组词板块 + 句子板块
- 初版UI
传统边框和底色，“文人书斋”风格
Gemini生成的初版笔画学习界面
效果已经相当完整。但有一个问题——要往下滑才能切换汉字，体验不够流畅。
第三步：UI从“功能堆砌”到“极简聚焦”，靠的是敢说不
接下来就是和AI反复打磨界面的过程。这部分和上一期的思路一脉相承：
模糊需求让AI替我们构建。
第一轮：我模糊地表达出禁止出现的设计，它推荐了分屏布局。
我让Gemini把布局改成不需要上下滑动也能切换汉字。它做了一个左侧字库栏+右侧详情区的分屏方案——功能问题解决了，但页面变得很拥挤。
第一轮：分屏布局——功能完整但视觉拥挤
第二轮：我说“太冗余了，你重新想”，它思考出了留白设计。
这次我没给具体方案，就一句“现在太冗余了，你想想有没有更好的布局”。Gemini重新审视了设计，给出了一个完全不同的方案：
- 顶部横向汉字滚动条
，像一条精致的卷轴
- 中间聚焦大卡片
，左边写字动画，右边信息详情
- 去掉多余元素
：搜索框、多余图标、复杂的半透明层级
- 增加大量留白
第二轮：极简回归——去掉冗余，只留核心
从“什么都想塞进去”到“只留最重要的”，一句否定就够了。
第三轮：我说“字卡放到正中央”，它一步到位。
最后一步是精确微调。我只提了一个具体要求“把字库放在字卡下方，字卡在页面正中间并添加8s轮播字卡的功能”，Gemini通过flex布局实现了全屏垂直居中。整个页面瞬间有了“专业教学字卡展示”的感觉——干净、专注、有设计感。
最终效果
最终版：横向卷轴 + 居中大卡片 + 自动轮播
经过三轮打磨，最终版本：页面干净舒适，字卡居中聚焦，还自带了自动轮播功能。
整个过程没写一行代码，从数据整理到界面完工，全靠对话。
这期的三个要点
- 数据和代码分开做
让擅长整理的AI做数据，擅长开发的AI写代码，比全交给一个模型效率高得多
- 一句话就能接数据库
只要数据格式清晰，接入界面真的就是一句指令的事
- 敢否定才能改好
AI第一版方案往往功能完整但设计冗余，向它说出不需要的设计比说具体需求要设计的更好
— 0基础Vibe Coding 系列 · 第四期 —