为什么你的 AI 网站看起来很通用 · Claude Code + Nano Banana 2 做 Astra
Andy Lo（AndyNoCode）用「视觉先行 + PRD/CLAUDE.md 地基 + Claude Code 执行 + 对照 PRD 审计」四段式，把太空主题体验站 Astra 从 Google Flow / Nano Banana 2 的图与滚动帧，做到 Next.js 可滚动成片。核心判断：AI 站看起来像 slop，不是工具不行，是流程被跳过。
基本信息
- 标题：Why Your AI Website Looks Generic — And How to Fix It With Claude Code and Nano Banana 2
- 来源类型：视频（YouTube 字幕）
- 频道：Andy Lo / AndyNoCode
- 时长：19:46
- 上传日期：2026-04-24
- 原文 URL：https://www.youtube.com/watch?v=Eor96yD6Ubw
- 原文位置：
raw/articles/2026-07-26-youtube-claude-code-nano-banana-astra-site.md - Telegram stub：
raw/articles/2026-07-26-194544-tg-6d3981.md（msg 2350） - 消化日期：2026-07-26
核心观点
-
通用感来自跳过流程，不是模型/工具本身：同一套 Claude Code + 生图能力，若没有统一世界设定、设计原则与约束，输出就是「功能拼装」；有 foundation 后，才像同一工作室交付的统一体验。
-
视觉层必须先于组件：在写任何 UI 前，用 Nano Banana 2（经 Google Flow）按锁定情绪与色板生成 on-brand 图像，再图生视频、导出 WebP 帧序列，作为 hero 滚动驱动动画原料。假 prompt → 假图 → 假站。
-
两份文件是 Claude Code 的「呼吸包」：
- PRD：页面/区块、内容、用户在各阶段的感受与动作——蓝图。
- CLAUDE.md：目录结构、资源路径、设计原则、技术栈、分区细则、禁止事项——行为真源。
没有它们，构建只是互不连贯的单次 prompt。
-
复杂站不是一 prompt 出片：Astra 含滚动帧 hero、想法连线成星座、粒子→实体变身、天文史无限轮播、NASA EONET 事件抽象可视化、3D 行星中心件等。真实路径是：奠基 prompt → 分区填充 → 对照 PRD 审计缺口 → 实现计划 → 再执行（可顺带加 PRD 外微调）。
-
设计原则写进 CLAUDE.md 才能抗 AI slop：运动克制、青绿渐变而非刺目对比、避免过度圆角卡与重阴影；技术栈示例为 Next.js App Router + Tailwind + GSAP（滚动）+ Framer Motion（微交互）+ React Three Fiber 仅在必要时；禁止过度工程动画、依赖膨胀、组件职责过载。
-
数据层可叙事化：EONET 实时事件过滤野火/风暴/火山等，标签改写（如 wildfire→thermal surge），用脉冲光晕、旋转环、扩展涟漪等视觉编码，强度反映 recency——把 API 变成「地球信号」氛围，而不是表格列表。
实操内容保留
图像 Prompt（Nano Banana 2 / Google Flow）
A cinematic night scene, a young man sitting in a field of flowing flowers working on a laptop under a deep teal blue starry sky. Warm amber light from the laptop screen contrasting against the cool blue tones of the environment. Orbital lines and small floating spheres wrapping around him in a calm, elegant motion. Glowing foreground flowers, soft teal gradient sky fading into a dreamy atmospheric haze.
Style：semi-realistic, slightly stylized, soft lighting, cinematic composition, no harsh contrast, no pure black.
Mood：calm, focused, magical — ideas forming under starlight.
Palette lock：teal, deep blue, cyan glow, warm amber highlights.
滚动用图生视频方向
- 场景主体保持稳定居中
- 前景缓慢上移，像镜头进入画面
- 起始运动极小，随后平滑增强
- 持续环境动效：星光闪烁、轨道轻微晃动、花丛轻摆
- 视频不为「自动播放」，而为 scroll 进度驱动
- 约 3 轮迭代后导出视频 → 滚动帧序列
1. 免费工具 Easy GIF：选 Video → WebP
2. 上传视频，设定帧率 / 尺寸 / 质量 → Convert
3. Convert 后点 Split：按帧切成独立 WebP
4. 保存序列到项目 assets/（Claude Code 将指向此目录做 scroll-driven hero）项目地基文件角色
PRD
- 有哪些页/区块
- 每块内容与沟通目标
- 用户滚动/点击各阶段应感受到什么、做什么
- 对 Claude Code = 蓝图（作者另有 PRD 专项视频）
CLAUDE.md（项目真源，每次任务先读）
- 文件夹结构与生成图路径
- 设计原则：subtle intentional motion；soft teal gradients；avoid generic UI（over-rounded cards, heavy shadows）
- 技术栈：Next.js App Router, Tailwind, GSAP, Framer Motion, R3F only when necessary
- 分区细则：hero 帧动画、NASA 数据变换与展示、astronomy carousel 气质、planet system 做什么/不做什么
- 禁止：over-engineered animation systems, excessive dependencies, components that try to do too many things
assets/
- Easy GIF 导出的 WebP 帧序列（hero 视觉地基）Claude Code 构建顺序（字幕中的真实流程）
Prompt 1 — 壳与大气
- Next.js 结构、全局 layout、固定青绿大气渐变底
- 柔和星空（无刺白点）、canvas / R3F 固定背景
- Hero 占位：全屏滚动帧、标题/副文、自定义导航
- 标题 idle、琥珀呼吸光、CTA 轻脉冲、nav hover 微光
- 先结构与组件分离，暂不塞满动画逻辑
Prompt 2 — 分区与数据
- Ideas forming：散点笔记 → 滚动中连线成星座（平滑、无混乱）
- Ideas becoming real：薰衣草粒子 → 星蓝聚类 → 月白/金结晶物（书/面板/orb）；用 opacity/blur/scale，非物理模拟
- Astronomy carousel：7 个天文史时刻无限横滚；古暗暖 / 今亮锐；居中卡琥珀高光
- EONET：野火/风暴/火山等 → 可读标签 + 漂浮视觉编码，强度≈ recency
Audit vs PRD（多数人跳过）
- 简单 prompt：对照 PRD 列出缺失与 under-built
- 案例缺口：事件色板、自定义光标低端性能、地球缺大气/tooltip/zoom、
结晶物过淡、**3D 行星系统未按规格（PRD 指定为全站中心件）**
Plan + Execute
- 让 Claude 出实现计划（重建 / 补丁 / 顺序）
- 批准时顺带写入 PRD 外的风格/内容/交互微调
- 执行后验收：hero 帧跟手、连线、轮播、粒子变身、行星 + EONET 世界图后处理提示（原型阶段）
- WebP 转换可能轻微掉画质 → upscaler
- 免费链路可能有水印 → 付费滤镜/后期去掉
完整逐步 prompt 作者放在 AndyNoCode 社区；本页保留字幕可执行骨架。
关键概念
- Claude Code — 在 PRD + CLAUDE.md 地基上执行复杂设计站，而非临场 vibe 拼功能
- CLAUDE.md 项目指令 — 本片中的设计真源：原则、栈、分区、禁区
- AI产品PRD — 结构与体验蓝图；审计对照物
- Nano Banana 2 — 品牌向图像层（Google Flow 内可直接用）
- Google Flow — 同平台图+视频；本片视觉生产入口
- Astra — 太空主题 demo 站（滚动 hero、NASA 信号、行星中心件）
- Easy GIF — 视频切 WebP 帧序列
- GSAP / Framer Motion / React Three Fiber — 滚动、微交互、3D 克制使用
- NASA EONET — 实时地球事件 → 抽象视觉信号
- AI slop / 设计平均美学 — 与「跳过 foundation」同因的通用 UI 病
与其他素材的关联
- 与 2026-07-26-youtube-claude-product-photo-ad-campaign：同一作者、同一天消化链路的姊妹篇。广告篇用 CLAUDE.md + Skills 做投放素材工厂（产品一致性抗 drift）；本篇用 PRD + CLAUDE.md 做设计驱动体验站（抗 generic UI）。同为「资产化 playbook → Claude Code 执行」。
- 与 2026-07-20-youtube-shopify-ai-toolkit-headless-store：同属 Claude Code + PRD 分阶段交付；Shopify 篇偏 commerce/API，本篇偏视觉世界与滚动叙事。
- 与 2026-07-09-techorange-ai-app-vibe-coding-uiux / AI设计平均美学：同诊断「一眼 AI 站」；本篇给可执行解法——视觉锁定 + CLAUDE.md 禁 generic pattern + PRD 审计，而不只抱怨 slop。
- 与 2026-07-12-woshipm-codex-personal-website-1-day：都是 Next + Tailwind + 动效个人/展示站；木水篇偏非技术 PM 1 天上线，本篇偏工作室级设计约束与滚动帧 hero。
- 与 2026-07-15-woshipm-ai-workbench-7-days / CLAUDE.md 行为驱动设计：工作台篇强调行为约束；本篇把同一机制用到设计原则与动画禁区，证明 CLAUDE.md 不只写工程红线，也写审美真源。
- 与 2026-07-01-woshipm-vibe-motion-10-pitfalls：都涉及「运动必须有规格」；Vibe Motion 是代码出片，本篇是 scroll 驱动 WebP 序列 + 站内动效。
原文精彩摘录
AI websites actually do not look generic because of the tools. They actually look generic because the process was skipped. … Nano Banana 2 actually gives you a visual generation layer that can match any design direction you define. And then for Claude Code, it gives you an execution engine that can build consistently where the foundation is solid. And a well-structured PRD and Claude MD file can give that foundation the rules it needs to stay cohesive from the first component to the last.
That shift, like from prompting Claude Code and hoping for the best to giving a complete foundation and letting it execute, is actually what produces the difference between an AI slop website and one that actually looks like it came from a professional studio.
If Claude Code is the building, the PRD is actually the blueprint. … the Claude.md is actually the source of truth for the entire project … Every time Claude Code actually starts a new task in this project, it will read this file first. And the Claude.md is actually what keeps the build cohesive from the first component to the last.
This is actually a step most people may skip, and why most AI builds will just stall after the first working version. So, we are going to ask Claude Code to run an audit of the current state of the project against the PRD.