StreamSparkAI

核心概览

这期内容围绕一个核心问题展开：为什么用 Claude Code 做出来的前端页面常常一眼就是“AI 模板”？ 结论并不只是“模型审美不够”，更关键的是：输入过于模糊、缺少高质量视觉参照、不会把偏好翻译成设计要求，也不了解网页效果背后的实现方式。

为了解决这个问题，内容给出了一条清晰的 7 级进阶路线。这条路线不是去寻找某个“万能提示词”，而是逐步建立一套可复用的方法：

先看优秀作品，接着学会描述与判断，再用视觉参考缩小偏差，然后拆解源码理解实现，最后加入自己的组件、资产、动效与细节，逐步把页面从“通用模板”做成“有品牌感的作品”。

案例使用的是虚构 SaaS 产品 Argus：一个帮助内容创作者寻找垂直领域热门话题的社媒情报应用。围绕这个产品，页面目标被明确为两件事：

• 展示产品能力
• 引导用户加入 waitlist

Argus 的页面演进过程也贯穿了全部七个层级：从最开始极其普通的紫色渐变 SaaS 落地页，逐步发展成带有自定义主视觉、视频背景、玻璃拟态卡片、滚动区、数字动效和更统一品牌语言的页面。

七个层级的完整进阶路线

第一级：只有提示词

第一级的典型做法，是直接在 Claude Code 里输入类似：

• 给 Argus 做一个 landing page
• 它是一个帮助创作者寻找趋势话题的社媒应用

即使用了 plan mode，产出通常还是很普通。原因很直接：只描述了产品，没有给出足够具体的设计方向，Claude Code 只能用最安全、最常见的默认方案来补全。

这一层需要开始补足三项最基础的能力：

• 写更具描述性的提示词
• 明确技术框架
• 建立最基础的设计词汇

plan mode 的价值，在于它会反过来逼用户思考几个问题：

• 想用什么技术栈：Next.js、Astro、纯 HTML 等分别是什么
• 这个页面的目标到底是什么
• 风格偏好是什么
• 需要哪些区块：Hero、Features、CTA 等

在 Argus 案例里，页面目标被进一步明确为：

• 产品展示
• waitlist 收集

风格则先选了最常见的 “clean and minimal”，区块只保留 Hero、功能区和 CTA。结果也符合预期：页面虽然“能用”，但非常模板化，几乎就是典型 AI SaaS 页面：紫色渐变、标准卡片、标准按钮、没有明确个性。

这一层最常见的误区是：

• 以为自己已经把需求说清楚了
• 实际上只是把“产品介绍”说清楚了，并没有把“设计方向”说清楚

只靠一句提示词，Claude Code 解决的是“生成页面”问题，不是“做出好设计”问题。

第二级：给 Claude Code 补一套“设计教育”

从第二级开始，不再只依赖裸提示词，而是引入外部 skills，例如视频里展示的：

• frontend design skill
• UIUX Pro Max

这类 skill 的本质不是魔法，而是一套结构化提示词和设计检查清单。它会把一些设计约束和经验提前注入 Claude Code，例如：

• 某类行业页面通常应该关注哪些布局与视觉重点
• 哪些“AI 味很重”的设计套路应尽量避免
• 如何更好地处理排版、色彩、间距、层次和 CTA

视频里提到的 UIUX Pro Max 是一个 GitHub 开源仓库，约有 5.2 万 stars。它本质上就是文本规则集合，可以通过 Claude Code 的 marketplace 安装；如果不熟悉安装流程，也可以直接把仓库链接丢给 Claude Code，让它协助安装。

在 Argus 案例中，使用 skill 重新设计后，页面马上比第一级好了不少：

• 背景更完整
• 按钮有轻微发光与 hover 变化
• 区块之间的配色有了变化
• 视觉层次明显提升

但第二级仍然有清晰上限：它只是把“粗糙模板”升级成了“设计过的 AI 模板”。

也就是说：

• 比原始版本顺眼很多
• 但依然能看出是通用套路
• 还没有形成真正的品牌辨识度

