Design Sense Lab

Students start with a CSS boba cup illustration and adjust color dials — background, drink, berries. Then AI takes over: they describe a mood in words, and AI picks the colors. Three levels of prompting: vague → descriptive → specific. The opposite function flips every color, proving the power of contrast.

学生从CSS奶茶杯插图开始，调整色彩旋钮——背景、饮品、水果。然后AI接手：他们用文字描述一种情绪，AI选择颜色。三个层次的提示词：模糊→描述性→具体。反转功能翻转所有颜色，证明对比的力量。

Font family, size, weight, spacing — all controllable. Students discover that serif whispers "premium" while rounded sans-serif shouts "fun." Hierarchy exercises: squint at the card, can you tell what's the name vs the price? Persona round: design for Steve Jobs vs a 5-year-old.

字体族、大小、粗细、间距——全部可控。学生发现衬线字体低语"高端"，圆角无衬线大喊"有趣"。层次练习：眯眼看卡片，能分清名字和价格吗？人物设定环节：为乔布斯vs五岁小孩设计。

A hero banner with toggles — layout, Chinese background character, CTA style, price format. Students learn eye path, breathing room, focal point, and content hierarchy. Free canvas round: describe a whole visual world in words, AI builds it in CSS.

一个可切换的主横幅——布局、中文背景字、按钮风格、价格格式。学生学习视线路径、呼吸空间、焦点和内容层次。自由画布环节：用文字描述一个完整的视觉世界，AI用CSS构建它。

Four pre-built page variations: Classic, Dark Mode, Minimalist, Playful. Students pick a base and refine it with AI — adjusting sections, checking balance after every change. The personality round: define your OWN customer persona and watch AI reshape the whole page.

四种预建页面变体：经典、深色模式、极简、活泼。学生选择一个基础并用AI改进——调整各部分，每次修改后检查平衡。个性化环节：定义你自己的客户画像，看AI重塑整个页面。

The pivot session. Students build from a blank wireframe: pick layout, choose colors/fonts/shapes in a style tile, preview the theme, then drop real content in. The 4 principles — Unified Purpose, Intuitive Logic, Empathy, Cohesive Flow — are named for the first time. AI helps at three scales: fix one section, adjust the whole mood, or free-form describe a world.

转折点。学生从空白线框开始构建：选择布局，在风格色板中选择颜色/字体/形状，预览主题，然后放入真实内容。四大原则——统一目标、直觉逻辑、共情设计、连贯流动——首次被命名。AI在三个层面提供帮助：修复单个部分、调整整体情绪、或自由描述一个世界。

8 AI-generated boba tea photos in warm and cold sets. Students swap them in, toggle between sets, test image filters, and check if the theme survives real imagery. Section-by-section AI control: change the hero, the cards, or the about section independently.

8张AI生成的奶茶照片，分为暖色和冷色两套。学生将它们换入，在两套之间切换，测试图像滤镜，检查主题是否经受住了真实图片的考验。逐段AI控制：独立修改主横幅、卡片或关于部分。

The planning sheet: 5 pillars, each requiring specific decisions — not "nice colors" but "cream #FAF6F1 background, brown sugar accent." Self-check with 6 checkboxes. AI scores the plan 1-5 per pillar before unlocking the Build button. Design Boost toggle gives AI professional design guidelines behind the scenes.

规划表：五大支柱，每个都需要具体决策——不是"漂亮的颜色"而是"奶油色#FAF6F1背景，红糖色重点"。6个复选框自查。AI在解锁构建按钮前为计划逐项评分1-5分。设计增强开关在幕后为AI提供专业设计指南。

Start from an unstyled page — Arial, gray, zero personality. Transform it block by block: hero first (feel the mismatch with the plain cards below), then menu cards (feel the mismatch with the plain footer), then the rest. CSS-only approach: text content stays untouched, only visual presentation changes.

从一个无样式页面开始——Arial字体，灰色，零个性。逐块改造：先做主横幅（感受与下方朴素卡片的不协调），再做菜单卡片（感受与朴素页脚的不协调），最后是其余部分。纯CSS方法：文字内容不变，只改变视觉呈现。

A structured review checklist across all 5 pillars — 9-10 items per pillar, each with a "where to look" hint. Auto-scoring dots. The instructor picks one pillar and everyone compares across all pages. "Is the heading font the same across all sections?" — that specific.

覆盖五大支柱的结构化评审清单——每个支柱9-10个检查项，每项都有"在哪里看"的提示。自动评分点。导师选择一个支柱，所有人跨页面比较。"标题字体在所有部分中是否一致？"——就是这么具体。