Week 6 · Iterate Like an Engineer

Your project is online — but is it any good? Today, two jobs. First, make it clear: rebuild your page so a total stranger gets it in five seconds and knows exactly what to do. Then trade pages with your group and tell each other the truth.

Second, work like an engineer: turn that feedback into issues, let AI ship each fix as a Pull Request, and review before you merge. One habit runs through all of it — read what your AI says. Don't look away the second it starts; read what it did and what it's asking you to do.

Every grey box is a prompt you can copy — drop it into Codex or Cursor. Keep this page open all class. Stuck? Mia is here. Homework: file 3 issues before you leave.

01 · Today

02 · Make it clear to a stranger

You know what your project does — but a first-time visitor doesn't, and won't try hard to figure it out. The goal: someone who's never seen it should get what it's for and know how to use it. First prompt: have AI play an impatient stranger and walk your page, listing everything that's confusing, unclear where to click, or broken on a phone — then fix the worst of it.

请你扮演一个第一次打开我网站、还有点没耐心的陌生人——你不知道这个网站是干嘛的,也不想花力气研究。请你真的把我的网页从头到尾走一遍(先读我的 index.html,在浏览器里打开看),然后用大白话给我列三类问题:

① 看不懂:打开五秒内,我看不出这个网站是干嘛的、为什么我要用它,具体是哪里没讲清楚?
② 不知道点哪:我想用它,但不知道第一步该点什么、填什么,哪些按钮和步骤让人犹豫?
③ 手机上坏了:在手机这种窄屏幕上,有没有挤在一起、点不到、看不全、要左右拉的地方?

每一类都给我具体的、能动手改的清单(指出在页面哪个位置),别说空话。列完之后,挑最影响「陌生人一眼看懂」的几条,直接帮我改到 index.html 里,改完告诉我你改了哪些地方。

A wall of text is hard to read. Second prompt: have AI add simple images or icons so the page is easier to grasp at a glance — all pure front-end (SVG / emoji / CSS), and it tells you exactly where each one goes so you can swap them later.

我的网页现在太干巴巴了,想加一点配图和图标让界面更直观、更好看(纯前端,不接任何付费服务)。请帮我:

1. 先看我的 index.html,判断这个页面在哪些地方加图最有用——比如顶部一张能说明主题的图、几个功能旁边的小图标、或者一个占位的封面图。
2. 用纯前端能直接用的方式生成它们:可以用 SVG 直接画图标、用 emoji、或用纯 CSS 画简单图形;如果要真实照片那种图,告诉我去哪里找免费可商用的图、怎么放进项目。
3. 把这些图和图标实际放进网页对应位置,并明确告诉我每一个放在了哪里、对应页面的哪一块,方便我以后自己替换。

目标是让第一次来的人扫一眼就大概知道这是干嘛的。我零基础,改完讲清楚你动了哪些地方。

03 · Design it as a picture first

Most people jump straight to "AI, build me the page" — and get back something that looks nothing like what they pictured, then burn time pushing it back and forth. Here's the upgrade: AI can now generate a real picture of your screen, not just describe one. Codex can call GPT image (gpt-image-1), you can use Doubao, or any other image generator you have on hand — whichever is handy. So have it draw an actual visual of the page first — the colors, the style, the layout. You pick and tweak the image until you like it, then hand that picture to Codex or Cursor and let it build the real page from it. You stay in control of what the thing ends up looking like.

我在做一个关于【一句话你的社会议题】的网页。先别写功能代码——请用 AI 生图(Codex 里的 GPT image,或者我用豆包等工具)帮我生成一张这个网页的界面设计图:风格是【在这里写你想要的风格,比如简洁、活泼、科技感】、配色【写你想要的主色调】、页面上要有哪些区块和按钮。先出图,我看顺眼、调好了再让你写代码。
这是我用 AI 生成、并挑好的界面图【把图贴在这里】。请照着这张图,用纯 HTML + CSS + JavaScript 把界面实现成一个真能打开的页面:布局、风格、配色都按图来,先把样子搭出来(具体交互功能可以先放占位,之后再加)。

The point: AI can really make pictures now — generate the visual, get it looking right, then let it write the code. That beats coding blind and reworking it ten times. Once the page is standing, you add the real features one at a time with the issue → PR → review loop from the rest of today's class.