这一层最关键的能力，是开始用“设计眼光”去评估结果，再把评估转成下一轮提示。难点在于：视觉问题很难只靠文字精确表达。 这就引出了第三级。

第三级：从“告诉它”转向“给它看”——成为视觉导演

第三级的核心变化是：不再只靠文本描述，而是给 Claude Code 直接看视觉参考。

这一步之所以是巨大跃迁，有两个原因：

• Claude Code 模仿图像，通常比理解抽象描述更接近目标
• 寻找参考图本身，就是在训练“什么叫好设计”的判断力

内容里给出了几个明确的灵感来源：

• Awwwards
• Godly.website
• Pinterest
• Dribbble

这些站点的作用不是照抄，而是帮助建立视觉参照系。比如在 Pinterest 或 Dribbble 上搜索 “SaaS landing page”，很容易看到不同风格的排版、配色、Hero 构图和组件设计；一旦看到喜欢的方向，就可以截图保存。

Argus 案例在这一层选中了 OpenHands 作为主要参考对象。看中的点包括：

• 顶部滚动内容的处理方式
• 比常见 SaaS 页面更不寻常的配色
• 社会证明的组织方式
• 整体视觉气质

具体操作非常直接：

• 把目标网站 URL 给 Claude Code
• 再把多张截图一并发进去
• 明确说出希望页面向该视觉方向靠拢

这种做法比“我想要高级一点、科技一点、简洁一点”有效得多，因为后者依然过于抽象。

第三级还能进一步升级的一点是：混合多个参考源。

不是只盯着一个网站，而是：

• 从 Awwwards 拿整体气质
• 从 Pinterest 拿 Hero 构图
• 从 Godly.website 拿某段滚动效果
• 从 Dribbble 拿局部卡片或排版细节

这样更容易拼出自己的方向。

但这一级有一个非常典型的瓶颈，可以理解为：

“风格接近、实现不到位”的落差。

也就是：

• 看起来有点像
• 但始终只像了五六成
• 反复截图、反复提示、反复迭代，时间成本很高
• 很难真正把截图里的效果准确翻译成代码实现

这说明仅靠“看图仿形”还是不够，需要进入下一层：不仅看表面，还要看网站底层是怎么做出来的。

第四级：拆站者——从专业网站里学实现方式

第四级不再只是看截图，而是开始拆解优秀网站的源码结构。重点不在抄袭，而在于：

把优秀作品当作样板来解构、学习，再改造成自己的版本。

内容把前端简化为三个部分来理解：

• HTML：网页结构，相当于骨架
• CSS：网页样式，相当于外观与服装
• JavaScript：交互与动态，相当于动作与反应

进入这一级之后，学习目标发生变化：

• 不只是“这个页面看起来为什么高级”
• 还要知道“这个效果是怎么实现出来的”

具体方法包括：

1. 打开目标网站
2. 按 Control + U 查看源代码
3. 复制 HTML
4. 再进一步查看页面关联的 CSS 和 JavaScript 文件

Argus 案例里，OpenHands 的 HTML 源码大约有 1152 行。内容特别指出了一个常见问题：

• 如果让 Claude Code 自己用 webfetch 抓取网站
• 它常常会借助一个更小的模型去做摘要
• 对于很长的 CSS 和 JS 文件，这种摘要会丢掉很多关键细节

而很多真正决定页面质感的东西，恰恰藏在这些细节里，比如：

• 背景效果是怎么做的
• 滚动动画怎么触发
• 某些动态交互用了什么方式
• 页面层次和过渡靠什么实现

为了解决这一点，内容里使用了一个自定义的 site teardown skill，目的是让 Claude Code 尽量完整地理解 HTML、CSS、JS，而不是只看摘要。

这一级的价值非常大，因为它把 Claude Code 的角色从“生成器”变成了“讲解器”和“拆解助手”。进入这个阶段后，可以开始问它：

• 这个背景效果是怎么实现的
• 这里为什么会有这种滚动动画
• GSAP 在这里起了什么作用
• 某种视觉效果对应的是哪种代码模式

于是，学习过程就变成了：

• 先挑一个喜欢的网站
• 拆它
• 让 Claude Code 解释实现逻辑
• 再把其中的技巧迁移到自己的页面里

