Kimi K2.7 Code 對決 Claude Fable 5:成本降低 94% 的登陸頁面製作方案

@nutlope
英語4 週前 · 2026年6月17日
109K
345
20
13
509

TL;DR

一項對比實驗顯示,在網頁設計方面,Kimi K2.7 Code 的成本比 Claude Fable 5 低 16 倍;透過使用自訂設計 MCP 伺服器獲取視覺靈感,兩者能達到相近的品質評分。

我們做了一個實驗,讓 Kimi K2.7 Code 和 Claude Fable 5 各製作 12 個登陸頁面來進行並排比較。總體來說,Kimi K2.7 Code 的成本比 Fable 5 低了大約 94%(便宜 16 倍),而且在我們透過一個設計 MCP 為 Kimi 提供適當的上下文後,輸出的品質也相當不錯。

我們已將研究結果以及 Claude Opus 4.8、Claude Fable 5 和 Kimi K2.7 Code 生成的所有變體,都發佈在 OVSC 網站 上。平均而言,Kimi 比 Fable 便宜約 16 倍,比 Opus 便宜約 8 倍。

Hassan - inline image

來自 https://ovsc.vercel.app/ 的截圖

OVSC 網站讓你可以探索所有登陸頁面,以及總成本、Token 使用量和生成時間的詳細資訊。

為了了解我們如何進行這個實驗,我們首先建立了一個基準,看看模型僅從提示詞能產生什麼。

提示詞

我們從一組涵蓋不同類別的登陸頁面提示詞開始,包括 B2B SaaS、屋頂雞尾酒吧,以及一個用於 SQL 查詢的開發者工具。以下是我們使用的一些提示詞範例:

  • 為一個能將 SQL 查詢轉換為圖表的開發者工具建立一個登陸頁面。
  • 為一個屋頂雞尾酒吧建立一個登陸頁面——裝飾藝術風格、金箔與祖母綠、1920 年代的魅力。
  • 為一個 B2B SaaS 新創公司建立一個登陸頁面——一個團隊專案管理與協作工具(任務、時間表、團隊工作流程、整合功能)。

我們將同樣的提示詞同時給了 Kimi K2.7 Code 和 Claude Fable 5。

以下是這些模型在被要求 「為一個能將 SQL 查詢轉換為圖表的開發者工具建立一個登陸頁面」 時所創建的頁面。

Hassan - inline image

不幸的是,兩個模型製作的登陸頁面都明顯帶有 AI 生成的痕跡。

設計靈感 MCP 伺服器

我們設定了一個自訂的 MCP 伺服器,提供設計精美的登陸頁面截圖,以及個別的 UI 元素和其他視覺參考。由於 Kimi K2.7 Code 是多模態的,我們可以直接將這些圖片連同文字一起放入提示詞中。

這顯著改變了結果。Kimi 不再僅從一個簡短的提示詞生成佈局,而是能夠參考具體範例,掌握視覺語言,並將這些模式應用到新的頁面上。在實際操作中,結果展現了更強的層級結構、更好的排版和更精心的構圖。

以下是屋頂雞尾酒吧登陸頁面的前後對比:

Hassan - inline image

有了設計靈感後,Kimi 生成的頁面載入速度更快,避免了破圖的佔位符,並使用了更易於閱讀的排版。

設計改進後,我們接下來想探討的是成本。

每個登陸頁面的成本

使用像 Kimi K2.7 Code 這樣的開源模型的好處之一就是成本。例如,這個 B2B SaaS 的登陸頁面使用 Kimi 僅花費 4 美分。同樣的提示詞使用 Claude Fable 則需要 1.09 美元,貴了將近 27 倍。

Hassan - inline image

平均而言,我們用 Kimi K2.7 Code 生成的登陸頁面,成本大約是使用 Claude Fable 5 等專有模型的 16 倍。

在使用生成式編碼 Agent 時,你很少只生成一個版本的登陸頁面。更常見的情況是,你會生成多個變體,以便探索不同的設計方向、文案和頁面元素。然後,你會在那些有潛力的版本上進行迭代,透過反覆的實驗和調整來編輯和改進。經過來回多次測試,即使是像 SaaS 登陸頁面這樣簡單的東西,價格差異也會迅速累積。

如果你用 Kimi K2.7 Code 生成 100 個頁面,與使用 Claude Fable 5 這樣的專有模型相比,你將節省大約 94 美元。

較低的成本是一個明顯的優勢,但我們也想要一種比較結果品質的方法。

比較結果

生成登陸頁面後,我們想要一個系統性的方法來比較 Kimi 和 Fable。我們不僅僅看程式碼本身,而是看每個頁面的整體品質,包括定位、視覺方向、內容結構、工藝、響應式和技術執行。為此,我們給了 GPT-5.5 一個評分標準,讓它審查並評分每個頁面的截圖和原始碼,並給予一個 0 到 100 的最終分數。

以下是每個登陸頁面的分數:

Hassan - inline image

Claude Fable 在兩個範例中得分都更高,但差距相對較小。Kimi 在設計、結構和整體頁面品質方面仍然具有競爭力,同時運行成本低得多。對於這種類型的工作流程,我們認為這個取捨是合理的。

最後的想法

像 Kimi K2.7 Code 這樣的開源模型已經能夠生成有用的登陸頁面,但我們的實驗表明,僅靠提示詞只是方程式的一部分。如果沒有更好的上下文,Kimi 和 Claude Fable 都傾向於產出精美但千篇一律的結果。

最大的改進來自於通過一個自訂的 MCP 伺服器為 Kimi 提供視覺靈感。一旦它能從截圖和設計參考中學習,頁面就變得更容易閱讀、結構更清晰,並且在視覺上更具意圖性。

結合較低的成本,這使得開源模型成為此類工作流程的實用選擇。如果你能為模型提供更強的輸入並進行低成本的迭代,你能取得的成果會出乎意料地好。

你可以在 together.ai 上嘗試像 Kimi K2.7 Code 這樣的開源模型。

二次創作

使用 YouMind 創作爆款文章

收集素材、拆解爆點、生成視覺資產、撰寫內容,並在一個 AI 工作空間裡完成分發。

了解 YouMind
寫給創作者

把你的 Markdown 變成乾淨的 𝕏 文章

圖片上傳、表格、程式碼區塊,往 𝕏 上手動重排太痛苦。YouMind 把整篇 Markdown 一鍵轉成乾淨、可直接發佈的 𝕏 文章草稿。

試試 Markdown 轉 𝕏

更多可拆解樣本

近期爆款文章

探索更多爆款文章