Claude Sonnet 为何成为 PWA 生成的最佳选择

在构建 memeSTORE 的 AI 生成引擎时，我们对多个主流大模型进行了系统测试。测试维度包括：HTML 结构完整性、CSS 视觉效果、JavaScript 交互逻辑、输出文件大小，以及最关键的——用户打开时的第一印象。

测试方法

我们使用相同的 System Prompt 和 10 个不同类型的 Meme App 创意，分别测试了：

• GPT-4o（OpenAI）
• Gemini 1.5 Pro（Google）
• Claude 3.5 Sonnet（Anthropic via OpenRouter）
• Claude 3 Haiku（用于快速扩写阶段）

关键发现

1. 代码完整性

Claude Sonnet 在 90% 的测试中输出了完整闭合的 HTML 文件，而 GPT-4o 有约 30% 的概率截断输出。

2. 交互质量

Claude 生成的 JS 逻辑更倾向于「完整的状态机」，而非简单的 DOM 操作，这让交互体验更流畅。

3. 视觉美感

在不引入外部 CSS 框架的情况下，Claude 的内联样式更接近现代 UI 设计审美。

我们的选型结论

• 扩写阶段：Claude Haiku（快、便宜，用于理解意图）
• 生成阶段：Claude Sonnet（质量最优，可接受的速度）

通过 OpenRouter 统一接入，灵活切换模型，是我们目前的最佳实践。