Argus 在这一层重新生成后，页面与 OpenHands 的接近程度明显提高，尤其是背景和结构层面，不再只是“神似”，而是开始能在实现层面真正靠近原站。

这一层的核心风险是 “克隆上限”：

• 只会跟着复制
• 但不理解为什么这样有效
• 最后做不出自己的东西

所以第一级到第四级，更像是在打基础：学输入、学判断、学参考、学拆解。真正开始形成个人表达，要到第五级。

第五级：组件与自定义视觉资产——开始做“自己的页面”

第五级的重点，是从“像别人”转向“有自己”。这一级不再满足于继续克隆整站，而是开始通过两条路径加入原创表达：

• 引入成熟组件后再改造
• 制作自己的视觉资产与主叙事

1）从组件层借鉴，再让 Claude Code 重写和二次设计

这一层不只是做主视觉，也包括从成熟组件来源抽取局部交互，再让 Claude Code 按需重写。

内容里提到的组件来源包括：

• 21st.dev
• CodePen
• Monet

例如在 21st.dev 上，可以按组件类型查找：

• 按钮
• 轮播
• 导航菜单
• 滚动区域
• 地图
• 图片相关交互
• hooks

如果看到某个按钮、轮播或卡片效果喜欢，可以直接拿它提供的 prompt 或代码，再交给 Claude Code 集成到当前项目里。这里的关键不是“拿来就用”，而是：

• 先引入一个高质量局部
• 再让 Claude Code 调整样式、结构、配色和交互
• 让它适配自己页面的整体语言

这意味着第五级已经从“整站模仿”进一步细化到“部件级重构”。

2）制作自己的主视觉，让页面拥有视觉叙事

真正能把页面从模板感里拉出来的，是和产品含义绑定的视觉叙事。

Argus 案例在这一步先从产品本身出发思考：

• Argus 是社媒情报应用
• 名称又让人联想到“能看见更多”的意象
• 页面不应该只是一组功能卡片，还应该有一个能承接产品想象的视觉主角

随后，为页面想出一句更适合作为品牌表达的口号：

• See What’s Next

这句话在语义上更接近：

• 看见接下来会发生什么
• 预见下一步

它不是把含义局限在“趋势”二字上，而是更宽泛地表达“提前看见将要出现的东西”。

接下来，围绕这个口号与产品定位，让 Claude Code 帮忙发散主视觉想法，再使用图像生成工具制作真正的画面。内容里实际使用的是 Midjourney，并提到这类“概念感、艺术感”的图像它生成得尤其好。

生成图片后，Argus 的 Hero 区重做为：

• 左侧放产品信息与口号
• 右侧留出负空间展示主视觉图

这样一来，页面的第一屏不再只是“标题 + 副标题 + 按钮”，而是开始有了更明确的品牌氛围和故事入口。

3）从静态图升级到轻量动态背景

主视觉做好之后，还继续往前推进了一步：把静态背景图做成轻微循环的视频。

这一步使用了支持起始帧视频生成的工具，并强调了几个原则：

• 背景动效要细微
• 不要喧宾夺主
• 最好做成相对自然的长循环
• 即便循环点不完美，只要整体足够克制，也能接受

Argus 最后使用的是一个约 15 秒 的轻微循环背景视频，效果主要体现在：

• 云层轻微移动
• 水面有细小动态
• 整体更像轻微的呼吸感，而不是强烈动画

同时还做了一个明确的性能决策：

• 桌面端加载视频背景
• 移动端只加载静态图

这样既保住了桌面的视觉表现，也避免了移动端负担过重。

第五级的核心，不是“多加点特效”，而是：

开始把页面做成“这个产品的页面”，而不是“某类 SaaS 常见页面”。

第六级：借助外部可视化工具做精修与风格统一

到了第六级，单纯在终端里改视觉会越来越别扭，因为这时候处理的已经不是“有没有页面”，而是：

• 版式是否平衡
• 卡片是否有重量感
• 层次是不是自然
• 细节够不够统一
• 是否有“被认真做过”的质感

因此，第六级开始引入外部可视化工具，内容里提到的包括：

