UI Quest：像多邻国一样学习网页 UI

这不是一份普通学习路线，而是一套「关卡制」网页 UI 训练系统。你每天只做一个很小的任务，提交一个明确成果，然后用评分表获得反馈、重做或进入下一关。

最终目标：

做出一个高级黑白、宇宙背景、电影感动态个人主页。

你每天怎么学

每一课都按同一个节奏走：

1. 读目标：今天只学一个技能点。
2. 做任务：按步骤产出一个小作品或分析结果。
3. 自评分：用 rubric 给自己打分。
4. 提交反馈：把截图/链接/文字贴给 Codex。
5. 修正：只改 1 到 2 个最重要的问题。
6. 通关：达到通关线后进入下一课。

通关规则

项目	规则
每课满分	100
通关线	70
优秀线	85
每天建议时间	15 到 30 分钟
每天必须交付	1 张截图、1 段分析或 1 个页面链接
反馈方式	你提交成果，我按 rubric 给分并告诉你下一步

目录

• 课程系统说明
• 30 天课程地图
• 学习进度表
• 案例展示
• 标准作业示范
• 反馈协议
• 作业提交模板
• 素材清单

第一阶段课程

先完成这 6 课，不要跳：

1. Lesson 01：看懂高级黑白页面
2. Lesson 02：拆解一个 Hero 首屏
3. Lesson 03：建立黑白视觉板
4. Lesson 04：选择宇宙背景素材
5. Lesson 05：画出首页线框图
6. Lesson 06：完成黑白宇宙首屏静态稿

完成 Lesson 06 后，再进入动效和 WordPress 发布。

学一课之前先看什么

每节课开始前，按这个顺序看：

1. 先看 showcase/：理解目标风格。
2. 再看 examples/：知道作业做到什么程度算合格。
3. 最后做 lessons/：提交自己的版本。

你需要准备什么

第一周只需要：

• 浏览器
• GitHub 仓库
• 能截图
• 3 个你喜欢的黑白网页/海报参考
• 1 到 3 个宇宙背景视频候选

暂时不需要：

• 会写代码
• 会 Figma 高级功能
• 会 WordPress 插件
• 会动效库

重要提醒

不要把服务器密码、WordPress 密码、QQ 邮箱授权码、API Key 放进这个仓库。