为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？ Every Level of Claude Fable 5 Websites Explained https://t.co...
TL;DR · AI 摘要
Claude Fable 5生成网站质量低，但通过七级进阶系统可显著提升。文章系统解析了从视觉参考到设计DNA提取的完整方法论。
核心要点
- Level 3注入GitHub设计技能文件可跨越交付门槛
- Firecrawl抓取竞品数据使网站具备商业逻辑
- 设计提取使网站与Level 1版本产生天差地别
结构提纲
按章节快速跳转。
- §引言
揭示95% Claude Fable 5网站质量低的行业现象
系统解析Grab And Go到Design Extraction的完整方法论
上传截图使设计架构立刻改善
GitHub预包装指令使网站达专业水准
Firecrawl分析竞品数据构建转化逻辑
复制优秀网站设计规则实现质变
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- 七级进阶系统
- Grab And Go
- 视觉参考
- 设计技能注入
- 媒体资产生成
- UI组件复用
- 数据驱动设计
- 设计DNA提取
金句 / Highlights
值得收藏与分享的关键句。
Level 3注入GitHub设计技能文件使网站出现Apple风格、Bento布局
Firecrawl抓取10家成功/失败屋顶公司数据输出转化Blueprint
设计提取使网站实现动态变色光球与精致排版的质变
meng shao on X: "为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？ Every Level of Claude Fable 5 Websites Explained https://t.co/MWUkB4Vmn8 这个 21 分钟的实操视频，把如何通过一套可复制的七级进阶系统（Skills 和 Knowledge），持续产出高质量、可交付的网站讲的很透。 # 七级进阶框架 1. Grab And Go https://t.co/pipWd0dmSc" / X
meng shao
@shao__meng
为什么 95% 的 Claude Fable 5 做的网站看起来“垃圾”？ Every Level of Claude Fable 5 Websites Explained
youtube.com/watch?v=AFRL9d…
这个 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 的网站“天差地别”。
2:51 AM · Jul 6, 2026
562
Views
2
1
4
Read 2 replies