• paper.design
• Stitch
• Figma
• Pencil.dev

其中重点演示的是 Stitch。它的用法不是从零写代码，而是先把当前页面截图丢进去，让它做可视化重设计。比如在 Argus 的例子里：

• Hero 区整体满意
• 下半部分太平、太扁
• 希望把上半部分已经建立起来的色彩和视觉语言延续到下半部分

Stitch 生成的新方案虽然本质上只是图像，不是可直接上线的代码，但它在第六级非常有用，因为它能快速完成这些事情：

• 帮助探索不同排版
• 快速尝试颜色与层次变化
• 给出新的局部视觉思路
• 形成可以再交还给 Claude Code 的“明确参考”

之后再把 Stitch 的结果截图回传给 Claude Code，让它继续实现、改写、微调。

这一层最重要的特点是：页面进入“打磨期”而不是“搭建期”。

Argus 经过一段时间精修后，出现了很多不会单独特别显眼、但叠加后很能提升质感的细节，例如：

• 页面刷新时，首屏文字有轻微延迟加载，让首屏更有分量
• 更换字体，提升整体气质
• 从 Google Fonts 获取更多字体选择
• 增加滚动区与底部 ticker，让 Hero 视频区域与下半部分背景衔接更自然
• 引入玻璃拟态卡片，让背景艺术资产能透出来，同时增加层次
• 数字统计从 0 动画增长到目标值
• 某些标签区域加入轻微扫光
• 滚动条顶部的进度反馈更细腻

这些细节很多用户未必会逐项注意，但它们叠加起来，会形成一种明确感受：

页面不是“被生成出来”的，而是“被雕琢出来”的。

这一层还有一种很实用的工作方式：在已经有初步方向后，不必只靠自己硬想，可以让 Claude Code 去网上搜索某类设计的最佳实践，比如：

• 怎样让卡片更有重量感
• 怎样让玻璃拟态更高级而不过度
• 有哪些微交互能让页面更 premium、但又不过分张扬

然后由人来筛选：

• 哪些保留
• 哪些舍弃
• 哪些继续微调

第六级的本质，是人开始真正进入驾驶位，Claude Code 变成执行与协助创意的工具。

第七级：前沿层——3D、WebGL、Shader 与沉浸式网站

第七级对应的是更前沿的网页体验，包括：

• 3D 场景
• WebGL
• Shader
• 更像互动艺术或游戏体验的网页

这一层已经不是普通 landing page 的升级版，而是接近大型创意网站、品牌艺术站或实验性交互作品。

内容里明确指出，就 2026 年 3 月下旬 这个时间点而言，这还不是大多数人能稳定用 Claude Code 驾驭的层级。原因在于：

• 这类网站的复杂度远超一般 HTML/CSS/JS 页面
• 很多效果不是简单看源码就能学会
• 背后往往是设计团队、开发团队和长期打磨的结果

第七级被放进路线里，更多是为了说明前端设计空间的上限：

• 网页不只是 SaaS 模板
• 也可以接近互动艺术
• AI 未来也许能帮助普通人更多地进入这个领域
• 但在当前阶段，它更像是“未来方向”，而不是“眼下的通用做法”

Argus 案例的完整演进链路

围绕 Argus，这期内容实际展示了一条非常完整的页面升级路径：

1. 模糊提示词起步

   • 先得到一个极其普通的 SaaS 落地页
   • 暴露出“产品说清楚了，设计没说清楚”的问题

2. 引入设计 skill

   • 用 UIUX Pro Max 等 skill 提升基础排版、色彩和层次
   • 页面变好，但仍然带明显模板感

3. 加入视觉参考

   • 从 Awwwards、Godly.website、Pinterest、Dribbble 等处搜集灵感
   • 把 OpenHands 之类目标网站的截图交给 Claude Code
   • 页面开始在风格上接近参考方向

4. 拆解源码

   • 不再只看截图，而是复制 HTML、分析 CSS 和 JS
   • 借助 site teardown skill 理解底层实现
   • 真正接近目标网站的效果做法

