Kimi K2.6の実地テスト：AIがワンクリックでプロのデザイナーに匹敵する美しいウェブページを生成します。

昨年、私は自分のパーソナルブランドのウェブサイトを作成し、ZCOOLでかなり有名なフリーランスデザイナーに依頼しました。見積もりは30,000人民元で、納期は6週間でした。デザインを受け取った時、私はとても満足しました。ホームページには流れるようなシェーダー背景が使われており、ヒーローセクションには滑らかなトランジション効果のある動画が埋め込まれていました。

キミがK2.6にアップデートしたのを見て、彼にリクエストを送りました。

5分後、吐き出されたのは3万元の原稿だった…。ほぼ同じレベル。

わずか1年で、AI 3万ドル相当の仕事はできますか？

今回の記事では、Kimi 2.6の真の性能を検証する方法をご紹介します。「顧客が実際に注文を行う」という前提に基づき、3つのケースすべてを実行しました。プロンプトワード各事例の下に掲載されていますので、解答をコピーしたい場合はご自由にお使いください。

この件が持ち上がったきっかけは、私の友人がクラフトビール製品を販売していて、プレミアムな製品ページを作成したいと考えていたからです。彼は以前、このプロジェクトを外部委託し、18,000元の見積もりを受け取っていました。

Kimi 2.6で試してみたところ、位置は…独立系ジャパニーズウイスキーブランド。

独立系日本ウイスキーブランドのランディングページを作成してください。

ブランドポジショニング：少量生産の手作り蒸留酒。職人技と東洋的な美意識を重視している。

【ホームページのヒーローセクション】

– 背景にはThree.jsとGLSLフラグメントシェーダーを使用して、流動的な効果を生み出しています。

グラスの中でウイスキーがゆっくりと渦巻く様子を視覚的にシミュレーションします。

* メインカラーはアンバー#C87533で、ダークブラウン#3B1F0Eとゴールドのハイライト#E8B547をミックスしています。

光源は左上隅から下向きに当たっているため、光の屈折とハイライトが顕著に現れています。

* 液体全体がゆっくりと呼吸する（10秒に1サイクル）。

– シェーダーには、以下の光学的な詳細情報を含める必要があります。

フレネル反射 – エッジハイライト

表面下散乱 – 液体内部における光の透過

コースティクス – 液体の表面に映る波紋の投影

4. 色収差 – ハイライトの端に見られる微妙な色収差。shadertoy.com の「liquid gold」シェーダーのテクスチャを参照してください。前景左側にブランド名があります（縦書きの日本語＋横書きの英語）。

右側には、@react-three/fiber を使用してレンダリングされた 3D ウイスキーボトルが配置されています。

* ボトルはゆっくりと回転します（30秒に1回転）。

ローラーが回転すると、慣性によってボトル内の液体が揺れ動きます。

* 速い転がり → 小さな泡が液体の表面に上昇する。

* 静止状態 → 液体がゆっくりと水平に戻る

【重要ポイント：アイスキューブカーソル】

ウイスキーのボトルや商品カードにマウスカーソルを合わせると、カーソルが浮かぶ3Dの氷の塊（透明で屈折効果のある）に変化します。

氷はごくわずかに（5秒に1回程度）回転します。

– 製品エリアを離れると、カーソルはデフォルト設定に戻ります。[2 番目の画面: フレーバーホイール] - インタラクティブな円形のフレーバーホイールで、異なるセクターにカーソルを合わせます。

* セクター照明

* 中央に、対応するフレーバーの「煙」が現れます（シェーダーシミュレーション）。

右にスライドしてフレーバーの説明をご覧ください

* 背景シェーダーの色を微調整して一致させる（スモーキー→グレーブルー、ハニー→ゴールデンイエロー）

―前の画面からシェーダーが「車輪のように静止する」画面への遷移アニメーション

【3画面目：醸造工程】

横スクロール式のタイムラインには、小麦の選定、発酵、蒸留、熟成、瓶詰めという5つの工程が表示され、各工程には白黒写真とテキストによる説明が添えられています。

【第4画面：製品シリーズ】

– 3種類のウイスキー製品カード。それぞれに3Dボトルデザインが施されており、カードを浮かせるとボトルがわずかに傾き、ハイライト部分が変化する。

