デザインをそのままコード化｜Google Stitch拡張が急伸

AI TREND

Google Labs：技能集を公開

Google Labs が、AI画面デザインツール Stitch 向けの機能拡張集「stitch-skills」を GitHub で公開した。共通仕様「Agent Skills」に準拠し、Claude Code・Cursor・Gemini CLI などのAIコーディングツールから、デザインとコードの相互変換を直接呼び出せる。

3 の要点を3分で

Google Labs が、AI画面デザインツール Stitch 向けの機能拡張集 stitch-skills を GitHub で公開した。共通仕様 Agent Skills に準拠し、Claude Code・Cursor・Gemini CLI・Antigravity など複数のAIコーディングツールから、デザインとコードの相互変換を直接呼び出せる。GitHub trending では +156★/日、累計 7,570★ と短期間で急伸している。

構成は設計（stitch-design）・構築（stitch-build）・補助（stitch-utilities）の3プラグイン群で、フロントエンドコードからのデザイン抽出や React / React Native への変換技能を含む。Stitch は Google I/O 2025 で公開後、Gemini 3 対応、リアルタイム設計、デザイン仕様形式 DESIGN.md の公開と拡張を重ねてきた。

ただし利用には Stitch の連携サーバー（MCP）設定が必要で、Google の公式サポート対象製品ではない。本番運用に組み込む前に、サポート範囲と技術スタック適合性を切り分ける必要がある。

デザインをそのままコード化｜Google Stitch拡張が急伸の本文内説明図 — 図解: AIエージェント - GoogleLabsがAI画面デザインツールStitch向け拡張集

押さえるポイント

この変化で何が要点か。図解と出典つきで一目で。

普段のAIコーディングツール内でデザイン→コード変換が完結する
設計・構築・補助の3プラグイン群で構成される拡張集
共通仕様Agent Skills準拠でツールを乗り換えても使い回せる

5W1Hでサクッと理解

構造化された事実を最初に。誰が何をいつどこでなぜどのように。

誰が: Google Labs
何を: 技能集を公開
いつ: 2026年7月
どこで: GitHub
なぜ: 設計実装を連携
どのように: Agent Skills準拠

背景

Stitch は Google Labs が提供する、文章や画像からアプリの画面デザインを生成するツールで、Google I/O 2025 で紹介された。その後、最新モデル Gemini 3 への対応や、リアルタイム設計、デザイン仕様を記す「DESIGN.md」形式の公開など段階的に機能が拡張されてきた。今回の stitch-skills は、こうした Stitch の機能を各種 AI コーディング支援ツールから直接呼び出せるようにする拡張パッケージである。公式発表によると Agent Skills は Google の小型モデル Gemma 4 で動く最初の応用の 1 つで、複数段階の自律的な作業を端末上（オンデバイス）で実行できるとされる。

なぜ今注目なのか

デザインからコードへの変換を、普段使っている AI コーディングツールの中で完結できる点が実務的に大きい。React やReact Native への変換、既存フロントエンドコードからのデザイン抽出、デザイン仕様の生成まで一連の流れを自動化できるため、設計と実装の往復コストを下げられる。共通仕様に沿っているため、特定ツールに縛られず導入しやすい。

設計ツールStitchの技能が普段のAIエディタに入ってきた

Google Labs が、AI画面デザインツール Stitch 向けの拡張集「stitch-skills」を GitHub で公開した。中身は各種AIコーディングツール（エージェント）に技能を足す共通仕様「Agent Skills」に沿った技能のライブラリで、Stitch の連携サーバー（MCP＝AIツールが外部機能を呼び出す仕組み）と組み合わせて動く。

A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.
出典: stitch-skills（GitHub）

引用の要点は、この技能集が Antigravity・Gemini CLI・Claude Code・Cursor といった複数のAIコーディングツールで共通して使えるように、オープン標準に合わせて作られているということだ。構成は設計を担う stitch-design、構築を担う stitch-build、補助的な stitch-utilities の3つのプラグイン群で、フロントエンドのコードからデザインを抽出したり、React / React Native へ変換したりする技能を含む。累計7,570★、直近は+156★/日のペースで伸びている。

設計と実装の往復コストがなぜ下がるのか

従来、画面デザインから実装コードへ移す作業は、設計ツールとエディタを行き来しながら手で写す工程が残っていた。stitch-skills はこの変換技能をAIコーディングツール側に持ち込むため、デザイン仕様の生成、既存フロントエンドコードからのデザイン抽出、React / React Native への変換までを同じ環境で呼び出せる。

Stitch は Google I/O 2025 で公開されて以降、最新モデル Gemini 3 への対応、リアルタイム設計、デザイン仕様を記す「DESIGN.md」形式の公開と、段階的に機能を広げてきた。今回の技能集は、こうした Stitch の機能を Stitch のUIの外から、開発者が普段開いているエディタで直接使えるようにする位置づけになる。

Stitch's DESIGN.md format is now open-source so you can use it across platforms.
出典: Stitch's DESIGN.md format is now open-source

引用は、デザイン仕様を記す DESIGN.md という形式が公開され、複数のプラットフォームをまたいで使えるようになったことを示す。技能定義も仕様も特定ツールに閉じないため、エディタを乗り換えても同じ資産を持ち運べる。

誰が得をし、どこに注意が要るか

得をするのは、Claude Code・Cursor・Gemini CLI を日常的に使う開発者だ。デザイン抽出やReact変換を、いつものエディタの中から呼び出せる。Agent Skills という共通仕様に沿うため、ツールを乗り換えても技能定義を持ち運べる点も効く。

国内の受託・自社開発のフロントエンド現場も対象になる。デザイン仕様の生成から実装までを1環境に寄せられるので、設計と実装の往復にかかる工数を削れる。

一方で注意が要るのは、本番運用で公式サポートを前提にする組織だ。stitch-skills は Google の公式サポート対象製品ではなく、利用には Stitch の連携サーバー（MCP）の設定が必要になる。障害時の保証や問い合わせ窓口を前提に据えられないため、業務クリティカルな工程に組み込む前に切り分けが要る。