SCT AI 超级个体营 · 第二期WEEK 06
怎么让 AI 做出
不像 AI 做的东西
一个商品，一个标杆，一天做出一个能卖货的独立站。
网站只是载体，今天真正要给你的是一套看图挑毛病的眼睛。
Scott · 2026.09
成品 · fiber.sctcamp.com
先做一道题
三个卖货网站的首屏。哪一张是 AI 做的？
不许查网址。凭眼睛。
答案C
AI 做的
fiber.sctcamp.com · 商品：一瓶 NOW 车前子壳胶囊
C
从零到上线，一天。
商品是我随手拍的一瓶保健品。没有设计师，没有摄影，没有前端。图是生成的，代码是 AI 写的，动效是 AI 调的。
A 和 B 是真人工作室做的获奖站。放在一起，你分不出来。
但是
同一个人，同一个 AI，同一个商品。
几小时前做出来的是这个。
一模一样的模型，一模一样的需求，我只是换了个做法。
这不是模型的差距，是方法的差距。
第一版 · 30 分钟 · 「参考一个高级的卖货站帮我做一个」
01
AI 味
它到底是什么 · 为什么你一做就有 · 怎么做可以没有 · 为什么那么做就能消除
一 · 什么是 AI 味
01
02
03
04
05
| 01 | 感叹号文案
Transform Your … Today! |
| 02 | 紫蓝渐变首屏 |
| 03 | 万能小标题
Why Choose Us? |
| 04 | emoji 当图标 |
| 05 | 卡片墙，全部居中 |
AI 味不是丑。每一项单拎出来都不算错，放一起就死了——因为它「像」。像所有人。
二 · 为什么你一做就有
你给的是形容词，AI 只能回你均值。
你说的话
「高级一点」
「有设计感」
「炫酷」
形容词。每个人理解都不一样。
→
AI 的动作
在见过的
一切里取平均
信息不足时，它只能给最可能被接受的那个答案。
→
你拿到的
所有人
都这么做的
那一点
这就是 AI 味的准确定义：均值。
同样的道理解释了你的商品图为什么一眼假、你的文案为什么像模板。不是 AI 不行，是它手上没有只属于你的信息。
三 · 形容词换成数字
同一件事，两种说法，AI 的表现天差地别。
| 你这么说 · AI 给你均值 | 你这么说 · AI 精确执行 |
|---|
| 「做个像 ayocin 那样有设计感的首屏」 | 「巨型 wordmark 占 11.2vw，产品从底部升起 yPercent 100→0，2 秒 power3.out，顶部细线 scaleX 展开」 |
| 「文字大一点，有冲击力」 | 「h2 = 9rem，行高 1，字距 −0.03em，根字号 10px」 |
| 「滚动要丝滑」 | 「Lenis lerp 0.085，每句话结束点设吸附，0.3–0.9 秒 power2.inOut」 |
| 「配图要高级一点」 | 「暖沙色灰泥墙，晨光，草叶斑驳投影，16:9，画面里不出现产品」 |
右边这些数字不用你发明。它们就写在你想像的那个网站的源码里。
四 · 怎么做可以没有
把形容词换成四类可执行的事实。
A · 结构它有几段
什么节奏
每一段做什么、多高、是不是叠层。不许因为「我的产品没那么多可说」就砍段。
B · 数字字号 时长
缓动 间距
字号差 20%，整站就不像。动效时长和缓动曲线照抄，不要自己拍脑袋。
C · 素材每个位置
一张专图
按槽位比例分别生成，横竖版各出一张。产品透明图只走一条路线。
D · 收尾加载 吸附
层级
没加载完不许露脸，每一屏滚得住，叠层顺序对。业余和专业的分界线。
五 · 为什么这么做就能消除
AI 味是信息不足时的填空。
你把空填满，
它就没得平均。
所以路径不是「让 AI 发挥」，而是先把标杆拆到它能精确执行的粒度，再让它换内容。
02
为什么不如别人
把我的第一版和真人做的站放在同一个位置上，差距是四件具体的事，每一件都对得上一个动作
差距一 · 结构16 段 vs 5 段
把整页切成等距缩略图，节奏一眼看出来。
真人做的站 · 明暗交替，每两屏换一次呼吸
我的第一版 · 一路平铺，没有起伏
复刻之后 · 节奏对上了
设计感的一半是节奏，不是单屏好看。单屏再精致，一路平铺就是不高级。
差距二 · 数字字号差 20% 就不像
| 它的 | |
|---|
| 根字号 | 10px（≥1440 用 .6944vw） |
| 大标题 h2 | 5.6 / 9 / 17rem |
| 行高 | 1 |
| 字距 | −0.03 ～ −0.06em |
| 按钮 | 高 4rem，圆角 2rem |
| 正文 | 1.2 / 1.4rem |
| 我随手写的 | |
|---|
| 根字号 | 16px（默认） |
| 大标题 h2 | 3rem |
| 行高 | 1.4 |
| 字距 | 0 |
| 按钮 | 高 48px，圆角 8px |
| 正文 | 16px |
它的 h2 · 90px / 行高 1 / 字距 −0.03emNothing to stir.
我随手写的 h2 · 30px / 行高 1.4 / 字距 0Nothing to stir.
同样一句话，它占半屏，我像正文。这一列数字从 CSS 里直接读得到，不需要审美，只需要去看。
差距三 · 素材专图专用
一张图到处塞
主图放大三倍当特写：糊、抠图痕迹被放大、手机端切字
每个槽位一张专图
带实拍参考单独生成的特写，标签字 1:1，横竖版各出一张
这一版最后生成了 32 张场景图与特写，每一张只服务一个位置。
差距四 · 收尾业余和专业的分界线
没收尾
标题压着产品，产品被压扁，卡片又压上去。三层互相打架
收过尾
标题、产品、订单卡各有各的层，叠而不压
收尾还包括：没加载完不许露脸、每一屏滚得住、深浅段切换不跳。这些没人会夸你，但没有就是业余。
四条差距 · 四个动作
| 差距 | 它长什么样 | 你要做的动作 |
|---|
| 结构 | 一路平铺，没有起伏 | 把标杆每一段列出来，一一对应，不许砍段 |
| 数字 | 字号、时长全靠拍脑袋 | 从它的 CSS 和 JS 里把数字抄下来 |
| 素材 | 一张图到处塞 | 按槽位比例分别生成，横竖版各一张 |
| 收尾 | 加载残留、滚不住、层级乱 | 预加载幕布、逐屏吸附、叠层顺序 |
03
别人怎么做的
设计感不是「参考」出来的，是「复刻」出来的。所以第一件事是把标杆拆到源码级，不是截图级
拆到源码级一条命令
一次拿到四张表
| 1 | 尺寸系统
根字号、断点、h1–h4、容器、按钮、圆角、配色 |
| 2 | 段落结构
每段的类名、背景、高度、是否叠层 |
| 3 | 动效清单
每个组件的时长、缓动、触发点、吸附 |
| 4 | 素材语言
它的图长什么样，它的「视频」到底是什么 |
node capture-site.mjs https://目标站 capture/
HTML、全部 CSS、JS、图片视频清单、桌面和手机逐屏截图，一次落盘。
拆完才知道的事反直觉
它页面上的「视频」
它的三段视频，
全是线稿动画。
不是产品视频，不是实拍，不是 AI 生成的炫酷镜头。就是几根线在动。
它的产品图也不是摄影棚拍的——是渲染图贴在室内实拍上。
这一条直接决定了你该生成什么素材。不拆到这一层，你会一头扎进去做产品视频，做一天，还不像。
它的动效不是「有滚动动画」15 个组件
| 组件 | 干什么 |
|---|
| preloader | 关键图解码完才揭幕 |
| split | 标题逐行进，1.5s，stagger .15 |
| chained-content | 一屏钉住，四句话轮转 |
| chained-lamp | 四张特写叠层，逐张裁走 |
| star-mask | 星形蒙版 200px 撑满全屏 |
| stacked-content | 三段图文，按标签吸附 |
| 组件 | 干什么 |
|---|
| light-controller | 拖动滑块，实时改画面 |
| 3d-showcase | 选规格，产品换图 |
| marquee | 跑马灯 |
| counter | 数字滚动 |
| parallax / moveUp / fade / scale / gallery | 其余五个基础件 |
每一个都能在 JS 里搜到它的类名，然后照着数字移植。这一步不需要你会写 GSAP，只需要你知道这些数字存在。
04
搭建实录
不是成果展示，是一天的真实回放。有了 skill 也一样要返工，这一幕就是告诉你返工长什么样
一天的真实构成
40分钟 · 拆站到源码级
50分钟 · 内容映射表 16 段
32张 · 生成图，四路并行
12处 · 结构 bug，修了三轮
6条 · 上线后的细节返工
真正写页面的时间只占一小半。大头在拆、在生素材、在一轮一轮对着截图挑毛病。下面三条是当天最疼的返工。
返工一 · 抠图换了三条路线
阈值抠图
白色产品在白底上，把产品自己的白也抠掉了
系统主体抠图
整体像了，但边缘留白点、logo 里留洞。放大到特写就露馅
品红底 + 色键
让 AI 拿实拍当参考，在纯品红底上重画一次，再按颜色抠。干净
生图工具根本不返回透明通道，你让它「出透明底 PNG」，它会把棋盘格画上去。绕过去的办法是换个底色，自己抠。
返工二 · 图不够清晰，也不够贴主题
第一版
雾蒙蒙、低对比、离产品很远。白字压上去还糊
重写创意后
提示词里写死：前景锐利、有露水、亮到白字能读
「氛围感」是形容词，AI 会给你均值——一团糊。把清晰度和亮度当成硬指标写进提示词，一次就对。
返工三 · 滚起来不「吸」
每一屏都要有落点。
做完第一版，看着都对，滚起来就是不舒服——因为滚轮停在哪就是哪，半句话、半张图卡在屏幕中间。
真正的做法是给每一段设吸附点：一句话讲完是一个点，一张特写翻页是一个点。手一松，它自己滑到位。
丝滑不是把动画放慢，是让它停在对的地方。
还有一条是这一天最贵的教训：肉眼看不出栅格塌陷。这站上线后才被量出来，手机端正文被压成 114px 三栏，我对着截图看了三轮都没发现。
滚轮停下 → 2196
0.1 秒后 → 2838 ← 吸附点
snapTo: 每句话结束
duration: 0.3 – 0.9s
ease: power2.inOut
还有一个坑：吸附要交给平滑滚动库去执行。两套滚动各写各的，页面会抖。
这一幕的结论
skill 不是按钮，
是一张路线图。
它替你省掉的是「不知道下一步该干什么」，不是「不用打磨」。
任何一版做完都还要对着截图挑三轮毛病，这是手艺的部分，躲不掉，也不该躲。
05
路径
七步走完一个站。只在三个地方停下来问你，其余自动跑
三个门其余不打扰你
门 1 · 入口
卖什么 · 像谁 · 卖给谁
三句话定下来。顺手探一下这个标杆在不在 AI 的能力圈内——有 3D 的站只抄排版和节奏，别硬碰。
门 2 · 映射表
它每一段
我放什么
标杆多少段，你就多少段。产品没有的维度，用公开数据、真实评分、成分表填。确认前不写一行页面代码。
门 3 · 逐屏对照
两张截图
并排挑毛病
你的逐屏图和标杆的逐屏图并排，按六条清单挑。挑完修，修完重拍，直到清零。
中间的拆站、生图、移植、部署全部自动跑。你的工作是在这三个门上做判断，不是盯着它写代码。
七步全貌
| 做什么 | 怎么做 / 卡在哪 |
|---|
| 0 | 探测环境 | 能不能拆站、能不能生图、能不能抠图、往哪部署。缺哪块换哪条通道 |
| 1 | 定标杆 | 给了网址就探它；只有风格词就用默认标杆；什么都没有先去做商品套图 |
| 2 | 拆到源码级 | 四张表。没拿到尺寸系统和动效清单，就还没开始 |
| 3 | 内容映射表 | 一一对应，不许砍段。砍段 = 节奏断 = 不像 |
| 4 | 素材生成到融入 | 场景图写标杆的世界，产品图带实拍参考。专图专用 |
| 5 | 1:1 移植 | 数字用它的。同标杆直接换内容，换标杆照着一个个搬 |
| 6 | 逐屏对照 + 上线 | 六条清单清零，再 rsync 上服务器，手机真机开一次 |
六条验收清单先量，再对着每一屏问一遍
01
抠图有痕迹吗
白点、白边、logo 里的黑块。放大到特写再看一次
02
这张图清晰吗
放大后糊、有压缩块、雾蒙蒙一团
03
和主题搭吗
场景和产品的世界无关，色温也不对
04
有压缩或重叠吗
图被拉扁、标题压着产品、三层互压
05
这一屏滚得住吗
停在半句话、半张图上，就是没有吸附点
06
屏与屏切换自然吗
没加载完的残留、鬼影、跳变
六条之前还有一条量出来的：手机端正文栅格有没有塌、吸顶标题有没有被 header 切、页面有没有横向溢出。这三样肉眼看三轮也看不出来，跑一条命令十秒就有答案。
这条流水线已经封装成 skill
装进去，两端都能用。
~/.agents/skills/sct-landing-page/
放进这个目录，Claude Code 和 Codex 都会自己认。你说「我想做个像 XX 那样的带货单页」，它就从门 1 开始问你。
里面带的是：拆站脚本、生图脚本、抠图脚本、截图脚本，加上这一版成品站的完整源码当模板。
这一版生成的 32 张素材，全部可复用为模板
本周作业交三样
交付 1一个上线的单页
你自己的商品。域名随便，能打开就行。
没有商品就用 Week 3 那套图里的任意一个。标杆没想好就用课上这个默认的。
验收：手机真机打开一次，首屏不能有加载残留
交付 2两张逐屏截图
你的站一张，你的标杆一张，并排拼好。
桌面每 700px 截一张，手机也来一遍。拼成两条长图，上下摆。
验收：段数对得上，节奏能看出起伏
交付 3六条清单自评
逐屏逐条写过还是不过，不过的写为什么。
写在截图旁边，直接标在哪一屏的哪个位置，像我今天圈的那样。
验收：至少挑出三条自己的毛病，全过的重挑
只交链接不算完成。我要看的是你有没有长出那双能挑自己毛病的眼睛——那才是这门课真正给你的东西。
两条提醒：像素级 copy 是课堂上的教学手段，真上线要换足够多的内容和素材，别和标杆撞脸；标杆的图和视频一张都不能用，只能当提示词的参照。保健品类目的功效表述照类目规矩写。
