花了一天用AI画设计图，我学到了什么

上周我开始做一个自己的题库系统。第一天把数据库结构定了，第二天原本计划直接写CRUD，结果打开编辑器，光标闪了五分钟——我脑子里对页面长什么样还是糊的。

于是我决定先画设计图。只不过这次，画图的不是我，是AI。

为什么不用现成的工具？

很多人问过我：直接用Notion或者飞书文档不就行了？非要自己写一个？

我的题目比较杂——算法题、英语选择题、专业基础知识混在一起，有些带代码块，有些带图片，有些需要多选。在通用文档工具里，要么没法按题型筛选，要么没法随机抽题组卷，要么标签体系用着别扭。

我想要一个专门为"题目"这个场景设计的东西。所以哪怕粗糙，也得自己搭。

但搭之前，得先想清楚它长什么样。

AI出图，快得有点不真实

我打开通义千问，给了个粗暴的提示词："帮我设计一个题库管理系统的页面原型，包含题目列表、添加题目、组卷和刷题四个核心界面。风格简洁专业。用HTML线框图展示。"

几分钟后，AI生成了一份可以直接在浏览器里打开看的HTML页面。

说实话，比我手画的草图强太多了。布局、间距、按钮位置都像模像样，甚至还配了柔和的蓝灰色调。我一度觉得可以直接拿着这个去开工了。

但多看两眼，问题就出来了。

AI画的东西，你得敢删

AI默认给我加了一个"数据统计仪表盘"——各种折线图柱状图排得整整齐齐。好看吗？好看。我需要吗？完全不需要。

我一个个人题库，总共几百道题，统计什么数据？今天刷了几道、正确率多少、连续学习多少天——这些是学习类App的标配，但不是我一个管理工具的刚需。

于是我回到对话里，重新给了约束：不要仪表盘，不要登录注册，不要社交功能。核心就四个字：管理 + 刷题。

第二轮生成的方案干净多了。四屏设计，每个页面只做一件事：

我手动在原型上加了一个"错题标记"的小红点——AI没考虑到这个，但对我来说这是刚需。AI能给你一个完整的框架，但只有你知道什么该留、什么该砍、什么该补。

从静态图到可交互原型

光看线框图还是不过瘾。我让AI把静态HTML升级成交互式原型——用Alpine.js做了页面切换和模态框，用硬编码数据模拟了增删改查的流程。

这下能"点"了。点击"添加题目"，弹窗出来；选"多选题"，选项区域自动多出一个输入框；点"生成试卷"，右侧列表刷新。

整个原型大概400行HTML，全部在一个文件里。我花了一个小时跑了一遍完整流程，发现两个设计上的别扭之处：

1. 分类字段AI做成了自由输入，但这样迟早会出现"算法""Algorithm""算法题"三个同义词。我改成了下拉选择，预设五六个类别，先管住数据质量再说。

2. 题目列表最初是表格样式，一行一道，信息挤在一起。改成卡片布局后，虽然单屏显示条数变少了，但每道题的阅读体验好很多。这个取舍我选卡片。

一个体会：AI时代，提需求比画图重要

这次用AI画设计图，最大的感受是：

AI不缺生成能力，缺的是精准的约束。

第一次给的提示词太宽泛，AI就按"通用管理系统"的模板给你生成——加仪表盘、加用户体系、加一堆你不需要的按钮。第二次我把约束收紧，产出的东西就精准多了。

这说明什么？说明会"提需求"比会"画图"重要。以前做设计，技能壁垒在工具熟练度；现在壁垒在你能不能把脑子里模糊的想法，翻译成AI能理解的具体指令。

今天的成果

代码一行没写，但做完了三件事：

• 一份可交互的HTML原型，覆盖了四个核心页面

• 每个页面的功能点截图标注，存进了项目文档

• 明确了第一版要砍掉的功能清单

明天正式切回代码模式。但我很庆幸多花了这一天——画清楚再动工，比边写边改效率高得多。