私たちは、Kimi K2.7 Code と Claude Fable 5 にそれぞれ 12 のランディングページを生成させ、比較する実験を行いました。全体として、Kimi K2.7 Code は Fable 5 よりも約 94% 安く（16 分の 1）、特にデザイン MCP を利用して適切なコンテキストを与えた場合、同等の品質の出力が得られました。
結果は OVSC の Web サイト で公開しており、Claude Opus 4.8、Claude Fable 5、Kimi K2.7 Code が生成したすべてのバリエーションを掲載しています。平均すると、Kimi は Fable よりも約 16 倍、Opus よりも約 8 倍安価でした。
https://ovsc.vercel.app/ のスクリーンショット
OVSC の Web サイトでは、すべてのランディングページを、総コスト、トークン使用量、生成時間の内訳とともに確認できます。
この実験の実施方法を理解するために、まずベースラインを確立し、プロンプトだけでモデルが何を生成できるかを確認しました。
プロンプト
まず、B2B SaaS、屋上スピークイージー、SQL クエリ用の開発者ツールなど、いくつかのカテゴリにわたる少数のランディングページ用プロンプトから始めました。使用したプロンプトの例は以下の通りです。
- SQL クエリをチャートに変換する開発者ツールのランディングページを構築してください。
- 屋上スピークイージーカクテルバーのランディングページを構築してください – アール・デコ、金箔とエメラルド、1920 年代の魅力。
- B2B SaaS スタートアップ向けランディングページを構築してください – チーム向けプロジェクト管理・コラボレーションツール（タスク、タイムライン、チームワークフロー、統合機能）。
同じプロンプトを Kimi K2.7 Code と Claude Fable 5 の両方に与えました。
以下は、「SQL クエリをチャートに変換する開発者ツールのランディングページを構築してください」という指示に対して、これらのモデルが生成したページです。
残念ながら、両モデルが生成したランディングページは、明らかに AI が生成したとわかるものでした。
デザインインスピレーション用 MCP サーバー
よくデザインされたランディングページのスクリーンショット、個々の UI 要素、その他のビジュアルリファレンスを提供するカスタム MCP サーバーをセットアップしました。Kimi K2.7 Code はマルチモーダルであるため、それらの画像をテキストとともに直接プロンプトに含めることができました。
その結果、結果は大きく変わりました。短いプロンプトだけでレイアウトを生成するのではなく、Kimi は具体的な例から学び、ビジュアル言語を理解し、それらのパターンを新しいページに適用できるようになりました。実際、結果にはより強固な階層、優れたタイポグラフィ、意図的な構成が見られました。
以下は、屋上スピークイージーのランディングページのビフォーアフターです。
デザインインスピレーションを与えることで、Kimi は読み込みが速く、画像切れのプレースホルダーがなく、はるかに読みやすいタイポグラフィを使用したページを生成しました。
デザインが向上した後、次に探求したいことはコストでした。
ランディングページあたりのコスト
Kimi K2.7 Code のようなオープンソースモデルを使用する利点の 1 つはコストです。例えば、この B2B SaaS 向けランディングページは、Kimi ではわずか 4 セントでした。同じプロンプトが Claude Fable では $1.09 かかり、約 27 倍高価でした。
平均すると、Kimi K2.7 Code で生成したランディングページは、Claude Fable 5 のようなプロプライエタリモデルで生成したものより約 16 倍安価でした。
生成型コーディングエージェントでは、ランディングページを 1 バージョンだけ生成することはほとんどありません。多くの場合、さまざまなデザイン方向性、コピー、ページ要素を探求するために、複数のバリエーションを生成します。そして、有望なものに対して反復的に編集・洗練を行い、実験と調整のサイクルを繰り返します。こうしたやり取りを繰り返すうちに、SaaS のランディングページのような単純なものであっても、価格差はすぐに大きくなります。
Kimi K2.7 Code で 100 ページを生成した場合、Claude Fable 5 のようなプロプライエタリモデルを使用する場合と比べて、約 $94 の節約になります。
低コストは明らかな利点でしたが、結果の品質を比較する方法も必要でした。
結果の比較
ランディングページを生成した後、Kimi と Fable を系統的に比較する方法を模索しました。コード自体だけでなく、各ページの全体的な品質（ポジショニング、ビジュアルの方向性、コンテンツ構造、仕上がり、レスポンシブ性、技術的実行）を評価したかったのです。そのために、GPT-5.5 に評価基準を与え、各ページのスクリーンショットとソースコードをレビュー・採点させ、0 から 100 の最終スコアを割り当てました。
各ランディングページのスコアは以下の通りです。
Claude Fable は両方の例で高得点でしたが、その差は比較的小さかったです。Kimi はデザイン、構造、ページ全体の品質で競争力を維持しながら、実行コストははるかに低く抑えられました。この種のワークフローでは、そのトレードオフは妥当だと感じました。
Claude Fable は両方の例で高得点でしたが、その差は比較的小さかったです。Kimi はデザイン、構造、ページ全体の品質で競争力を維持しながら、実行コストははるかに低く抑えられました。この種のワークフローでは、そのトレードオフは妥当だと感じました。
最終的な感想
Kimi K2.7 Code のようなオープンソースモデルは、すでに有用なランディングページを生成する能力を備えていますが、私たちの実験では、プロンプトだけでは方程式の一部に過ぎないことが示されました。適切なコンテキストがなければ、Kimi も Claude Fable も、洗練されているものの凡庸な結果を生み出す傾向がありました。
最大の改善点は、カスタム MCP サーバーを通じて Kimi にビジュアルインスピレーションを与えたことです。スクリーンショットやデザインリファレンスから学習できるようになると、ページはより読みやすく、より構造化され、より視覚的に意図的なものになりました。
その低コストと相まって、オープンソースモデルはこの種のワークフローにとって実用的な選択肢となります。モデルにより強力な入力を与え、低コストで反復できれば、驚くほど遠くまで到達できます。
オープンソースモデル（Kimi K2.7 Code など）は together.ai で試せます。
