Transcript
00:00:00Kimi K3が公開されました。Claude Fable 5やGPT 5.6と同レベルの非常に強力なモデルです。
00:00:06最大の特長は、フロントエンド開発に非常に優れている点です。
00:00:09あまりにも優れているため、他のどのモデルよりもデザインが得意だと言われているほどです。
00:00:14実際にそれほど素晴らしいのですが、注意点があり、これはKimiだけの問題ではありません。
00:00:17どのAIモデルにも固有のデザインスタイルがあり、使い込むまで気づかないものです。
00:00:22新しいモデルが発表されるたびに、誰もが「フロントエンドで最高だ」と言い、最初の数サイトは確かにそうです。
00:00:28しかし実際には、すべてのモデルがデザインにおいて独自のパターンを使い回しています。
00:00:32Sonnet 4.5であれGPT 5.6であれ、それらのパターンはデザインに繰り返し現れます。
00:00:38ですので、どのモデルを使うにせよ、優れたデザイナーがするようにデフォルトの癖から脱却させる手段が必要です。
00:00:43そして、最も有効な方法の1つが「Hallmark」と呼ばれるスキルです。
00:00:46初めての方へ。私たちはソフトウェア会社であり、このチャンネルはAI Labsです。
00:00:50ここではAIでビジネスを最適化する方法をご紹介しています。ご自身の事業をお持ちでない場合も、
00:00:54これらのスキルを活用して他者のビジネスを最適化し、対価を得ることができます。
00:00:58今回の動画では、Kimiモデルとそのフロントエンドデザイン機能、そしてデザインから定番パターンを排除するスキルについて解説します。
00:01:05Kimi K3をご存じの方も多いでしょうが、Moonshotの最高峰モデルの1つです。ご存じない方のために簡単に復習します。
00:01:11Moonshot AIがフラッグシップモデルとしてリリースし、瞬く間に人気を集めました。
00:01:15大きな特徴は、100万トークンのコンテキストウィンドウを持つモデルの仲間入りをしたことです。
00:01:20性能面では、多くの分野で現在最も強力な2つのモデルであるFable 5やGPT 5.6に対抗しています。
00:01:26比較のために、さまざまな領域でモデルを評価するArtificial Analysisのベンチマークを使用します。
00:01:32知能面ではOpus 4.8や新しいGemini 3.6を大きく引き離しており、Fable 5やGPT 5.6のすぐ後ろに位置しています。
00:01:40数値の差はごく僅かであり、実質的に同等のティアに位置しています。
00:01:44フロントエンドデザインにおいては、LM Arenaの計測によれば、これら2つのモデルすら凌駕しています。
00:01:48LM Arenaは、同じプロンプトでモデル同士を対戦させ、実際のユーザーレビューに基づいて順位付けを行います。
00:01:54Kimiが好成績を収める理由の1つは、強力なビジョン機能に由来する組み込みのVision-in-the-Loop機能です。
00:02:00要するに、モデルはコードを書くだけでなく、自身が構築しているものを自ら確認します。
00:02:04ほとんどのモデルはコードのみを見てサイトの仕上がりを推測しますが、
00:02:07Kimiは生成した画面のスクリーンショットを撮り、結果を確認した上で調整を加えます。
00:02:11これが、フロントエンドに優れていると評価される大きな要因です。
00:02:15余白やレイアウトが、他のモデルよりもはるかにバランス良く、意図を持って構成されます。
00:02:19残るはコストの問題です。
00:02:20ここでKimiは真の強みを発揮します。
00:02:22価格は入力トークン100万個あたり3ドル、出力トークン100万個あたり15ドルです。
00:02:27GPT 5.6は入力5ドル、出力30ドルとやや高額です。
00:02:32そしてFableは現在最も高く、入力10ドル、出力50ドルです。
00:02:36したがって、Kimiはトップモデルと同水準の性能を、3つの中で最も低い価格で提供します。
00:02:41さて、KimiにはK2.5モデルと同時に提供開始された「Kimi Code」という専用ハーネスが付属しています。
00:02:47これはターミナルベースのエージェントで、APIを直接経由せずにKimiを実行できます。
00:02:52しかし、実際にKimi Codeを使用してみると、動作が非常に遅いことが分かりました。
00:02:55Claude CodeやCodexなら約3分で終わるタスクに、Kimi Codeは10分近くかかります。
00:03:00これには2つの理由があります。
00:03:011つ目は、Kimiの重みがオープンになっていないため、他のサーバーではなくKimiでのみホストされている点です。
00:03:08そのため、すべてのリクエストはKimi自社のサーバーにしか送信できません。
00:03:12それらのサーバーが過負荷状態になるため、リクエストへの応答に時間がかかります。
00:03:162つ目は、ハーネス自体に原因があります。
00:03:17旧モデルでも扱いづらさがありましたが、Kimi自身もドキュメントで、K3のポテンシャルを最大限に引き出す設計にはなっていないと認めています。
00:03:25速度以外にもさらに2つの問題があります。
00:03:271つ目はコンテキストです。
00:03:28CodexやClaude Codeではタスクに応じてモデルを頻繁に切り替えますが、どちらも切り替え時にコンテキストを適切に保持します。
00:03:36しかしKimi Codeでは、モデルを切り替えると会話のコンテキストを保持する仕組みが破綻してしまいます。
00:03:43もう1つはサブエージェントです。
00:03:44実行時、非常に多数のサブエージェントが起動しているように見えました。
00:03:47しかし後から確認すると、タスク処理のために起動したのは5つだけだったと表示されました。
00:03:51そこでモデルを正しく検証するため、非常にスムーズに動作するClaude Code内部でKimiを実行しました。
00:03:57そしてKimiにはまさにそれを行う方法が用意されています。
00:03:59Claude Code内でKimiを動かす方法の1つは、APIを直接利用することです。
00:04:03しかしモデルが読み書きする単語ごとに課金されるため、使用量が増えると費用が急速に膨らんでしまいます。
00:04:10そのため、すでに契約しているKimiの定額プラン経由で実行するのが賢明です。
00:04:14そうすれば追加の請求を気にすることなく、毎月の定額料金だけで済みます。
00:04:18そのために「CLI Proxy API」というツールを使用します。
00:04:21ログイン済みのコーディングツールを自身のマシン上でローカルAPIとして機能させてくれます。
00:04:28つまり、既存のサブスクリプションを利用可能なサーバーに変換するわけです。
00:04:33インストールは「brew install」コマンドで行います。
00:04:35完了後、「kimi login」コマンドを実行するとKimiのログインページが開き、サインインできます。
00:04:41認証情報が確認されればログイン完了です。
00:04:43次にサーバーを起動し、Kimiとの接続を維持します。
00:04:47その後、ローカル環境用のAPIキーを生成します。このキーをClaude Codeに渡すことでアクセス権を付与します。
00:04:54手動で行う代わりに、Claude Codeなどのエージェントに同ツールを使ってAPIキーを設定するよう指示することも可能です。
00:05:02完了したら、生成されたキーをコピーして使用します。
00:05:04続いてClaude Codeを立ち上げます。
00:05:06そのためには、Claudeがリクエストを送信するURLを変更します。
00:05:09デフォルトではClaude自社のURLを指しているため、ローカルマシンで稼働しているlocalhostに指定を変更します。
00:05:16生成されたキーをAnthropic認証トークンとして貼り付け、モデルを「Kimi K3」に設定します。
00:05:22その後、claudeコマンドを実行すると、Kimiサブスク上でK3を動かすClaude Codeが起動します。
00:05:28なお、これらの設定はそのターミナルセッション内でのみ有効です。
00:05:32永続的な変更ではありません。
00:05:33セッションを閉じて新しいターミナルで実行すれば、従来通り自身のサブスクでClaude Codeを利用できます。
00:05:39スキルの詳細に入る前に、チャンネル登録と高評価ボタンを押していただけると幸いです。
00:05:44皆様の温かいサポートが私たちの大きな励みになります。
00:05:47ランディングページは企業の顔です。
00:05:49チープな質の低いページでは信頼を失い、顧客が離れてしまいます。
00:05:54適切なページを構築するには、モデルが陥りがちな無難なパターンから抜け出させる必要があります。
00:06:00そのために開発されたスキルが数多く存在します。
00:06:02中でも代表的なのが、エージェント向けAI粗悪デザイン防止スキル「Hallmark」です。
00:06:074つの動詞（コマンド）を使って操作します。
00:06:081つ目はデフォルトで、作成したいものを伝えるだけで指示されたワークフローに沿って新しいUIを構築します。
00:06:152つ目は「audit」で、既知のアンチパターンと照合し、不適切なデザインが含まれていないか検証します。
00:06:213つ目は「redesign」で、現在のデザインを棄て、全く異なる方向性で一から作り直します。
00:06:27最後は「study」で、参考サイトを提示するとスタイルを抽出し、その方向性に沿って制作します。
00:06:33ここからが重要なポイントです。
00:06:34Hallmarkなしでサイトを分析させると、エージェントはスタイルをそのまま模倣してしまいます。
00:06:40しかしHallmarkは模倣を防ぎ、サイトを単なるデザインの参考情報として扱います。
00:06:45そのため、オリジナリティのある結果が得られます。
00:06:47また、自身のプロジェクトに活用できる豊富なデザインスタイルのライブラリも付属しています。
00:06:51実際にスタイルを確認したい場合、公式サイトに各スタイルのサンプルページが掲載されています。
00:06:56視覚的に閲覧して確認することが可能です。
00:06:57ドキュメント内の recipe.md ファイルには、プロンプトのベストプラクティスが記載されています。
00:07:02Hallmarkを使用するには、まずインストールが必要です。
00:07:04GitHubリポジトリからインストールコマンドをコピーしてターミナルに貼り付けると、処理が開始されます。
00:07:11対象のエージェントを選択するプロンプトが表示されます。
00:07:13Kimi CodeやCodexをお使いの場合は、デフォルトのまま進めます。
00:07:17設定ファイルを保持する .agents フォルダ内にインストールされます。
00:07:23一方、Claude Code内でKimiを使う場合は、リストからClaude Codeも選択してください。
00:07:28これにより、Claudeの設定が保存される .claude フォルダ内にインストールされます。
00:07:32インストール後、プロジェクトを確認すると、.agents と .claude の両方にスキルが配置されています。
00:07:38skill.md ファイルには、使用方法や呼び出し方、必要な要件がまとめられています。
00:07:44これこそが、他の代替手段よりも優れている理由です。
00:07:46AI特有の粗悪パターンの対策を含む、100以上の参照情報が含まれているためです。
00:07:52出力前に58項目の品質チェックを実行し、デザインの質を確実に保ちます。
00:07:58コンポーネントや先ほど説明したコマンドの参照用データも用意されています。
00:08:02実際のデザインを見る前に、スポンサーからのお知らせです。
00:08:05AIコーディングアシスタントは作業中は優秀ですが、ツールを閉じたり変更すると記憶を失ってしまいます。
00:08:12前日の作業や他エージェントの検証結果を引き継げず、同じ説明を繰り返す無駄が発生します。
00:08:19そこで役立つのが、アシスタントに永続的な記憶を与えるオープンソースの無料拡張機能「Jolly Memory」です。
00:08:24チケット、リンク、会話から設計意図を自動で抽出・保存し、コミットごとに構造化されたドキュメントとして管理します。
00:08:39特定のツールに依存せず、Claude、Gemini、Qwen間を移行しても同期作業なしで記憶が保持されます。
00:08:48VS Code、IntelliJ、Cursor、Claude、Windsurfに対応し、一度の導入でどこでも利用可能です。
00:08:56不具合発生時も変更の経緯をマップ形式で視覚的に追跡・確認できます。
00:09:03固定コメントのリンクからJolly Memoryをぜひお試しください。
00:09:06さて、Kimiは優秀ですが独自のデザインの癖があり、それがスタイルとして表れます。
00:09:13リリース直後のため目立ちにくいですが、次第に明確になっていくでしょう。
00:09:18中国系モデルはClaudeの出力を蒸留学習して開発されることが多いため、Opus 4.8の傾向が強く影響しています。
00:09:29ヒーローセクション背面の画像配置、端に寄せた大文字テキスト、暖色系カラーの多用など、Opusの特徴がKimiにも見られます。
00:09:40ただKimiの良さは、Opusのような誇大広告的なマーケティング文句を多用しない点です。
00:09:46要素の配置に意図が感じられ、他のモデルよりも説得力のあるテキストを生成します。
00:09:51検証のため、Claude Code上でKimiを使い、シンプルなLP制作のプロンプトを実行しました。
00:09:56処理が始まると、まず「プリフライト」という準備段階に入ります。
00:09:59既存のスタイルファイルを分析し、保持すべき要素と変更すべき要素を整理します。
00:10:06今回はNext.jsのテンプレートから開始したため、フレームワークとして固定し他を削除しました。
00:10:11次に「ターゲット層」「利用目的」「トーン＆マナー」の3点を質問してきます。
00:10:18プロンプトに事前含めるのが理想ですが、省略しても自動で質問されるため必須ではありません。
00:10:25回答を入力すると、参照データからテーマ等を読み込んでサイトを生成します。
00:10:30完成時には、58項目の品質基準をクリアしているか自動検証します。
00:10:34Hallmarkは動詞で指示するため、全変更を指示すると結果が大きく変わります。
00:10:39「redesign」を認識すると専用手順を読み込み、再度ヒアリングを行った上で、一から異なるアプローチで構築します。
00:10:49また「audit」モードでは、AI特有の粗悪パターンがないか検証できます。
00:10:53監査を実行すると、パターンに基づいたレポートが出力され、問題箇所が指摘されます。
00:11:00開発者はそのレポートを確認し、適用する修正を選択します。
00:11:02なお、KimiとClaude Codeを組み合わせる際は、自動圧縮が機能しないためコンテキスト管理に注意が必要です。
00:11:09容量の上限に達しても処理自体は停止しません。
00:11:12しかし、満杯になると指示からの逸脱や回答の質の低下が見られるようになります。
00:11:18監査後、Kimiは指摘された複数の修正箇所を自動で修正しました。
00:11:22安っぽいAI感を与えていたフォントが変更されました。
00:11:25画像もUnsplashからPixumへ変更されました。Unsplashは多用されがちなためです。
00:11:32モバイルレスポンシブも改善され、全体の完成度が向上しました。
00:11:36納得がいくまで、繰り返し改善を指示することが可能です。
00:11:39KimiとClaude Codeでスキルを使う際のアドバイスがあります。
00:11:42Kimiは標準モデルではないため、自動呼び出しが正しく動作しない場合があります。
00:11:47自動起動の仕組みがClaude自社モデル向けに最適化されているためです。
00:11:51スラッシュコマンドを使い、手動でスキルを確実に読み込んでから生成を始めるのが確実です。
00:11:57また、Claude CodeのOpus 4.8モデルでも、スキルありとスキルなしの同様のテストを行いました。
00:12:03スキルなしで実行したところ、通常の手順でアプリが構築されました。
00:12:06約6分で完成しましたが、典型的な「AIっぽさ」の目立つデザインでした。
00:12:10配色、グラデーション背景、角丸要素など、随所にOpusらしさが現れていました。
00:12:16当システムには、Opusの傾向を含むパターンを検出する検知機能があります。
00:12:20既知の不自然なパターンを検出できるように学習されています。
00:12:24これを実行したところ、多数の懸念点が検出されました。
00:12:30特にグラデーション文字などが問題点として指摘されました。
00:12:32次にHallmarkを実行しました。
00:12:33スキルを読み込み、準備、分析、ヒアリングを経て一連の処理が再実行されました。
00:12:39スキルなしの場合より時間はかかりましたが、見合う結果が得られました。
00:12:43最終デザインは創造的で洗練された仕上がりになりました。
00:12:46ボタンのインタラクションも改善され、プロダクトの理解が深まったことが伺えます。
00:12:51プレースホルダー画像の安易な挿入も防がれています。
00:12:58安易な素材画像に頼らず、独自の画像を準備するよう促す仕様になっています。
00:13:04全体としてKimiより高品質なデザインが生成されたため、現時点ではClaudeとの組み合わせが効果的です。
00:13:10Kimiの固有パターンへの最適化は途上ですが、他モデルのパターン検出には有効です。
00:13:15検証全体を通じて、このスキルは極めて有効に機能しました。
00:13:18今回紹介したデザインシステムや各種リソースは、
00:13:23運営コミュニティ「AI Labs Pro」にて提供しています。
00:13:26活動をサポートいただける方は、ぜひご参加をご検討ください。
00:13:31リンクは概要欄にあります。
00:13:33Codexをお使いの方なら、標準配色が緑と白の組み合わせであることをご存じでしょう。
00:13:38Opusがオレンジ、クリーム、茶色を多用するのと同様です。
00:13:42これらがデフォルトスタイルとして選択される傾向があります。
00:13:45また、SVGを多用し、画面に対して小さめのフォントサイズを選択する傾向もあります。
00:13:51仕上がりは悪くありませんが、固有のパターンは回避できません。
00:13:56そこで .agents にスキルを配置した状態のCodexで、指示プロンプトを入力してテストしました。
00:14:03ブラウジング機能等を備えたCodexアプリを使用しています。
00:14:09事前確認が実行され、ターゲット、用途、トーンについて質問されました。
00:14:14回答後、ファイル編集、テスト、実機テストを含む一連の処理が実行されました。
00:14:21ブラウザ機能を活かした検証が効果的に機能していました。
00:14:26完成したサイトの見た目は大幅に向上していました。
00:14:29青と白の配色にややAI感は残るものの、技術系サイトに適した意図的なデザインとして成立しています。
00:14:39構成要素はデフォルトのCodexの出力結果とは異なっていました。
00:14:43ヒーローセクションの表示等に一部微修正が必要な箇所もありましたが、後から容易に調整可能です。
00:14:52Hallmarkの監査を実行し、レポートを出力させました。
00:14:54全体構造は良好で、レスポンシブ対応など軽微な修正点の指摘にとどまりました。
00:15:02以上で今回の動画は終了です。
00:15:03動画制作を支援いただける方は、Super Thanksボタンよりご協力をお願いいたします。
00:15:10ご視聴ありがとうございました。また次回の動画でお会いしましょう。