入门 · 12 个动手实验

用 Agent 做出能交付的网页作品

从一句自然语言开始，练习描述、构建、检查与发布。12 个动手实验，每课留下一个可打开、可检查、可分享的作品。

开始第一课查看目录

你会带走什么

不是看完，
是做完

每一项能力都对应一个真实文件和一条检查证据。

01写出 Agent 能执行的任务

用目标、内容、约束和验收替代模糊形容词。

02看懂网页结构并能定位修改

分清 HTML、CSS 与 JavaScript 各自负责什么。

03把信息做成真正有用的页面

表格、图表、知识单页、看板与决策工具。

04用证据把作品交付出去

桌面与移动检查、无障碍、元数据与公开发布。

完整课程目录

三幕，12 个实验

每一课都有完整步骤、可复制 Prompt、完成检查和练习产物。无需注册，直接开始。

第一幕 · 把想法变成页面

从描述与结构开始，完成最初四个作品。

01第一个可打开的作品认识工作区、文件与预览，让 Agent 生成一张个人探索卡。22 分钟

本课产物hello-artifact.html

完成检查

文件可打开，姓名、目标与真实链接完整显示。

开始本课

02把“好看一点”说清楚用目标、内容、约束和验收四段式 brief 完成第一次有证据的迭代。28 分钟

本课产物before-after.html

完成检查

至少写出 3 条可观察约束，并能指出对应结果。

开始本课

03看懂网页的三层理解 HTML 管结构、CSS 管呈现、JavaScript 管行为。31 分钟

本课产物web-anatomy.html

完成检查

标题层级正确，样式与内容分离，按钮可用。

开始本课

04让数据排得明白把混乱记录整理为可扫读的数据表，处理单位、对齐与窄屏布局。30 分钟

本课产物tools-table.html

完成检查

表头含单位，数字右对齐，移动端仍能读。

开始本课

第二幕 · 让信息帮助决策

把数据、解释与看板做成能被使用的表达。

05让数据开始讲故事选择合适的图表与关系图，用标题、注释和来源说明结论。34 分钟

本课产物data-story.html

完成检查

不看颜色仍能理解，结论能在 10 秒内复述。

开始本课

06做一页讲清一个概念把长资料压缩成有开头、证据、例子与结论的知识单页。32 分钟

本课产物one-page-explainer.html

完成检查

首屏说清主题，正文层级不超过三级。

开始本课

07做一个真正有重点的看板从堆卡片转向信息优先级，让用户先看到结论再决定是否下钻。35 分钟

本课产物learning-dashboard.html

完成检查

一个主指标、两个辅助重点，空态有下一步。

开始本课

08把选择题做成决策工具制作可比较方案、筛选条件与权重的选型器。34 分钟

本课产物decision-matrix.html

完成检查

4 个选项、3 个维度，差异可扫读，筛选可恢复。

开始本课

第三幕 · 让作品回应并发布

加入交互、设计系统和完整交付检查。

09让作品回应用户加入输入、筛选、勾选和本地保存，让页面从海报变成小工具。35 分钟

本课产物practice-planner.html

完成检查

键盘可操作，刷新保留本机进度，清空有恢复路径。

开始本课

10同一作品，长成你的样子建立颜色、字体、间距与组件规则，用设计 token 系统化个性化。29 分钟

本课产物theme-system.html

完成检查

主题切换不改结构，组件状态一致，中文排版清楚。

开始本课

11从“能跑”到“能交付”完成响应式、无障碍、异常状态与真实内容压力测试。33 分钟

本课产物qa-report.html

完成检查

无横向溢出，焦点可见，极端内容不破版。

开始本课

12发布你的作品集整理文件、写作品说明、生成分享信息并发布。30 分钟

本课产物portfolio/index.html

完成检查

链接有效，元数据完整，发布后公开页面回归通过。

开始本课

从第一课开始

先做出一个
能打开的作品

打开你的 Agent，跟着步骤做。第一课约 22 分钟，会留下一个能在浏览器直接打开的 HTML 文件。

开始第一课

用 Agent 做出能交付的网页作品

不是看完，是做完

三幕，12 个实验

先做出一个能打开的作品

不是看完，
是做完

先做出一个
能打开的作品