【第5画面：購入エリア】 - ミニマルな購入ボタン + 数量選択 + 長文のブランドストーリーテキスト【スタイルリファレンス】

―メインテーマは、山崎ウイスキーのウェブサイトに見られる抑制された姿勢を反映している。

– Saturnbirdウェブサイト（saturnbird.com）の製品プレゼンテーションスタイル

– レイアウトリズムの参考：Linear公式サイト

[技術スタック] React 19 + TypeScript + Tailwind + Three.js + @react-three/fiber + @react-three/drei + GSAP

これプロンプトワード私は「シェーダーは見栄えが良いべきだ」とは言わず、フレネル反射、表面下散乱、コースティクス、色収差といった光学用語を直接的に指定した。

その言葉を聞いた途端、モデルは即座にギアを切り替えた。。

一般的に AI 生成されるシェーダーは、最も基本的なレンダリング方程式をデフォルトで使用するため、「動的グラデーション」のように見えます。フレネル反射と表面下散乱を要求すると、より完全なGLSLコード構造が呼び出されます。これが「真のシェーダー」を実行するための核心的な秘訣です。

それでは結果を見てみましょう。

ホームページのシェーダーは、正真正銘のシェーダーです。これは、ありきたりなCSSグラデーションとは一線を画す。琥珀色の液体が画面上をゆっくりと流れ、端にはフレネル効果によるハイライト、内側は半透明の質感、そして表面には波紋を伴って鋭い光の斑点が投影される。5秒間見つめていると、少しめまいがする。まさに私が求めていた感覚だ。グラスの中で本物のワインが渦巻いているような感覚を。

フレーバーホイールの画面はなかなか良いですね。「煙と背景の色がフレーバーに合わせて変化する」とのこと。このように全体の色調を呼吸するように感じられるのは、海外の数々の受賞歴のあるウェブサイトでしか見たことがありません。

醸造工程の画面は、最もデザイン性に優れていると同時に、最も驚きを与えてくれる画面です。私はてっきり一般的な縦型のタイムラインが表示されると思っていたのですが、デフォルトで横スクロールになっており、それまでの画面の縦方向のリズムとは対照的で、ページ全体に広がりを感じさせます。白黒の工程写真は、安っぽいフィルターを重ねたような印象もなく、控えめに扱われています。こうした細部へのこだわりは、大きなプラスポイントです。

確かに欠点もあります。3Dモデルは低スペック端末では確かに処理負荷が高く、5年前のMacBook Airで起動したところ、ファンが激しく回転しました。これはKimiだけの責任ではありません。複雑なシェーダーと高精度3Dモデルの組み合わせは、本質的に処理負荷が高いものです。しかし、低スペック端末を検出した際にピクセル比を下げたり、表面下散乱などの高負荷エフェクトを無効にしたり、あるいは単に2D表示に戻したりといった、パフォーマンス低下を未然に防ぐための対策が講じられていません。この点において、現在のKimiのアプローチは、経験豊富なフロントエンド開発者のそれに比べて劣っています。

私が思い描くKimiは、京都で8年間学んだ独立系調香師、リナという人物で、彼女の作品は「東洋のハーブ」をテーマにしています。

より一般的な「写真家」ではなく「調香師」を選んだ理由は、調香師という職業には本質的に東洋的な美的感覚があり、「高級感」を演出するのに適しており、Kimi2.6のスキルレベルをより適切にテストできるからです。Vibe Codingで最初に行うべきことは、「美しいウェブサイトを作る」といった空虚な話ではなく、モデルに具体的で想像可能な主人公を与えることです。

以下は私が使用した完全版です。プロンプトワード直接コピー＆ペーストできます：

独立系調香師の個人作品集を紹介するウェブサイトの作成にご協力いただけませんか。

経歴：彼女の名前はリナ。京都で8年間香水作りを学び、作品のテーマは「東洋のハーブ」です。

【最初の画面にヒーローゾーンの背景画像が表示されます】

– 純粋な黒色の背景 #0A0A0A

画像の左下から、朱色の煙（#C9302Cから#8B1A1Aへのグラデーション）がゆっくりと立ち昇る。

煙が上昇するにつれて、徐々に拡散して薄れ、画面の約3分の2の高さで淡い朱色の霧へと溶け込んでいく。

煙にはごくわずかな横方向の揺れ（左右に2～3ピクセル程度揺れる）があり、無風環境における気流をシミュレートしています。

