狸想岛 · AI 实战学习社区

🎯 学 gstack 的设计实现系统：从 design-shotgun 选定的方向出发，生成完整的、可直接使用的 HTML/CSS 页面——不是"看起来不错"的截图，而是真实的、响应式的、包含交互状态的代码。 ⏱️ 预计时间：20 分钟

[!tip] 初学提示：如果你还不熟悉 HTML/CSS，可以先从理解案例中的设计系统约束（DESIGN.md）开始，它定义了颜色、字体、间距等关键变量。

[!quote]- 📖 原Skill精要 技能名称：design-html（代码实现维度） 核心功能：与 [[L6-12-设计稿转代码|design-html]] 共享同一个 Skill，本课聚焦其从设计方向到完整代码的工作流——接收 design-shotgun 选定的视觉方向、直接描述需求或参考 URL，生成完整的、响应式的、含交互状态的生产级 HTML/CSS 页面。 所属体系：gstack 虚拟工程团队 协作关系：任何计划类 Skill 的后置实现步骤，支持与现有 DESIGN.md 无缝集成

§1 课程概览

[!info] 白话小课堂 一句话：把设计方向变成能直接在浏览器里打开的真网页——不是截图、不是线框图，是带响应式、带交互状态的 HTML/CSS 代码。

为什么重要：设计稿再好看也只是"看起来不错"，design-html 要保证的是"用起来不错"——移动端按钮该 sticky 在底部就得 sticky，hover 状态该有反馈就得有，颜色必须用 DESIGN.md 里的品牌色而不是 AI 默认的紫色渐变。

核心心法：生成的代码是"参考实现"而非"直接上线的代码"——设计师/开发者用它理解设计意图，然后在自己的框架（React/Vue）中按同样逻辑重新实现。代码质量的标准不是"能跑就行"，而是"品牌一致 + 响应式正确 + 交互完备 + 反 AI Slop"。

§2 结构拆解

核心特征

管理对象：视觉方向 → 生产级 HTML/CSS 代码的转换管线
核心原则：真实代码非截图 —— 产出可直接在浏览器打开的完整页面
关键设计：
- 反 AI Slop：主动抑制紫色渐变、居中一切、泡泡圆角等 AI 默认审美
- DESIGN.md 驱动：所有颜色/字体/间距从设计系统单一事实来源读取
- 四层输出：HTML 结构 + CSS 样式 + 响应式断点 + 交互状态
- 无障碍内置：ARIA labels、语义化 HTML、焦点管理

通用结构

输入层： → 视觉方向（来自 design-shotgun 的选定方向） → 或直接需求描述 / 参考 URL → 约束源：DESIGN.md（品牌色、字体、间距 scale、圆角） ├── 页面结构生成器 │ ├── 布局引擎（Hero / 内容区 / 侧栏 / 底部） │ ├── 组件映射（Button / Card / Input / Modal → HTML 元素） │ └── 响应式断点策略（移动单列 ↔ 桌面多列） ├── 样式引擎 │ ├── 品牌色注入（Primary / Secondary / Neutral / Semantic） │ ├── 字体层级（h1-h6 / body / caption） │ └── 间距系统（4px/8px scale 自动应用） ├── 交互层 │ ├── CSS-only 交互（hover / focus / active / disabled） │ ├── JS 交互（变体切换 / 数量加减 / 飞入动画 / 图片联动） │ └── 无障碍标记（ARIA labels、tabindex、语义标签） └── 反 AI Slop 过滤器（检查：紫色渐变？3列网格？16px圆角？→ 替换为品牌默认值）输出层： → 完整 HTML 文件（可直接在浏览器打开） → 内联或独立 CSS → 响应式：移动端 / 平板 / 桌面 → 交互状态：hover / focus / active / disabled

§3 从方向到代码

design-html 的工作流

输入： → design-shotgun 选定的视觉方向 → 或直接描述需求 → 或参考 URL（模仿风格）

输出： → 完整的 HTML 文件 → 内联或独立的 CSS → 响应式断点（移动端 / 平板 / 桌面） → 交互状态（hover / focus / active / disabled） → 无障碍标记（ARIA labels、语义化 HTML）

核心原则

→ 生成的是真实代码，不是截图 → 可直接放入项目中（或作为参考重构） → 避免 AI Slop 特征（不使用紫色渐变、3 列网格等） → 遵循 DESIGN.md 的品牌约束

