meng shao (@shao__meng) “为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？ Every Level of Claude Fable” — TopicDigg

为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？ Every Level of Claude Fable 5 Websites Explained 这个 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 的网站“天差地别”。