サイクル時間は8秒です。サイクル中、新しい煙は下から上昇し、古い煙は上から消散するため、画像には常に煙が映り込んでいる状態が保たれます。

– 煙は Three.js + Fragment Shader (ボリューム煙シェーダー、ShaderToys の「ボリューム煙」の例を参照) を使用して生成されます。

― 表面全体に、粒径0.3ピクセル、密度15％の極めて微細なフィルム粒子フィルター層が重ねられている。

右下隅に非常に淡いオレンジがかった赤色のハロー（#8B1A1A、透明度20%）があり、これは「香炉」の光源の位置を示唆している。

【スタイル参考】 - レイアウト参考：Linear公式サイト（linear.app）

– テクスチャの参考：ランド・ノリス、Awwwards 2025受賞作品（OFF+BRANDスタジオ制作、awwwards.comで検索可能）

– エレガンスの参考：ZCOOLの2024年トップ100デザインリストに掲載されたブランドウェブサイトデザイン - カラー見本：メインカラー：インクブラック #0A0A0A、ウォームベージュ #F5F0E8、バーミリオンレッド #C9302C

– フォント：メイン見出し：Instrument Serif / Canela / Editorial New（最適なものを選択）；本文：Inter / Söhne；装飾用中国語文字：Source Han Serif

【主な機能：インクカーソル】

– デフォルトのマウスカーソルを非表示にし、代わりに動くインクの点を表示します。

・マウスを動かすと、インクの軌跡が残り、徐々に薄れてぼやけていきます。・クリック可能な要素の上にマウスカーソルを置くと、ドットが大きくなり、インクの軌跡が薄くなります。

この効果はサイト全体で一貫している必要があります。

ページ構造

ヒーローホームページ（フルスクリーン動画）

自己紹介欄：左側にテキスト、右側に画像。画像は彼女が自身のスタジオで撮影した白黒写真です。

作品セクション：香りのアートワーク展示。カードはクリップパスアニメーションを使用して左から右へ順に展開されます。

工程セクション：香水製造工程を横スクロールで表示するタイムライン。

お問い合わせ先：ミニマリスト予約フォーム

[技術スタック]

React 19 + TypeScript + Tailwind + GSAP + Three.js + @react-three/fiber + WebGL Shader

最初の画面の映像合成は非常に精緻です。背景の炎は内側の炎と外側の炎がはっきりと区別でき、カーソルを合わせるとリズムに合わせて揺らめきます。このような細部へのこだわりは、当時私のデザイナーが追加料金を支払って依頼したものでした。

友人がそれを見た時の最初の反応は、インクカーソルだった。「え、このマウスどうなってるの？」デフォルトではマウスカーソルは非表示になっており、インクの線に置き換えられている。マウスを動かしたりドラッグしたりすると、ゆっくりと広がるインクの軌跡が描かれる。

もちろん、欠点がないわけではありません。iPadの縦向きモードでは、ヒーローエリアの動画がレスポンシブデザインでオーバーフローすることがあります。修正を依頼したところ、2回目の試行で修正されました。私が満足しているのは、他の領域を「最適化」することなく、単一箇所の変更を処理できる点です。以前は、ボタンの色を変更するようモデルに依頼すると、ナビゲーションバー全体が書き換えられてしまい、血圧が急上昇するほどでした。

最初の2つの事例は美学に関するものでした。しかし、今回の事例は…これは実際にオンラインで収入を生み出すことができる。。

K2.6を見たのでAgent今回は、フロントエンドのアップグレードだけでなく、バックエンド機能も追加されました。

そこで、私は非常に具体的なシナリオを設定しました。バリ島で10年間陰ヨガを教えている独立系ヨガインストラクターのペギーは、生徒がオンラインで予約できるSaaSシステムを必要としていた。。

フルスタックアプリケーションでは、すべての要件を一度に提示するのではなく、段階的に議論する必要があります。こうすることで、各段階の成果を検証でき、モデルが失われることもありません。私は4回の段階に分けて議論しました。

第1ラウンド：見た目に美しいウェブサイトのフロントエンドを作成する。

独立系ヨガインストラクターのペギーのために、個人ウェブサイトを作成するのを手伝ってください。

彼女はバリ島で10年間、陰ヨガを教えている。

【最初の画面】