§4 电商 Skill 案例：家居商品详情页从设计到代码完整流程

🛒 实战案例：接L6-41，家居电商品牌确定了北欧极简风方向后，需要将商品详情页从DESIGN.md中的设计约束转化为可用的HTML/CSS代码。使用/design-html实现从设计系统到交互代码的完整转化。

DESIGN.md约束输入：品牌色Primary #C4956A(蜜橡木色)+Secondary #2D6A4F(森林绿)、字体标题Playfair Display+正文Inter、圆角4px(避免AI默认的16px泡泡圆角)、间距8px基准scale、品牌摄影风格"自然光+浅景深+暖调"。设计系统已定义特色组件——ProductHero(商品大图+缩略图切换)、MaterialCard(材质成分卡片)、DimensionBadge(尺寸徽章)、CareInstruction(保养说明)。

页面结构生成：Hero区——商品主图320px高+缩略图横向滚动(6图，active状态2px品牌绿边框)、商品信息区——标题"橡木床头柜"Playfair Display 36px+价格¥899(Inter Bold 24px品牌色)+变体选择器(颜色3选项圆角方形色块/尺寸3选项文字chip)+库存状态"In Stock"+数量选择器(-/+)+加入购物车按钮(品牌绿#2D6A4F full-width移动端/sticky底部)、材质说明区——MaterialCard组件展示"北美白橡木/FSC认证/哑光清漆"、尺寸规格——DimensionBadge宽45×深40×高50cm、保养说明——CareInstruction可折叠手风琴、推荐商品——水平滚动Snap scroll 4卡片。

交互实现：变体切换(颜色chip点击→主图联动切换、尺寸chip点击→价格联动更新(不同尺寸不同价格))、数量+/-→实时小计计算、加入购物车→飞入动画(商品图片缩小飞入导航栏购物车图标)+购物车角标数字+1、图片hover→cursor变为放大镜+覆盖层提示"点击查看大图"、移动端加购按钮sticky底部(CSS position:sticky bottom:0 z-index高于内容区)。所有交互在纯CSS+少量vanilla JS中实现（不依赖框架，可直接嵌入React/Vue项目）。

响应式实现：移动端375-767px——单列布局Hero 220px高+信息区在图片下方+加购按钮sticky底部+推荐商品2列网格；平板768-1023px——Hero双列(图左信息右)+推荐商品3列；桌面≥1024px——Hero双列大图480px+推荐商品4列。所有断点使用CSS Grid+minmax()实现流式自适应。

代码质量验证：生成的HTML/CSS通过——AI Slop检测(紫色渐变=0、3列圆形图标grid=0、text-align:center=12%远低于60%阈值)、品牌色使用准确(100%使用#C4956A和#2D6A4F，0处紫色)、Lighthouse无障碍评分96/100。输出代码可直接放入项目中作为product-detail.html+product-detail.css使用。

🔑 启示：design-html与通用"AI生成HTML"的核心区别——它是在DESIGN.md约束下生成代码，而非从AI的默认训练分布中采样。通用AI生成的商品详情页有高概率出现紫色渐变Hero、泡泡圆角、居中一切——但这些模式被DESIGN.md的品牌规则主动抑制。约束不是限制创造力——它是确保生成代码"属于这个品牌"而非"看起来像AI生成的任何一个电商页面"。

[!info] 参考来源 Design-to-code 流程参考了 design/spark 的 HTML/CSS 生成模式。响应式设计实践参考了 Every Layout 的 CSS 布局原则。

§5 掌握检验

Q1：design-html 与 design-shotgun 的协作关系是什么？

A) design-html 替代 design-shotgun——两者功能重叠
B) design-shotgun 负责"广度探索"（同时生成多个视觉方向供选择），design-html 负责"深度实现"（将选定的方向转化为完整的、可直接使用的 HTML/CSS 代码）
C) design-html 在 design-shotgun 之前运行
D) 两者没有关联

Q2：design-html 生成的代码输出包含哪些内容（与"截图"或"线框图"的区别）？

A) 仅输出 UI 截图供设计师参考
B) 输出完整的 HTML 文件 + CSS、响应式断点、交互状态（hover/focus/active/disabled）、无障碍标记（ARIA labels、语义化 HTML）
C) 仅输出 CSS 样式，不包含 HTML 结构
D) 仅输出设计规范文档，不包含代码

