AIエージェントにウェブサイト構築とReactコンポーネント作成を教える方法

最近、ふと思った：ニューラルネットワークがコードを書くことに我们已经习惯了，但这个过程仍然看起来像是在聊天中来回传递文本块。你复制一个提示，得到一堆コード、貼り付けると>importの付け忘れやスタイルの崩れに気づく...おなじみのroutine?

Google Labsのメンバーも同じことに飽きたようで、stitch-skillsをリリースしました。これはまた別の「プログラマー不要論」ではなく、MCP（Model Context Protocol）で動作するAIエージェント向けの具体的なスキルのセットです。簡単に説明すると、ClaudeやCursor、 Geminiがテキスト生成だけでなく、プロジェクト構造を意識的に操作したり、デザインシステムに従ったり、さらには1文から完全なウェブサイトを構築したりするための指示とツールです。

そもそも这是什么

このプロジェクトは、ビジュアルデザインとインターフェース生成のためのサーバーであるStitchでの作業に特化したスキルライブラリです。ここで重要なのは標準化です。リポジトリ内の各スキルは統一されたテンプレートに従ってパッケージ化されています：エージェント用のマニフェスト（SKILL.md）、バリデーションスクリプト、そして「ゴールデンスタンダード」の例があります。

これが必要な理由は、エージェントが何をすべきか推測するのではなく、明確なアルゴリズムに従うためです。例えば、スケッチをReactコンポーネントに変換するよう依頼すると、エージェントはスキルreact-componentsを使用し、構文チェックの方法やデザイントークンを失わないようにするゲームのルールを知っています。

практическая польза

現在のリポジトリには、約12個の готовыхスキルがあります。 демоで派手に見えるだけでなく、実際には時間を節約できるものを中心に選びました。

stitch-loopによるフルサイト生成

「ランディングページを作成して」と依頼して1つのファイルindex.htmlを受け取る代わりに、このスキルはエージェントに本格的な構造をデプロイさせます。必要なページを自分で作成し、ファイルを整理し、すべてが実際に開くかどうかを確認します。本質的には、プロトタイプビルドの自動化です。

enhance-promptで想法を磨く

ニューラルネットワークが貧弱な結果を出す原因是、プロンプトが「きれいにしてください」のようなものだったことが多いです。スキルenhance-promptはあなたの断片的なアイデアを取り、UI/UXの用語とデザインシステムのコンテキストを含むspecに変換します。開発者に送信する前に、経験豊富なリードがタスクを校正してくれるようなものです。

design-mdによるドキュメント作成

私の「お気に入りの」仕事の部分—ボタンがなぜその色で、スペーシングがどのように機能するかの説明。スキルdesign-mdはプロジェクトを分析し、DESIGN.mdファイルを自分で生成します。単なるスタイルリストではなく、同じAIエージェントが新しい画面をより正確に生成するのに役立つ人間の言葉でデザインシステムを記述したものです。

Reactとshadcn/uiへの変換

プロトタイプで遊んだことがあり、本番環境にプッシュしたい人向けには、スキルreact-componentsとshadcn-uiがあります。これらはデザインをコードに変換する際にコンポーネントロジックが失われず、正しいライブラリが使用されるようにします。

内部動作

任意のスキルフォルダの中を覗くと、厳格な構造が見つかります。Google Labsの人々は明らかに予測可能性の支持者です：

• SKILL.md: 本質的には、エージェントのタスクを説明するシステムプロンプト。
• scripts/: 結果をバリデーションするための実行可能ファイル。エージェントがコードを台無しにした場合、スクリプトがそれを伝えます。
• examples/: リファレンス例。モデルはこの例から学習し（few-shot learning）、期待される結果を理解します。

CLI経由でのスキルのインストールはできるだけシンプルにされています：

npx skills add google-labs-code/stitch-skills --skill react:components --global

このコマンド自体が、インストールされているツール（CursorやClaude Codeなど）を検出し、新しい機能を追加します。

試してみる価値はあるか

このプロジェクトは特殊です。AI支援なしで従来の方法でplain Vimでコードを書いているなら、これはあなたには役立たないでしょう。しかし、Cursorに日常の一部をすでに移しているか、MCPサーバーを使用しているなら、stitch-skillsはニューラルネットワークとの作業を構造化する方法の優れた例です。

これは特にフロントエンド開発者やMVPを急速に構築している人々にアピールするでしょう。抽象的なスケッチを、数分でドキュメントとReactコンポーネントを含む構造化されたプロジェクトに変換できる能力は、私たちが迟早たどり着くところです。

欠点としては、ドキュメントがところどころ稀疏しく、プロジェクトはGoogleの商用製品として正式にサポートされていません（Google Labsの実験です）。しかし、独自のスキルを作成するための基盤や、現在の開発作業を加速させるためには、非常に価値のあるオプションです。

利用可能なすべてのスキルを確認し、仕様を読むには、プロジェクトリポジトリをチェックしてください。