メインコンテンツまでスキップ

Kimi K2.6をテストする

· 約10分
もみじーな
個人開発者

Copilot+君が大幅な下方修正をくらったのでClaude Opus4.6の変わりを探してます。

4.7を使うにしても週ごとのリミットとかいう意味不明なものがあるので・・・

Sonnet 4.6でいいじゃんって話ですが使うとわかりますが機能していないです。
Sonnetに大きなプロンプトを投げると1コードも生成することなくリミットに達します。

料金倍にして維持とかできないんですかね・・・

なのでKimi K2.6のテストをしました。

3Dのかっこいい地球儀を作ってみる

プロンプトは以下

あなたは優秀なフロントエンドエンジニアです。
Three.jsを使用して、ブラウザ上で動く「サイバーパンク風のインタラクティブな3D地球儀ネットワーク」をHTML1ファイル(CSS、JS内包)で作成してください。

以下の要件を必ずすべて満たしてください。

【1. ビジュアルとデザイン】
・全体的にダークでサイバーパンク、SF映画のような雰囲気にすること。
・背景はCSSの放射状グラデーション(暗いネイビーから黒)にし、さらにThree.js側で星屑のようなパーティクルを無数に散りばめること。
・画面の右上に「STORIES」「EXPLORE」、左下に「GLOBAL NETWORK」といったミニマルで透明感のあるダミーのHTML/CSS UIをオーバーレイ配置すること。
・テーマカラーはシアン(#26c6daなどの青緑系)をアクセントに使うこと。

【2. 地球の表現】
・中心に配置する地球は、以下のダークな世界地図テクスチャを使用すること。
URL: https://unpkg.com/three-globe/example/img/earth-dark.jpg
・テクスチャを貼った球体の上に、わずかに大きいワイヤーフレームの球体を重ねて、デジタルのグリッド感を出すこと。
・アンビエントライトとディレクショナルライトを適切に当てて立体感を出すこと。

【3. 都市とネットワークデータ】
・世界中の主要都市(東京、ニューヨーク、ロンドン、サンフランシスコ、サンパウロ、シドニー、ドバイなど計20箇所以上)の緯度経度データを用意すること。
・緯度経度から3D座標に変換し、各都市の位置に「光るドット(Sprite)」と「都市名のテキストラベル(Canvasで作ったSprite)」を配置すること。ラベルは地球にめり込まないよう少し浮かせること。
・主要都市間を結ぶ、地球の表面から少し飛び出す放物線(ベジェ曲線など)を多数描画し、世界中が繋がっているネットワーク網を表現すること。

【4. アニメーションとインタラクション】
・ネットワークの放物線上を、光の粒(パーティクル)が移動し続けるアニメーションを実装し、データが送受信されているように見せること。
・地球自体もゆっくりとY軸方向に自転し続けるようにすること。
・OrbitControlsを導入し、マウスドラッグで地球を回転させたりズームしたりできるようにすること。
・【重要】カメラの初期位置は、北米ではなく「日本(アジア)」が最初から見えているアングルに設定すること。

コードは省略せずに、完全に動作するものを出力してください。

まぁ 綺麗ですけどClaudeのほうがいいです。

ブラウザデスクトップを作る

あなたは世界トップクラスのフロントエンドエンジニアであり、UI/UXデザイナーです。
ビルドツール(npm, Webpack, React等)を一切使用せず、静的ファイル(HTML, CSS, Vanilla JavaScript)のみでブラウザ上で完全に動作する「ウェブデスクトップOS」を開発してください。

以下の要件を厳格に守り、可能な限り多くの機能を実装したシステムを出力してください。

【基本要件と制約(完全オフライン・ゼロ依存)】
- 外部ライブラリ禁止: jQuery, Bootstrap等のフレームワークは一切使用しないでください。
- CDNの使用禁止(完全オフライン対応): FontAwesomeなどのCDNも厳格に禁止します。
- アセットのローカル化: アイコン等はすべて「インラインSVG」と「CSS」のみで美しく描画し、外部画像ファイルへの依存をゼロにしてください(ダウンロードの手間も省く完全なスタンドアロンにします)。
- 純粋なVanilla JS: ES6+のクラスやモジュールパターンを駆使し、美しい設計にすること。

【UI / UX デザイン言語:Windows 11 スタイルの完全再現】
以下のWindows 11の特徴的な「Fluent Design System」をCSSで忠実に再現してください。
1. アクリル/マイカ効果 (Mica Effect): `backdrop-filter: blur(15px)` と半透明の背景色 (`rgba`) を組み合わせ、タスクバー、スタートメニュー、ウィンドウのタイトルバーに「すりガラス」のような美しい透過効果を持たせること。
2. 角丸 (Rounded Corners): すべてのウィンドウ、スタートメニュー、ボタン、ホバー時の背景に滑らかな角丸 (`border-radius: 8px` 〜 `12px` 程度) を適用すること。
3. ドロップシャドウ: ウィンドウが重なった際の立体感を出すため、美しく自然な `box-shadow` を設定し、アクティブなウィンドウは影を少し濃くすること。
4. アニメーション: アプリの起動時、最小化・復元時、スタートメニューの展開時に、CSS Transition や Keyframes を用いた滑らかなフェード&スケール(拡大・縮小)アニメーションを実装すること。

【UI コンポーネント】
1. デスクトップ: Windows 11のデフォルト壁紙を思わせるような、CSSグラデーションの美しい背景色を設定。デスクトップアイコンは左上から縦グリッド配置。
2. センタータスクバー: 画面下部に固定。アプリアイコンとスタートボタンを**中央揃え(センター配置)**にすること。
3. スタートメニュー: 中央のスタートボタンをクリックすると、画面中央下部からフワッと浮かび上がる。上部に検索バー風のUI、中央にピン留めアプリのグリッド、下部にユーザーアイコンと電源ボタンを配置。
4. システムトレイ: タスクバー右端に配置。時計と、CSSで描画したバッテリー/Wi-Fiアイコンを並べる。

【コア・アーキテクチャ(ウィンドウマネージャー)】
1. ドラッグ&ドロップ、リサイズ機能。
2. Z-Index管理による最前面化。
3. 最小化(タスクバーへ収納アニメーション)、最大化(全画面化)、閉じる機能。
※ウィンドウ右上のコントロールボタン(最小化・最大化・閉じる)は、Windows 11の配置とデザイン(ホバー時に閉じるボタンだけ赤くなる等)を再現すること。

【搭載アプリケーション(思いつく限りの全機能)】
1. ファイルエクスプローラー (Win11風UI): `localStorage` を利用した仮想ファイルシステム。左側にナビゲーションペイン、右側にファイルグリッド。
2. テキストエディタ (メモ帳): シンプルなテキスト作成・保存ツール。
3. ターミナル (Windows Terminal風): 黒背景に透過を少し入れ、基本的なコマンド(`help`, `echo`, `clear`, `date`, `ls`)が動くCUI環境。
4. 電卓: Windows標準電卓風のクリーンなグリッドレイアウト。
5. システムモニター: CPU/メモリ使用率を模した動的グラフを描画するタスクマネージャー。
6. 時計・カレンダーアプリ: システムトレイの時計クリックで右下からポップアップするカレンダーUI。

【出力形式の指示】
コード量が非常に膨大になるため、以下の順序で計画的に出力してください。
1. まず、全体のアーキテクチャ設計と、Windows 11風デザインをCSSでどう表現するかの戦略を説明してください。
2. 次に「HTMLの基本構造」と「CSS(Win11テーマのベースデザイン、Micaエフェクト、アニメーション定義)」を出力してください。
3. 続いて「JavaScript(ウィンドウマネージャー、センタータスクバー、スタートメニューのコアロジック)」を出力してください。
4. 最後に、各アプリケーションのロジックとインラインSVGアイコンのデータを含めた「完全版のJavaScript」を提供してください。

変なバグもあるのでClaude君のほうがいいです。

ヴァンパイアサバイバー風

長すぎるのでプロンプトはカットしますが微妙だぽん

Claudeでつくるとこんな感じで普通にプレイできるレベルです。

最後におまけ(めっちゃかっこいいプロンプト)

なんの意味もないプロンプトですがかっこいいです。
実際はめっちゃ動いているのでぜひ作ってみてください

ダークテーマ(黒背景 #080b0e + シアン #00e5c0)のサイバーダッシュボードを単一HTMLファイルで作成してください。外部ライブラリ不使用、Canvas + CSSのみ。

■ レイアウト: 16x10のCSSグリッド、gap: 3px

■ 中央パネル(col 5-12, row 2-8):
- 3D DNA二重螺旋のネットワーク可視化(120ノード × 2ストランド + 80個のクラウドノード)
- Y軸回転アニメーション、ノード間をパーティクルが流れるエフェクト
- 垂直スキャンライン、十字クロスヘア、HUDテキスト表示
- ヘッダーバーにプログレスバー風のステータス表示
- 下部にスクロールティッカーテキスト

■ 左サイドパネル(各2x2, col 1-2):
- THREAT RADAR: createConicGradient による回転レーダースイープ + ブリップ検知表示
- SIGNAL ANALYSIS: 3チャンネルの正弦波波形(異なる周波数・位相)
- DATA STREAM: カタカナ文字(U+30A0-30FF)のマトリックスレイン
- ACTIVITY MAP: sin関数ベースの動的ヒートマップグリッド(12x8)

■ 右サイドパネル(各2x2, col 15-16):
- NODE CLUSTER: パルスリング付きネットワークグラフ(15ノード)
- FREQ SPECTRUM: グラデーション付きスペクトラムアナライザー + ピークホールド
- PROCESS LOG: プロセス名 + CPU% + バー表示のデータテーブル
- MEMORY DUMP: アドレス + 16進ダンプ表示、高い値をハイライト

■ 上部パネル(各4x1):
- EVENT TIMELINE: 中央線 + 上下にイベントマーカー点
- BANDWIDTH MONITOR: 上下対称のエリアチャート(DL:シアン / UL:ブルー)

■ 下部パネル(各4x1):
- PACKET FREQUENCY: sin*cosベースのアニメーション棒グラフ
- CLUSTER LOAD: 8リージョンの水平ロードバー + ラベル + %表示

■ 残りのセル = 小型ウィジェット(1x1):
- 種類: bar, hbar, line, area, gauge, donut, ring, wave, scatter, miniRadar, sparkline, meter
- 各ウィジェットにヘッダー(ラベル + ステータスLEDドット 緑/黄/赤)
- フッターにレスポンス時間 + 数値
- meter型はプログレスバー付き、gauge/donut/ring型は中央に大きな数字

■ アニメーション:
- サイドパネルは3フレームごとにCanvasを再描画
- 中央パネルはrequestAnimationFrameで毎フレーム描画
- ウィジェットの枠が0.6秒間隔でランダムに光るパルスエフェクト
- ステータスLEDが2秒間隔でランダムに状態変化
- プログレスバーが3秒間隔でランダムに幅変化
- CSSスキャンラインオーバーレイ(2px間隔の横縞)

■ スタイル:
- フォント: Courier New monospace
- 全体の配色はシアンの不透明度で統一(0.02〜0.8の範囲)
- hover時にボーダーが明るくなる
- グラデーション付きのバーやエリアチャート

Kimi K2.6

Claude君のほうが中央がきれいです。