先免费体验 3 节课，把 AI 页面从“廉价感”改到像样。
无需注册，也不要求你先会 CSS，更不要求你手写代码。你会先看懂为什么有些 AI 生成页面看上去很廉价，再按照步骤解压项目、打开终端，把课程 Prompt 交给智能体，做出一个能在浏览器里打开和操作的迷你工作台，并把第一版改成更清楚的第二版。
先看看完整 UI 加餐最终会做成什么
下面是完整 UI 加餐的终点作品。3 节免费体验课不会要求你一次做完全部页面和功能，而是先带你完成一个迷你版，经历“看出问题—说清要求—做出第一版—改好第二版”的完整过程。 终点作品是一个使用虚构 mock data 的 OPC Studio OS 个人工作台，包含 10 个页面，支持侧栏收起和移动端抽屉、命令面板与快捷新建、通知、图表、拖拽排序，以及任务、项目、订单、付款和资料表单的真实状态反馈。
这是在线预览，不需要下载或安装，也不会永久保存你的操作。
你可以把参考 Prompt 交给能读取本地文件夹的 AI 编程工具自行尝试。不同工具、模型版本和运行环境生成的结果可能不同，Prompt 不保证直接得到与演示完全一致的页面。 参考 Prompt 帮你先体验“让 AI 生成页面”；完整 UI 加餐会继续讲清楚为什么这样设计、怎样复盘、怎样修正响应式、交互、安全和最终验收。
开始前先检查
你需要一台能创建、解压本地项目文件夹的电脑。AI 编程智能体是能够读取指定目录、修改文件并说明改动的工具，最好还能执行终端命令；例如 WorkBuddy、有道龙虾、Codex，任选一个满足这些能力的工具即可。课程后面统一把它叫作“智能体”。具体界面和命令可能随工具版本变化，请以官方说明为准。
- 打开 PowerShell：在资源管理器地址栏输入
powershell，或在 Windows 11 文件夹空白处右键选择“在终端中打开”。运行node -v和npm -v。两个 Starter 使用 Vite 7.3.6，Node 需满足^20.19.0或>=22.12.0。 - 如果提示命令不存在，请到 Node.js 官方网站安装当前受支持的 LTS 版本，关闭并重新打开终端后再检查。
- 进入项目根目录，确认能看到
package.json，再运行安装和启动命令。
常见失败：找不到 node/npm 时重装并重开终端；命令报路径错误时回到能看到 package.json 的目录；默认端口被占用时按终端提示换一个端口，不要删除 lockfile、关闭 audit 或强制安装。
如果你已经有一个面向一人公司、自由职业者或独立顾问的 OPC 工作台项目，可以直接下载 Prompt。它会先检查这个项目，再开始体验；普通的其他前端项目不适用。
下载 OPC 体验 Prompt先下载 OPC 体验 Starter。Starter（起始项目）是已经配好依赖、可以直接运行的最小代码骨架，不是完成版；解压并运行后，再使用同一份 Prompt。
下载 OPC 体验 Starter这里的 OPC Studio OS，是一个面向一人公司、自由职业者和独立顾问的个人工作台练习；这次体验会围绕今日任务、进行中项目和待收款等场景展开。Starter 只是练习起点，不包含完成版答案。
下载后，右键 ZIP 文件，选择“全部解压”，放到一个自己找得到的新文件夹里。不要直接在压缩包预览窗口中双击文件操作，否则后面的安装命令可能找不到完整项目。
为什么有些 AI 生成页面看上去很廉价
这节课解决“我看不出问题，只能让 AI 再高级一点”的困境。你会把模糊的不喜欢，变成可以复现、可以交给智能体的观察。
为什么有些 AI 页面一眼就透着“廉价感”？
通常不是因为渐变、毛玻璃或动画本身有错，而是智能体很容易把没有产品理由的默认组合直接套上去。装饰先于任务，页面很亮却不知道先做什么；所有卡片权重相同，标题、数字和按钮一起抢注意力；首屏很大、内容平均铺开，看起来很满却没有多少有效信息；emoji、图标、圆角和颜色像来自不同模板；动画到处出现，却没有解释状态变化，也没有帮助用户完成动作。
例如一个项目工作台把“今日待办”和八个统计卡片做成同样大小、同样亮度，用户需要逐张阅读才找到下一步。另一个页面给保存按钮加了闪烁光效，却没有在保存中、成功或失败时改变反馈。问题不在于这些视觉形式不能用，而在于它们没有服务任务、层级和状态。接下来用三个观察词把问题说具体。
先看完整版本，再看粗糙起点
第一步，打开 OPC Studio OS 完整版在线演示。它不是负面案例，而是用虚构 mock data 做的参考成品。请先回答：第一眼看到什么？主操作是否明显？哪些卡片更重要？动画是否帮助你理解状态？缩到 390px 后还能不能完成主任务？
第二步，再回到体验 Starter 或课程示意图，看一个统一、刻意保留问题的 V1。Starter 只提供能运行的基础骨架，不包含完成版答案；看到基础页面或空状态是正常的。接下来你要练的是发现差异，而不是猜设计师的个人偏好。
先理解三个词
层级是页面告诉你先看什么；间距是相关内容之间的呼吸；对齐是同一类信息沿着同一条线排列。它们比加一个渐变更能决定页面是否像产品。所谓“像产品”，不是颜色更贵，而是用户不需要猜下一步在哪里。
开始前准备
找一个最近生成的页面
可以是自己的练习，也可以是一个没有敏感信息的公开 Demo。打开桌面宽度和手机宽度各看一次，先不要改代码。把浏览器缩放恢复到 100%，避免因为缩放误判间距。
做五分钟体检
记下第一眼看到的元素、最拥挤的区域、没有明确用途的颜色、最难找到的主操作。桌面端可以按 F12 打开开发者工具，用设备工具栏（Ctrl + Shift + M）切到 390px；也可以直接拖窄浏览器窗口。每条都写“位置 + 现象”，例如“Overview 顶部：四个数字卡片权重相同，无法判断今天要先做什么”。
把感受变成影响
继续补一句“这会导致什么”。例如“用户需要逐张阅读，无法快速确认待收款”。不要急着给 CSS 方案，先说清楚问题。若你无法写出影响，说明它可能只是个人偏好，先放入观察区而不是最高优先级。
错误表达和改进表达
帮我做得高级一点。
保留现有页面功能。当前首页所有卡片权重相同，第一眼无法识别主任务。请突出今日任务和待收款，将辅助数据降低对比度，并统一模块间距。不要新增渐变、毛玻璃和无意义动画。
把观察写成四行
打开本地笔记，依次回答：第一眼是什么；主任务是什么；哪里阻碍了判断；你希望用户先完成什么。Prompt（给智能体的具体任务说明）、V1（第一版）、V2（修改后的第二版）、Review（带证据的检查）会在后面反复出现；OPC Studio OS 是这次练习的工作台名称，mock data 指只用于演示的虚构数据，智能体指能读取项目并修改代码的 AI 工具。再给每条标记高、中、低影响。高影响问题会阻塞任务，例如主按钮被折叠；低影响问题可能只是圆角偏好。先改高影响问题，页面会更快变清楚。
写下四行观察，并附上页面宽度、浏览器、截图文件名和你没有修改的内容。不要把账号、个人路径或敏感数据写进笔记。
- 我能用白话解释层级、间距和对齐。
- 我写出了至少三条“位置 + 现象 + 影响”。
- 我区分了使用问题和个人偏好。
- 我没有先要求 AI 添加装饰。
能准确描述问题，就已经拥有了改进页面的第一把工具。下一节把这些观察写成 Prompt。
如果你发现自己一直在讨论字体喜好，先退一步看任务：用户是否能在三秒内找到下一步？如果不能，记录它是层级问题。若用户找得到任务但页面拥挤，记录它是间距问题。若两个区域都抢注意力，先记录为层级问题；如果主要由颜色对比造成，就在现象中写清楚，并在第 2 节的 V（视觉）字段中继续处理。把这三种判断各写一个例子，你就有了下一节 Prompt 的输入。
体检完成后不要立刻让智能体改页面。先把笔记交给一个朋友或隔一小时再读一遍，删掉“高级、舒服、现代”这类没有验收方式的词，换成可观察的描述。
最后检查你的笔记是否能让另一个人复述问题。如果只能复述“我觉得不好看”，就再补一个具体区域和用户动作。记录要能被复查。
把想法说清楚，让 AI 做出第一版页面
这节课让你真的生成一个小页面。体验版只做四个视图和一个表单，边界小，结果才容易看懂。
六个字段，先写清楚再动手
P / 产品：给谁用，打开页面要完成什么？
V / 视觉：画布、文字、边界和主色分别承担什么用途？
L / 布局：导航、摘要、列表和表单如何排列？
C / 约束：明确保留什么、禁止什么、暂时不做什么。
M / 动效：只描述保存、打开、关闭等状态变化。
T / 技术：沿用项目已有技术和 mock data，不凭空换栈。
跟着做：生成 V1
如果智能体说不清项目结构，先不要让它继续修改。把 README 中的项目结构和运行命令发给它，再让它重新说明一次。多数时候它缺少的是上下文，而不是需要你判断复杂代码。
先检查项目
把公开 Prompt 下载到能读取本地文件的智能体中。让它先回答：项目根目录在哪里、如何安装、如何启动、哪些文件会修改。智能体不应该因为“方便”而覆盖你的入口文件。
保存自己的 Brief
把上一节的四行观察补进 Prompt。再加一句：“先给出页面结构和组件清单，等我确认后再改代码。”这样可以避免智能体直接写出巨大单文件，也方便你在修改前发现遗漏。
只生成最小 V1
先要求 Overview、Projects、Tasks、Payments 四个视图，导航能切换，新增任务表单能打开并显示成功状态。图表、拖拽和动画留到后面。每个视图都要有真实的空状态或 mock 列表，不能只放“Coming soon”。
运行并记录
安装依赖，启动开发服务器，用鼠标走一遍主流程。把“能用、没做、报错”分别记录到
V1_NOTES.md，不要把未实现写成已完成。再用 Tab 走一次导航和表单，记录焦点是否可见。
你应该看到什么
一个能启动的工作台：左侧导航可以在四个视图间切换；Overview 有今日任务、进行中项目和待收款；新增任务表单可以提交；手机宽度下内容会收拢而不是撑破页面。数据可以是 mock，但交互必须是真的。若智能体没有浏览器能力，它仍应报告启动 URL、测试命令和无法验证的部分，由你完成最终查看。
保留当前功能。先实现 Overview、Projects、Tasks、Payments 四个可切换视图和一个新增任务表单。请先列出组件与文件，再分两步修改；完成后运行已有命令并报告真实结果。生成失败时怎么反馈
如果页面白屏，先让智能体报告浏览器第一条错误和对应文件；如果按钮点击没有反应，检查它是否使用了真实 button、事件是否绑定、是否有 disabled 状态；如果构建失败，先修复第一条类型或导入错误，不要让它删除页面。每次只反馈一组问题，保留上一版可运行状态。
- 我保存了自己的
UI_BRIEF_NOTES.md。 - V1 至少有四个真实可切换视图。
- 至少一个按钮触发真实表单或状态反馈。
- 我记录了启动命令、键盘结果和未完成项。
V1 的价值是提供一个可以被检查的起点。下一节不靠感觉重做，而是拿证据写一组小修改。
在 `V1_NOTES.md` 中写三列：动作、看到的结果、下一步。例如“点击 Tasks→打开新增任务→表单出现但提交后没有反馈→下一轮只修保存状态”。这会把生成过程变成可追踪的实验，而不是一次性等待。若智能体没有浏览器能力，就把同样三列交给你自己填写，并明确标记“未由智能体验证”。
四个视图不需要四套复杂后端。体验课的目标是感受信息架构和反馈关系，mock data 可以固定，但“点击导航、打开表单、提交后反馈”必须能在浏览器中实际发生。
会挑毛病，AI 才改得到位
Review 不是挑刺，也不是让 AI 再生成一遍。你会选出最影响使用的三条问题，一次改一组，并留下 V1/V2 对比。
一条问题写完整
使用六段式记录：位置（哪个区域）；现象（现在看到什么）；影响（用户因此卡在哪里）；期望（改成什么关系）；不改变（功能、数据、结构保留什么）；验收（用什么宽度和动作判断完成）。位置越具体，智能体越不容易误改其他区域。
位置：Projects 列表的状态列。
现象：进行中、已暂停和已完成使用同样的黑色文字。
影响：用户需要逐行阅读，无法快速找到风险项目。
期望：保留文字，增加克制的状态色和清楚的对比度。
不改变：不改 mock data、导航和列表排序。
验收：1440px 与 390px 查看状态，键盘 Tab 能聚焦操作，Console 没有应用错误。
分组修改，保留证据
保存 V1
查看
git status和git diff，为 V1 建一个可识别的 Git 节点或复制一份项目。不要用危险命令覆盖现场。记录节点、截图和运行命令，后面才能判断变化来自哪里。一次改一组
第一组只处理层级和状态色；第二组再处理间距；第三组才考虑保存反馈。每组完成后运行项目，确认没有把功能一起改坏。若一组包含太多文件，先拆成更小的实验。
写 Refinement Prompt
把上面的六段式问题粘进去，并明确“保留功能、数据和正确结构；只修改这组问题；修改前后查看 diff”。不要用“全部重做”“恢复高级感”这类没有边界的句子。
验收 V2
在 1440px 和 390px 走一次导航、表单和返回路径，记录实际结果。若失败，保留现场并回到上一个明确可用节点。对比截图时只判断本轮列出的变化，不把新偏好混进结论。
保留现有功能、mock data 和页面结构。位置：___；现象：___；影响：___；期望：___。不改变：___。只处理这一组问题，完成后运行项目并报告 1440px、390px、键盘和 Console 的实际结果。
如何写最终结论
不要写“V2 更高级”。写清楚“V1 的状态列无法快速识别风险，V2 保留文字并增加状态色；在 390px 操作列改为行菜单；导航、表单和 mock data 保留；构建通过；仍未实现真实后端保存”。这样的结论能指导下一次修改，也能诚实说明边界。
把三条最重要的问题、实际修改文件、V1/V2 差异和未完成项写下来。这样下一次找智能体时，你带的是证据，不是“感觉不对”。
- 我做出了一个能在浏览器里打开和操作的迷你工作台。
- 我保存了自己的 Brief、V1 Review 和 V2 验收记录。
- 我能说明哪些功能保留、哪些问题被修改。
- 我知道还没完成的部分，而不是假装全部完成。
重新打开 完整版在线演示，用同一组问题对照自己的 V2：主任务是否更快被找到？卡片是否有主次？手机宽度下操作是否仍然完整？完整版是参考方向，不是要求像素级复制的答案。
免费体验解决的是“我能不能开始”。完整加餐会继续教你如何建立 token、选择工具、拆分信息架构、处理微交互和完成无障碍验收。
V1：四张摘要卡片同样突出，手机上操作列被挤出；V2：今日任务占主要宽度，辅助数字降低对比度，操作列收进每行菜单。保留：导航、mock data、表单提交。实际验收：1440px 主流程可完成，390px 无页面级横向溢出，Tab 能到达菜单，Console 无应用错误。
如果修改后只解决了颜色，却让按钮失去响应，不要把它算作成功。先记录失败，再恢复到 V1，拆出“视觉变化”和“交互变化”两组小任务。能说清楚为什么回退，也是版本安全的一部分。
想把一次 UI 练习变成可复用的产品工作流？
四个主线阶段会带你从 AI 协作与 Git，走到全栈、RAG、Agent 和工程化交付；FULL 路线另含 8 节 UI 设计加餐。