SCT AI 超级个体营 · 第二期WEEK 06
怎么让 AI 做出
不像 AI 做的东西
一个商品，一个标杆，一天，一个能卖货的独立站。
Scott · 2026.09fiber.sctcamp.com
先做一道题
三个卖货站的首屏。哪一张是 AI 做的？
答案C · 自己滚一下
AI 做的。从零到上线，一天。
但是
同一个人，同一个 AI，同一个商品。几小时前做出来的，是这个。
差的不是模型，是方法。
第一版 · 30 分钟 · 「参考一个高级的卖货站帮我做一个」
01
AI 味
是什么 · 为什么一做就有 · 怎么做可以没有 · 为什么那样做就能消除
一 · 什么是 AI 味按 → 逐条看
- 01感叹号文案Transform Your … Today!
- 02紫蓝渐变首屏
- 03万能小标题Why Choose Us?
- 04emoji 当图标
- 05卡片墙，全部居中
AI 味不是丑。是像所有人。
二 · 为什么一做就有
你给的是形容词，AI 只能回你均值。
你说「高级一点」
「有设计感」
「炫酷」
→
AI 做的事在它见过的一切里
取平均
→
你拿到的所有人都这么做的
那一点
你的商品图、文案一眼假，也是这个原因。
三 · 怎么做可以没有
你不用懂数字。你只要给它一个能拆的网站。
「像 ayocin 那样，高级一点」
「打开 ayocin.com，拆开它，照着做」
四 · 数字就写在它的源码里ayocin.com · 直播
/* 它的 CSS，原样 */
html { font-size: 10px }
.h2 { font-size: 9rem;
line-height: 1;
letter-spacing: -.03em }
.btn { height: 4rem;
border-radius: 2rem }
/* 它的动效，原样 */
duration: 1.5, stagger: .15
ease: "power2.inOut"
这些数字谁都能看到。AI 替你去看。
五 · 把形容词换成四类事实
A · 结构它有几段
什么节奏
别因为「我没那么多可说」就少做几段。
B · 数字字号 时长
缓动 间距
字号差 20%，整站就不像。
C · 素材每个位置
一张专图
横竖版各出一张，不拿一张图到处塞。
D · 收尾加载 吸附
层级
没人会夸你，但没有就是业余。
六 · 为什么这样做就能消除
AI 味，是
信息不够时的填空。
空填满了，
它就没得平均。
02
为什么不如别人
并排看。差距是四件具体的事，每件都能动手改
差距一 · 结构同时滚一遍
设计感的一半是节奏。单屏再精致，一路平铺就是不高级。
差距二 · 数字字号差 20% 就不像
它的 h2 · 90px / 行高 1 / 字距 −0.03emNothing to stir.
我随手写的 h2 · 30px / 行高 1.4 / 字距 0Nothing to stir.
| 它的 | |
|---|
| 根字号 | 10px，≥1440 用 .6944vw |
| 大标题 | 5.6 / 9 / 17rem |
| 按钮 | 高 4rem，圆角 2rem |
| 我随手写的 | |
|---|
| 根字号 | 16px，浏览器默认 |
| 大标题 | 3rem |
| 按钮 | 高 48px，圆角 8px |
差距三 · 素材专图专用
主图放大三倍当特写
为这个位置单独生成
这一版 32 张图，每一张只服务一个位置。
差距四 · 收尾业余和专业的分界线
标题压产品，产品被压扁，卡片再压上去
各有各的层，叠而不压
还有：没加载完不许露脸。每一屏滚得住。
四条差距 · 四个动作
| 差距 | 长什么样 | 动作 |
|---|
| 结构 | 一路平铺 | 把标杆每一段列出来，一一对应 |
| 数字 | 字号、时长拍脑袋 | 从它的 CSS 和 JS 里抄 |
| 素材 | 一张图到处塞 | 按位置分别生成，横竖版各一张 |
| 收尾 | 加载残留、滚不住、层级乱 | 预加载幕布、逐屏吸附、叠层顺序 |
03
别人怎么做的
设计感不是参考出来的，是复刻出来的。先拆，再做
拆到源码级一条命令
node capture-site.mjs https://目标站 capture/
拆完才知道的事
它页面上的「视频」
它的三段视频，全是线稿动画。
产品图也不是拍的，是渲染图贴在室内实拍上。
不拆到这一层，你会一头扎进去做产品视频。
它的动效不是「有滚动动画」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 | 横向拖动 |
| |
04
搭建实录
不是成果展示，是一天的回放。有 skill 也要返工，返工长这样
一天的真实构成
40分钟 · 拆站
50分钟 · 映射表
32张 · 生成图
12处 · 结构 bug，三轮
6条 · 上线后返工
写页面只占一小半。大头在拆、生素材、对着截图挑毛病。
返工一 · 抠图换了三条路线
阈值抠图 · 把产品的白也抠掉了
系统抠图 · 边缘留白点，logo 留洞
品红底 + 色键 · 干净
生图工具不返回透明通道。换个底色，自己抠。
返工二 · 图不清晰，也不搭
「氛围感」 · 一团糊
「前景锐利、有露水、亮到白字能读」
形容词只能换来均值。把「要清晰、要亮」写成硬要求。
返工三 · 滚起来不「吸」两边都滚一下
Most of us don't get the fiber we need.
90% of women fall below the daily target.
The usual fix is a powder you stir.
A capsule skips all of that.
Most of us don't get the fiber we need.
90% of women fall below the daily target.
The usual fix is a powder you stir.
A capsule skips all of that.
丝滑不是把动画放慢，是让它停在对的地方。
返工四 · 肉眼看不出的
上线后才量出来：手机端正文被压成 114px 三栏。
对着截图看了三轮，没看出来。一条命令，十秒。
$ node measure.mjs https://fiber.sctcamp.com/
mobile chapterBody: [114, 114, 114]
stickyTop: 60px headerH: 70
containerPad: 0px
修完
mobile chapterBody: [366, 366, 366]
stickyTop: 85px headerH: 70
containerPad: 12px
这一幕的结论
skill 不是按钮，
是一张路线图。
它省掉的是「不知道下一步干什么」，不是打磨。
三个门其余自动跑
门 1 · 入口卖什么 · 像谁 · 卖给谁
先看这个标杆 AI 做不做得了。有 3D 的站，只抄排版和节奏。
门 2 · 映射表它每一段，我放什么
标杆多少段你就多少段。确认前不写一行代码。
门 3 · 逐屏对照先量，再并排挑毛病
修完重拍，直到清零。
七步全貌
| 0 | 探测环境 | 能不能拆站、生图、抠图，往哪部署 |
| 1 | 定标杆 | 给了网址就探它；只有风格词就用默认标杆 |
| 2 | 拆到源码级 | 四张表 |
| 3 | 映射表 | 一一对应 |
| 4 | 素材 | 场景图写标杆的世界，产品图带实拍参考 |
| 5 | 1:1 移植 | 数字用它的 |
| 6 | 量 · 对照 · 上线 | 四条红线 → 六条清单 → rsync |
六条清单先量，再逐屏问
01
抠图有痕迹吗
02
这张图清晰吗
03
和主题搭吗
04
有压缩或重叠吗
05
这一屏滚得住吗
06
切换自然吗
封装成 skill
装进去，Claude 和 Codex 都认。
~/.agents/skills/sct-landing-page/
你说「我想做个像 XX 那样的带货单页」，它从门 1 开始问你。
这一版的 32 张素材，随 skill 一起给你
本周作业交三样
交付 1一个上线的单页
你自己的商品。手机真机打开一次。
交付 3六条清单自评
至少挑出三条自己的毛病。全过的重挑。
只交链接不算完成。我要看的是你那双能挑自己毛病的眼睛。
Week 06
你缺的从来不是
更好的模型，
是更具体的信息。
fiber.sctcamp.com · class.sctcamp.com