04 · Trade pages, trade feedback

This is the heart of Part 1. Get into groups of 3–4 and open each other's live URLs on your own phone or laptop — be the stranger. Can you tell what it's for in one glance? Do you know how to use it? Where exactly do you get stuck? Say it out loud, be specific, and give every person at least one concrete suggestion. Write down the feedback you get — in a few minutes it becomes your issues.

05 · Turn feedback into issues

Now Part 2 — work like an engineer. You've got a pile of feedback: from your group, plus your own ideas. Don't fix it all in one messy go. Break it into issues — one issue = one specific task. A repo full of clear issues is your to-do list, and it's how real teams keep track of what needs doing. Use AI to turn one piece of feedback into a clean issue and file it in your repo:

我刚做完同学互评,收到了一些关于我网站的反馈,自己也有一些想改的地方。请帮我把其中一条反馈整理成一个清晰的 GitHub issue,并直接建到我的仓库里。记住:一条 issue 只对应一个具体任务,别把好几件事堆在一起。

这条反馈是:<在这里写下你收到的一条具体反馈,比如「打开网站不知道这是干嘛的」>

请把它整理成包含三部分的 issue:
① 标题:一句话说清要解决的问题;
② 具体要改什么:用大白话说明现在是什么样、希望改成什么样、要改页面的哪个位置;
③ 怎么算改好了:列出能验证「这条做完了」的标准(比如「第一次打开的人五秒内能看出网站是干嘛的」)。

建好之后,把这个 issue 的链接发给我。我零基础,如果建 issue 需要我在 GitHub 上点哪里,一步一步告诉我。

06 · Let AI ship it as a PR

Now let AI actually do the work — but not by editing main directly. Have it open a Pull Request (PR): it makes the change on a new branch and bundles it as a proposal you can look at before it goes live. Why bother? Every change is recorded, you can see exactly what changed (the diff), and if something breaks you can roll it back.

请帮我从我仓库的 issue 列表里挑一个 issue,用 Pull Request 的方式来改,而不是直接改 main 分支。具体这样做:

1. 选一个你觉得改起来最直接的 issue(告诉我你选了哪个、为什么)。
2. 新建一个分支,在这个分支上按 issue 的要求改我的代码,别动 main。
3. 把这次改动整理成一个 Pull Request(PR),PR 的说明里写清楚:解决了哪个 issue、改了什么、怎么验证。
4. 告诉我去 GitHub 的哪个页面、点哪里,能看到这次到底改了哪些内容(也就是 diff:哪几行被加了、哪几行被删了)。

我零基础,需要我在 GitHub 或终端里操作的地方,一步步带我。先别合并(merge),下一步我们要先 review。

07 · Review before you merge

One step before it's real: review. A PR is a proposal — read it before you accept it. Let AI (or the /review command in your tool) go over the diff and flag anything obviously wrong or half-done. Only once it's clean do you merge — and the moment you do, Vercel picks it up and deploys the new version automatically.

我有一个还没合并的 Pull Request,合并前想先 review 一遍。请帮我审这次改动:

1. 把这个 PR 的 diff(改了哪些内容)从头到尾看一遍。如果我用的工具里有 /review 这类命令,就用它来审。
2. 检查有没有明显的问题:有没有改错、有没有漏改、会不会把原来能用的地方弄坏、跟这个 issue 要求的是不是一致。
3. 把发现的问题列给我;如果没问题,明确告诉我「可以合并了」。
4. 确认没问题后,带我把这个 PR 合并(merge)到 main。合并完之后 Vercel 会自动部署新版本——告诉我怎么打开线上网站、确认这次改动真的生效了。

我零基础,每一步要我点哪里、做什么,讲清楚。

08 · Read what your AI says

🔑 The one rule that saves you the most pain today, and it's free: don't look away the second your AI finishes. People lose twenty minutes right here, over and over. The AI didn't fail — it told you it needs you to do something, and nobody read it.

Build the habit today: when the AI stops, read first, then act. This single rule will save you more time this class than any prompt on this page. Whenever you feel stuck, the very first move is always the same — re-read what your AI just told you.

09 · Leave with

10 · Before you go — class feedback

Two minutes, every class. Tell us what landed and what didn't — it directly shapes next week's class.