原文：CreativeDesignTools · GPT 5.6 Sol Builds an Awwwards-Level Website (Full Build)
日期：2026年7月20日
本教程基于 YouTube 完整复盘整理，附带提示词文件链接。
目录
1. 为什么是 GPT 5.6 Sol
OpenAI 在 2026 年发布的 GPT 5.6 系列中，Sol 是能力最强的型号。它有两个对前端设计至关重要的超能力：
第一个：极强的前端编码能力。 你描述布局、动画、交互行为，它直接生成完整的 HTML/CSS/JS。不需要手动调框架，不需要切工具。
第二个：原生图像生成。 同一个 Chat 里，Sol 既能写代码也能生图。这意味着：
- 上下文贯穿整个 Chat，Prompt 之间不会丢失一致性
- 你不需要在 Midjourney → Photoshop → VS Code 之间来回切换
核心优势：在同一会话中，编码和图像生成共享模型对「设计整体」的理解——角色长什么样、页面布局怎么排、哪些元素需要透明——全部在一个上下文里协调，而不是靠外部拼凑。
2. 找灵感但不抄袭：Awwwards 原则汲取法
任何好设计都始于灵感收集，但关键是如何不变成抄袭。
推荐灵感源：
- Awwwards —— 每个项目都是真实上线、经过评审的设计，不是概念稿
- Dribbble —— 适合观察视觉趋势和细节处理
- Aura（模板市场）—— 独特的模板设计，与 AI 生成的风格互补
正确做法：
从多个网站汲取原则——动画类型、布局节奏、交互模式——然后将它们编织成原创风格。
具体来说：
- 打开 Awwwards，找到 3-5 个你喜欢的项目
- 分别记录它们各自的亮点：A 的入场动画、B 的布局节奏、C 的视差处理
- 在自己的 Prompt/Brief 中组合这些原则，但刻意不要复制任何具体模板
这就是文中说的关键原则：Copy the principle, not the template.
3. 定义风格：Neo-Futuristic Streetwear
这篇教程的目标风格是 Neo-Futuristic Streetwear（新未来主义街头服饰）——一种受动漫和赛博朋克启发的视觉语言。
风格特征：
这个风格的选择不是随机的——它天然适合滚动驱动动画和视差效果，因为多层次的视觉结构能充分展示分层动画的冲击力。
4. 一条 Brief 驱动整站
写 Prompt 时，一条清晰的 Brief 比反复迭代更重要。
这条 Brief 包含几个关键要素：
- 目标：构建一个 Awwwards 级别的 Landing Page 模板
- 灵感约束：从多个 Awwwards 网站汲取灵感，但不复制任何具体设计；只取动画、效果、交互的原则
- 核心体验：以滚动驱动动画（Scroll-Driven Animation）为主轴
- 图像策略：模型自行生成所有素材图片，确保角色与视觉风格一致
- 主题选择：选择一个当前流行的主题（Neo-Futuristic Streetwear）
为什么一次性 Brief 更有效？ 因为 Sol 的上下文窗口是贯穿整个 Chat 的。你给一条完整的 Brief，模型就在内部建立了所有约束条件——代码、图像、动画——全部在同一套规则下运作，不会出现「角色穿帮」或「风格断层」。
5. 让 AI 先出规划，再写代码
在让 Sol 写任何代码之前，先让它出规划：主题、视觉风格、分区方案。这是避免浪费 Token 的关键步骤。
做法： 在 Brief 最后加一句话：「先给我出一个主题方案、视觉方向和分区规划，等我确认后再开始写代码。」
这样 Sol 会输出类似这样的内容：
- 主题：VOID/03 —— Neo-Futuristic Streetwear 服装系列发布页
- 分区规划：Hero → Lookbook（横向滚动）→ Commerce → Drop Index → CTA/Footer
- 动画方向：入场动画、滚动绑定视差、指针视差、横向滚动
你跟 AI 做一次「设计评审」，确认方向后再进入编码阶段。这一步看似增加了沟通，实际省掉了大量后撤重写。
6. 一致性 AI 角色：不变量方法
这是整篇教程最核心的技巧之一——让 AI 生成的同一个角色在多张图片中保持外观一致。
关键在于「不变量」（Invariants）：即你要求模型在每一张图里都不能变的属性集合。
不变量清单（以本教程为例）：
- 上装：黑色 Techwear 夹克 + 左肩红色装甲片（硬壳材质）+ 电蓝色导气管
完整的不变量 Prompt：
"Every image must feature the same model with the same face. A woman with braided white hair. She wears a black techwear jacket with a red hard-shell armor piece on the left shoulder and an electric blue cord across the chest. Black tactical gloves. A textured pouch on the chest. Black cargo pants and matching tactical boots. No other outfit variations."
将这个 Prompt 放在每条生图指令之前（或作为整个 Chat 的系统级约束），Sol 就会在每一张生成图中保持外观一致。由于它在同一个 Chat 上下文中工作，不需要反复粘贴——只需引用「same invariants」即可。
7. 生成多组 Pose，挑选 Hero 图
不要只生成一张图就定稿。尽可能多地生成不同 Pose，然后从中挑选最适合版面布局的一张。
本教程中生成了这些 Pose：
如何选择 Hero 图：
关键看画面填充度。以本教程为例：
- Crouching Hero Pose 填满了版面的右侧空间，对角线结构有冲击力，展现了「街头态度」
把图片放入版式框架中看——填充度、动态感、气场三个维度综合评估。同一张图裁切不同的位置也可能产生完全不同的效果，多试。
8. 绿幕法 + CSS 阴影：透明 PNG 切割术
要实现 Hero 分层视差效果，需要透明背景的角色 PNG。清洗透明背景的标准方法：
第一步：用「绿幕」背景生成原图
在生图 Prompt 中要求：
"Place the subject on a perfectly flat, even matte green background. The green must NOT appear anywhere on the garment or the subject. No floor, no shadow, no gradient — the entire background filled with this solid color."
选择绿色（或任何高对比色）的原则：这个颜色不出现在人物或服装上。如果角色穿绿色衣服，就改用紫色或亮蓝色替代。
第二步：要求模型确认四角透明
"After cutting out the green background, confirm all four corners of the resulting PNG are fully transparent."
四角全透明 = 背景被完整移除。 如果有一角不透，说明切割不干净。
第三步：用 CSS 阴影替代内嵌阴影
关键细节——不要把阴影直接画在 PNG 上，而要用 CSS 控制：
这样做的好处：阴影可以后期随意调整颜色、模糊、偏移，而不需要重新生成图片。如果把阴影画在 PNG 里，就只能换图了。
最终效果： 透明 PNG 叠在背景层之上→背景层独立滚动和视差→人物层独立运动→两层叠加形成景深感。
9. Hero 入场动画与滚动绑定
有了透明 PNG 分层之后，动画就有了发挥空间。
入场动画： 页面加载时，所有元素从不同方向、以不同速度入场：
实现思路（CSS/JS）：
滚动绑定（Pin + Scrub）： Hero 区域被「固定」在视口中，滚动进度控制内部元素的位移。核心是 Scroll-Driven Animations API 或 Intersection Observer + transform 组合：
关键点： Hero 的 pin + scrub 让用户滚动时有一种「穿过场景」的感觉，而不是简单的淡入淡出。
10. 横向滚动 Lookbook
这是教程中最惊艳的交互——纵向滚动驱动横向滚动的 Lookbook 画廊。
原理： 利用 position: sticky 或 JavaScript 拦截纵向滚动事件，将其映射为容器的水平偏移。
实现思路：
本教程中的配置：
别忘了考虑 Header 的高度——Header 会占据顶部空间，固定定位会影响视口的计算。确保每张卡片的可见区域是「减去 Header 高度后的剩余视口」。
11. 指针视差与回弹动画
在 Hero 和 Lookbook 卡片中，鼠标移动驱动内部元素的相对位移。
基本逻辑： 监听鼠标在容器内的位置 → 计算归一化的偏移量（-1 到 1）→ 应用到各层元素的 transform 上，每层的移动速度不同（近层快，远层慢）。
回弹（Snap Back）是关键细节：
当鼠标移出卡片区域时，如果不做处理，元素会「卡在」偏移后的位置。下次鼠标进入时，transform 从偏移值跳回 0，出现跳跃。
正确的做法： 鼠标离开时触发 snap back 动画：
效果： 鼠标离开 → 元素平滑回到原始位置 → 再进入时无缝继续追踪。没有跳跃。
12. Reduce Motion 无障碍支持
不是所有用户都适合视差动画——部分用户有运动敏感（motion sickness）。无障碍不是加分项，是必选项。
检查清单：
- 所有
transform 动画在 prefers-reduced-motion: reduce 下复位
- 所有
animation 在 reduce 模式下被禁用
不要等到用户投诉才加。从模板层面就内置支持。
13. 电商区、Drop Index 与 CTA
非动画区也和 Hero 一样重要——动画过多反而是干扰。
Commerce 区：
Drop Index（悬停预览索引）：
- 一行大字排版（Big Typography），视觉冲击力强
CTA + Footer 区：
设计原则： 节奏感——Hero 和 Lookbook 高交互 → Commerce 静谧聚焦 → Drop Index 轻交互 → CTA 强引导。不是每页都要炸，该安静时安静。
14. 总结与资源
核心工作流回顾
- 一条 Brief + 一份规划：先出方向，确认再写代码，省 Token
- 不变量方法：定义角色的固定属性列表，保持全站图像一致
- 绿幕切割术：纯色背景生成 + 四角透明确认 + CSS 分离阴影
- 分层驱动交互：透明 PNG → 独立层 → 不同速度 → 景深感
- Pin + Scrub：Scroll-Driven Animations 绑定所有层的位移
- Snap Back：指针离开时的平滑复位，避免动画跳跃
- Reduce Motion：从第一天就内置无障碍支持
关键区别：为什么「同一个 Chat」这么重要
GPT 5.6 Sol 的核心优势不是「能生图 + 能写代码」，而是它们在同一个上下文里运作。这意味着：
资源链接
原文视频：CreativeDesignTools · 2026年7月20日
本教程基于完整视频转录整理，保留了所有关键技术细节和 Prompt。
AI 速览