– 主人公の背景は、日の出時のビーチでのヨガのループ動画です（仮のもの）。

メインタイトルには、優雅なセリフ体フォントが使用され、ゆっくりとフェードインする。

– 「プライベートレッスンを予約する」というCTAボタンがあります。[スタイルリファレンス]

レイアウトや制約については、Linearのウェブサイト（linear.app）を参照してください。

– 雰囲気に関する参考資料：Awwwards 2024 SOTY受賞作品、Igloo Inc（awwards.comで閲覧可能）

– カラーパレット：メインカラー：オフホワイト #F8F5F0、アクセントカラー：グラスグリーン #6B8E5A とテラコッタ #C68B6A

– フォント：メインの見出しにはInstrument Serif、本文にはInterを使用

ページ構造

1. ヒーローホームページ
2. 地区について（リナの物語）
3. コース概要（全3コース）
4. 学生のレビュー
5. 連絡先

[技術スタック]

今のところは、React 19 + TypeScript + Tailwind + shadcn/ui + GSAP を使用して、フロントエンドページのみを開発し、機能の開発は行わないでください。

最初の再生後、少し驚きました。ビーチの日の出を映したヒーロービデオ、オフホワイトのメインカラー、そして紺碧の海――ブティックヨガスタジオのような全体的な雰囲気は、抑制とリラックス感を醸し出していました。メインタイトルのインストゥルメントセリフフォントは、「陰ヨガ」の美学に完璧にマッチしていました。スクリーンショットを撮ってWeChatモーメンツに投稿したら、誰もそれが…だとは想像できないでしょう。 AI 作った。
第2ラウンド：ユーザーシステムの追加

素晴らしい。では、このウェブサイトにユーザーシステムを追加しましょう。

学生はメールアドレスを使って登録およびログインできます。

– バックエンドとしてSupabaseを使用する

登録後、個人センターページが表示され、そこで自分のアバターや予約履歴を確認できます。

ログイン状態は永続的に保持されるべきである（ページを更新しても失われない）。

登録フォームのエラーメッセージには、アニメーション効果（揺れ＋赤い枠線）を適用する必要があります。

今回の嬉しい驚きは、ログイン状態の永続化とフォームアニメーションの細部へのこだわりです。単に「動作」に必要な最低限の機能だけを実装するのではなく、ログイン状態の永続化をデフォルトとして考慮している点が素晴らしいです。実用的ユーザーシナリオ：ページを更新しても接続が切断されず、エラーメッセージにはジッターフィードバックがあり、入力ボックスにはフォーカスアニメーションがあります。Supabaseの環境変数は完全に自動的に構成され、設定コードは1行も変更していません。以前は「ログインの追加」にはIDEで1時間かかる作業だと思っていましたが、今回は6分で完了し、ユーザーセンターのアバターと予約記録エリアは既に表示されていました。
第3ラウンド：予約システムを追加する

予約機能を追加しましょう：

– 私は3種類のコースを提供しています。

* マンツーマンのプライベートコーチング（1回800円）

* 少人数制クラス（1回300円）

* 体験レッスン（無料）

学生は日付、時間帯、コースの種類を選択できます。

予約が成功したら、Supabaseデータベースに書き込みます。

予約ページにはカレンダー機能を含めるべきであり、予約済みの時間帯はグレー表示にして選択できないようにする必要がある。

【ハイライト：「蓮の花」 - 予約成功】

– 学生が「予約確認」をクリックした後、それは...単純ポップアップウィンドウ

その代わり：

画面全体が暗くなる

* 中央で蓮の花がゆっくりと咲く（SVGアニメーション）

* 蓮の花の下には、「あなたの時間はあなたのために保存されています」というメッセージと、具体的な日付と時刻が表示されます。 * 背景には、優しく舞い落ちる花びら（パーティクルエフェクト）が描かれています。

* 5秒後自動プロフィールに戻る

カレンダーコンポーネントの最初のバージョンは...これは直接発射できる規格です。全ての枠が予約済みです。自動グレー表示で選択できない状態にはツールチップが表示され、モバイルデバイス用の時間選択機能は別途調整されています。私が画面録画で一番再生したいのは「蓮の花が咲く」シーンです。画面が暗くなり、SVGパスアニメーションを使って蓮の花びらが一枚ずつ開き、花びらの粒子がゆっくりと落ち、「あなたの時間はあなたのために保存されました」というメッセージがフェードインします。このプロセス全体は4秒ですが、まさに「儀式」の雰囲気を捉えています。

