为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？

Every Level of Claude Fable 5 Websites Explained
https://www.youtube.com/watch?v=AFRL9dtUHeI

这个 21 分钟的实操视频，把如何通过一套可复制的七级进阶系统（Skills 和 Knowledge），持续产出高质量、可交付的网站讲的很透。

七级进阶框架

1. Grab And Go
· 像聊天机器人一样直接说“给我建个网站”
· 3/100，典型 AI 网站感

2. Screenshots & References
· 上传参考图、截图、情绪板（Moodboard）
· 10/100，图像胜千言

3. Design Skills
· 注入 GitHub 上的设计技能文件（Skills）
· 大幅质变，接近专业风格

4. Image & Video
· 用 OpenArt 生成/编辑图片与视频资产
· 媒体质感提升

5. UI Snapping
· 从 21st. dev、CodePen、Magic UI 等库复制组件
· 直接复用现成高质量组件

6. Finding The Data
· 用 Firecrawl 做竞品调研、找转化数据
· 网站开始具备商业逻辑

7. Design Extraction
· 提取优秀网站的设计 DNA 并让 Fable 5 重建
· 一夜之间的差距

逐层要点提炼

Level 1：聊天式建站的陷阱
· 用户像指挥设计师一样随口说“给我做一个很酷的黄 iPhone 网站”。
· 结果：经典 AI 味、浮动 iPhone、配色平淡、缺乏创意。
· 结论：这只是“草稿”，不能交付。

Level 2：视觉参考
· 关键资源：godly. io、landbook、dribbble 等。
· 方法：把优秀网站截图直接丢进 Claude，让它“照着风格做”。
· 效果：设计架构立刻改善，因为图像比语言更精确。

Level 3：设计 Skills - 前半段最大升级
· Skills 是社区或专家整理好的预包装指令，相当于给 Claude 一本“设计圣经”。
· 推荐资源：GitHub 上近 10 万星的 UIUX Pro Max、Shading UI 等。
· 操作：复制 Skill 文件 → 让 Claude 加载 → 再让它“使用所有相关设计技能”建站。
· 结果：网站出现 Apple 风格、Bento 布局、统一配色、专业字体，明显跨越“可交付”门槛。

Level 4：图片与视频资产
· 工具：OpenArt（Nano Banana、C dance 等模型）。
· 不仅可以生成静态 iPhone 产品图，还能从单帧生成循环视频，并保证首尾帧一致。
· 作者强调：可以连接 Claude 的 MCP，让图像生成变成自动化资产流水线。

Level 5：UI Snapping
· 概念：像“从任意房子复制壁炉”一样，把互联网上公开的高质量 UI 组件直接粘贴进自己的网站。
· 推荐库：21st. dev、CodePen、Magic UI、Mobin。
· 操作：复制组件代码/URL → 让 Claude 集成到底部或指定位置。
· 演示：把气球动画组件加到页面，立刻提升动态感。

Level 6：数据驱动
· 漂亮网站若不能转化，就像“没有引擎的法拉利”。
· 工具：Firecrawl。
· 用例：让 Claude 抓取 10 家成功屋顶公司 + 10 家失败屋顶公司，分析差异、CTA 结构、转化逻辑，输出“可交给另一模型执行”的 Blueprint。
· 核心洞察：用外部证据指导设计，而非凭空创意。

Level 7：设计提取 - 视频高潮
· 方法：以优秀网站（如 anti-gravity. co）为例，让 Claude 提取其字体、配色、设计规则、情绪、版式。
· 然后把这些提取出的设计 DNA 应用到新主题（如卖黄 iPhone 或耳机）上。
· 使用 Fable 5 执行最终“one-shot”重建。
· 结果：动态变色光球、精致排版、统一视觉语言——与 Level 1 的网站“天差地别”。