5. 摆脱纯克隆

   • 从 21st.dev、CodePen、Monet 等处找局部组件灵感
   • 同时开始制作自己的主视觉
   • 用 Midjourney 生成与 Argus 品牌相关的 Hero 图
   • 确立 See What’s Next 作为页面口号

6. 加入轻量动态

   • 将 Hero 主视觉升级为轻微循环视频
   • 桌面端用视频，移动端用静态图
   • 页面更有呼吸感与记忆点

7. 外部工具协同精修

   • 用 Stitch 等工具探索下半部分重设计
   • 再交回 Claude Code 实现
   • 增加字体、ticker、玻璃拟态、计数动画、扫光和加载细节
   • 最终形成更完整、更统一的页面语言

关键方法与可复用操作链

这期内容最有价值的部分，不在于某个单独工具，而在于它把“前端设计怎么从 AI 模板走向可控作品”拆成了一条可执行路线。

1. 先补输入质量，而不是先怪模型

如果一开始只说：

• 做个 landing page
• 要科技感
• 要简洁

那么输出大概率仍然是模板化结果。要逐步补上的，是：

• 页面目标
• 技术框架
• 区块设计
• 风格参照
• 设计词汇

2. 先学会看，再学会说

很多人不是没有偏好，而是：

• 没看过足够多的高质量参考
• 不知道自己喜欢什么
• 即使喜欢，也说不出是哪里好

所以前期大量看站、截图、对比，本身就是训练的一部分。

3. 视觉参考比抽象形容更有效

与其说“高级一点”“未来感一点”，不如直接给：

• 网站截图
• URL
• 局部组件参考
• 具体想保留和想舍弃的部分

给它看，比跟它解释，往往更有效。

4. 截图只能解决一半问题，想真正逼近效果必须拆实现

如果只给截图，很容易陷入：

• 看着像
• 但做不到位
• 来回提示很多轮仍然差一点

这时候就需要查看 HTML、CSS、JS，理解效果是怎么做出来的。“拆站学习”是从模仿走向真正理解的关键步骤。

5. 只会克隆不够，必须加入自己的叙事和资产

真正能摆脱模板感的，不只是“还原得更像”，而是：

• 有自己的 Hero 构图
• 有自己的品牌口号
• 有自己的视觉资产
• 有自己的局部组件风格
• 有与产品含义相连的叙事

6. 高级感往往来自一堆小细节的叠加

不是某一个大特效决定页面高级，而是很多小地方共同作用，例如：

• 字体
• 间距
• hover
• 加载节奏
• 卡片重量感
• 分区过渡
• 轻微动画
• 颜色统一性

质感通常是“多处小细节都不差”的结果。

关键工具与数据点

• 7 个层级：整套 Claude Code 前端设计进阶框架
• Argus：案例产品，一个帮助用户寻找社媒热门话题的情报应用
• UIUX Pro Max：GitHub 开源 skill，约 5.2 万 stars
• OpenHands：第三级与第四级的重要参考网站
• 1152 行 HTML：案例里拆解参考站时复制的页面源码规模
• 15 秒视频背景：Hero 背景的轻量循环动效长度
• 约 20 分钟精修：第六级中，用来迭代页面细节的示例时长

常用灵感与工具来源包括：

• Awwwards
• Godly.website
• Pinterest
• Dribbble
• 21st.dev
• CodePen
• Monet
• Stitch
• Figma
• Pencil.dev
• Google Fonts
• Midjourney

结论回顾

这期内容最终落到一个非常明确的判断上：

Claude Code 做不好前端，不只是因为 AI 本身有限，更因为多数人缺少视觉参照、设计词汇和对实现方式的理解。

因此，更有效的路线不是找“神级提示词”，而是按顺序完成这几件事：

• 看大量优秀作品，建立审美参照
• 用截图和组件参考提高表达精度
• 拆解 HTML、CSS、JS，理解效果对应的实现方式
• 把学到的技巧迁移到自己的产品页面
• 加入自己的视觉资产、叙事和细节打磨

用一句话概括，这套路线的目标是：

把 Claude Code 从“自动吐模板的生成器”，逐步变成“帮助完成个人设计表达的协作工具”。