Q3：DESIGN.md 中定义了品牌色 #FF6B35（橙）、字体 Inter + Space Grotesk、圆角 8px、间距 4px scale——如果在 code generation 时忽略了 DESIGN.md 的约束而使用了 AI 默认偏好（紫色渐变、居中一切、泡泡圆角 16px），生成的代码会出现什么问题？请从"代码可用性"和"品牌一致性"两个角度分析。

Q4：design-html 的核心原则中提到"避免 AI Slop 特征"。如果直接让一个通用 AI 模型生成商品详情页的 HTML/CSS，它会有多大概率使用紫色渐变？为什么 design-html 需要有意识地抑制这些默认模式——这与"信任 AI 的能力"矛盾吗？

Q5：电商商品详情页包含的交互状态（变体切换、数量 +/-、加入购物车飞入动画、hover zoom）中——哪些可以在纯 CSS 中实现？哪些需要 JavaScript？design-html 应该如何处理"CSS-only"和"需要 JS"之间的边界？如果 design-html 生成了需要 JS 的交互但项目使用的是 React，这个代码能直接用吗？

Q6：design-html 的响应式设计包括移动端（单列，图上信息下）和桌面端（双列，图左信息右）。这两个布局不仅仅是"列数不同"——它们的信息架构是否也不同？在移动端，"加入购物车"按钮通常固定在底部（sticky），在桌面端则放在信息区。请分析：如果 design-html 只改了列数但没有改变交互元素的布局策略（如移动端按钮也在页面中部而非固定在底部），会产生什么用户体验问题？

§6 答案

点击查看答案

Q1：B —— design-shotgun 和 design-html 是"探索"和"实现"的上下游关系。

Q2：B —— design-html 生成的是真实的、可直接使用的代码，不是截图或线框图。

Q3：代码可用性角度——代码功能上可以正常运行（颜色不对但不会崩溃）。品牌一致性角度——用了紫色渐变的页面看起来"像一个通用 AI 生成的模板"而非"Mega Shop 的专属设计"。后果：①用户打开页面后无法建立品牌认知（"这个配色方案和我上次看到的 Mega Shop 不一样"）；②品牌资产被稀释——品牌花了大量市场费用让用户记住"橙色 = Mega Shop"，设计不一致让这个投资打了折扣；③后续设计维护困难——如果设计系统和实际代码不一致，每个新页面都从"偏离的代码"开始累积更大的偏差。

Q4：通用 AI 使用紫色渐变的概率极高——因为训练数据中 Tailwind UI 等模板大量使用了 from-purple-600 to-indigo-600，模型学会了"紫色渐变 = 好看的 UI"。Suppress 默认模式不是"不信任 AI"，而是"校准 AI 到项目特定上下文"——通用 AI 的能力在于"基于训练数据生成多样化输出"，但每个项目的设计需求是"特定"的——不是"多样性"而是"一致性"。这就像你信任一个画家的能力，但你仍然需要告诉他"画我的肖像，不是画蒙娜丽莎"。

Q5：CSS-only：hover zoom（transform: scale）、变体选择按钮的 active 状态、数量 input 的 focus 样式。需要 JS：变体切换→图片联动（图 src 改变）、数量 +/-→实时价格更新（DOM 操作）、加入购物车→飞入动画（需要 JS 触发 CSS animation + 购物车角标更新）。边界处理：design-html 生成的代码应该用 vanilla HTML/CSS/JS（或最小依赖），目标是"可直接预览"——用户可以将代码放到任何框架中。如果项目使用 React → 需要开发人员将 vanilla JS 逻辑移植到 React 组件中（事件绑定改为 onClick props、DOM 操作改为 state 管理）。design-html 生成的代码不是"直接上线"——是"作为参考实现"，开发人员理解设计意图后在自己的框架中实现。

Q6：用户体验问题：移动端用户拇指的自然活动区域是屏幕下半部分——如果"加入购物车"按钮在页面中部（和桌面端一样在信息区），用户看完商品描述后需要向上滑回中部才能点击——额外的手指移动 + 可能误触其他元素。固定底部（sticky bottom）的按钮让用户任何时候都能一键购买——这是移动电商的交互标准。如果 design-html 只改了列数但没有考虑交互元素的触达性，桌面端的"好用"在移动端变成了"难用"——用户不会投诉"按钮位置不好"，只是流失了——更糟，因为品牌不知道用户为什么流失。

（5/6 通过）

L6-42：设计到代码 —— AI帮你把设计稿一秒变成真实网页