最初のバージョンの蓮の花が咲くエフェクトに満足できなかったので、キミにその部分だけを最適化してもらうよう頼みました。彼は本当にその部分だけを変更し、あっという間に仕上げてくれました。このバージョンの方がずっと良くなったと思いませんか？

「蓮の花」を作ることができる人 AIそして「予約成功」とだけ表示するデバイス AIその間には10人のデザイナーがいた。

第4ラウンド：管理者バックエンドを追加する

最後に、管理者アカウントのみがログインできる管理バックエンドを作成します。

ダッシュボード

―本日の予約状況、今週の収益、新規学生数（スクロールアニメーション付き）。

– 「今日のエネルギーマップ」モジュール：

* 教師の今日の授業スケジュールをタイムライン形式で表示します。

* 各クラスは点で表され、点の大きさは生徒数、色はコースの種類を表します。* カーソルを合わせると詳細が表示されます - 今月の予約状況の推移を示す折れ線グラフ（rechartsを使用）。

【予約管理】

– この表にはすべての予約が表示され、フィルタリングとキャンセルが可能です。

– スタイル参考：Linear公式サイトの製品インターフェース（linear.app）[学生管理]

– 登録学生一覧 [全体スタイル]

– shadcn/ui を使用する

– テーブルデザインの参考：Linear社の課題リストビュー

管理画面は、このシステム全体の中で、私にとって真にユーザーエクスペリエンスを向上させる画面です。非標準的な「今日のエネルギーマップ」コンポーネントは、一切妥協のない作りになっています。ドットのサイズは学生数、色はコースの種類に対応し、マウスオーバーで詳細が表示されます。Rechartsの折れ線グラフとスクロールする数値アニメーションと組み合わせることで、この管理画面の情報密度と粒度は非常に高く、実に印象的です。これは、私が普段使っている正規のSaaS製品とほぼ同等の性能です。。

最後のステップであり、最も重要なステップです。：

このアプリケーションをVercelにデプロイし、実際にアクセス可能なURLを提供してください。

フロントエンドはVercelにデプロイされ、バックエンドサービスとしてSupabaseが使用され、環境変数は正しく設定されています。

12分後、私はこれらの品物を受け取りました。

フロントエンドの公式ウェブサイト + 学生登録とログイン + コース予約システム + 管理者バックエンド + データ視覚化 + 実際のデータベース + 実際にアクセス可能なオンライン URL。

これら3つのケースをテストした結果、キミ2.6の美的センスは確かに大幅に向上したと感じました。今のところ、トップデザイナーたちは彼女を心配する必要はないでしょう。しかし、アウトソーシング市場の90％を占める中間層は、間違いなく深刻な問題を抱えることになるだろう。。

加えて、フルスタック開発という概念は、美的感覚よりも想像力に富んでいる。なぜなら、見た目の美しさはあくまで付け足しであり、フルスタック開発はゼロから構築する作業だからです。以前のVibe Codingでは、見た目の美しいシェルしか得られませんでした。しかし今では、Vibe Codingを使えば、収益を生み出し、リードを維持し、運営できるビジネスを手に入れることができます。ヨガのインストラクターは予約システムを外部委託するために2万元を費やす必要がなくなり、コーヒーショップのオーナーはブランドウェブサイトに1万元を費やす必要がなくなりました。これは「モデルベンチマーク」よりもはるかに重要なことです。

最後に、率直に言って、Kimiは確かに美的センスの面でトップレベルに達しています。フロントエンドの複雑さが高い場合でも、シェーダーや3Dエフェクトの安定性は予想以上に優れています。

数年前に話しました AI私たちは「それが可能かどうか」について話していました。昨年は… AI以前は「人間らしく見えるかどうか」が話題だった。今では、キミ2.6のようなモデルについて語る時、「美的センスが十分に洗練されているかどうか」が話題になる。評価の次元の変化自体が示しているのは…AI進捗。

AI 彼らは「味覚」という領域を巡って人間と競争し始めた。

元のリンク:K2.6はマイナーアップデートながら、大きな飛躍を遂げました！実地テストの結果、私が3万元をかけてデザインしてもらったウェブサイトを凌駕する出来栄えであることが証明されました。