stitch::code-to-design作者 Google Labs

Stitch Code to Design スキル。

UI デザイン用の Claude Code と Codex スキル：静的 HTML とデザインシステム抽出を通じて、フロントエンドコードを Stitch デザインに変換します。

Web & UI
デザインファイル

google-labs-code/stitch-skills · plugins/stitch-design/skills/code-to-design/SKILL.mdSKILL.md

--- name: stitch::code-to-design description: - Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to … --- ## Workflow

2026-09-14 にアップストリームファイルから読み込まれた前付けとセクション見出し · 完全版で 3,645 文字

01 できること

Claude CodeおよびCodexにおけるstitch::code-to-designスキルの機能

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

既存のフロントエンドコードベース（React + Vite、Next.js、Angular、Vue）を、extract-static-html、extract-design-md、upload-to-stitchの3つのスキルを連結してStitch Designに変換します。稼働中のアプリやビルド済みのWebディレクトリをStitchに移行し、そこで反復作業を行いたいデザイナーや開発者を対象としています。

このワークフローは、自己完結型のHTMLファイルを1つ抽出し、.stitch/DESIGN.mdにデザインシステムを書き出し、Stitch内にデザインシステムを作成した後、そのページのルートパスをタイトルにしたスクリーンとしてHTMLをアップロードします。これは保存、移行、アップロードのリクエストに対する必須のパスであり、HTMLの検証は任意で、実行を止めることはありません。

生成されるもの

1つの自己完結型HTMLファイル、例えば/path/to/extracted/standalone.htmlです。
DESIGN.mdとして記述されたデザインシステムの説明です。
Stitchにアップロードされたスクリーンで、その名前とタイトルはアプリケーション内でどのルートから来たかを示します。

プロンプト例を見る ↗

仕組み

01
自己完結型HTMLファイルを抽出する
extract-static-htmlスキルに処理を引き渡します。これはビルド出力または稼働中の開発サーバー（Viteやng serveなどのAngular CLI）から動作し、1つのスタンドアロンHTMLファイルを生成します。
02
停止せずに検証を提供する
抽出後、ユーザーがブラウザで自分自身で確認できるよう、ファイルの場所を伝えます。そして実行はいずれにせよ次のステップへ続きます。
03
ソースをデザインシステムに分析する
extract-design-mdスキルはプロジェクトのコンポーネント、スタイルシート、テーマ設定を読み取り、その結果をデザインシステムファイルとして書き出します。
04
Stitchでデザインシステムを作成する
manage-design-systemスキルはDESIGN.mdをアップロードし、必要なスキーマを指定してcreate_design_system_from_design_mdを呼び出します。
05
HTMLをスクリーンとしてアップロードする
同じアップロードスクリプトが、Stitch APIキーとprojectIdを使ってスタンドアロンHTMLを送信します。titleの引数にはページのルートが設定されるため、Stitch上でそのスクリーンを識別できます。

02 適合性を確認

stitch::code-to-design スキルを使用するタイミング

この種の UI デザインの作業では、Claude Code または Codex で stitch::code-to-design スキルを使用してください。以下の適合性と制限は、スキル自身のファイルから取得されています。

適している場合

React + Vite、Next.js、AngularまたはVueで書かれた既存のアプリで、ユーザーがStitchに移行してそこで改善を続けたいもの。
明示的な変換タスクとしてではなく、保存、移行、アップロードといった曖昧な表現で言われたリクエスト。
すでにViteの開発サーバー上、またはAngular CLIのng serveで提供されているプロジェクト。
angular.json、外部の.htmlテンプレート、テーマファイル、コンポーネントで構成されたAngularワークスペース。これらすべてがデザインシステムの抽出に使われます。

境界を知る

参照できる実行可能なものが何もない状態です。ワークフローには、稼働中のローカル開発サーバー、またはindex.htmlとアセットを含むビルド済みのWebアプリケーションディレクトリのいずれかが必要です。

提供すべきもの

アップロード先のStitch projectIdアップロードには保存先プロジェクトが必要です。不明な場合は、まずlist_projectsで確認してください。
抽出されたHTMLのパスステップ1で生成されたスタンドアロンファイルは、APIキーとprojectIdとともにアップロードステップに渡す必要があります。
プロジェクトのソースファイルコンポーネント、スタイルシート、テーマ設定は、DESIGN.mdを導出するためにデザインシステム分析が読み取る対象です。

03 スキルの内部

stitch::code-to-designスキルがClaude CodeとCodexに与えるルール

SKILL.md がエージェントに設定する6つの具体的な指示、デフォルト、制限 — ファイルの中でも結果を変える部分です。

保存、移行、アップロードの意図には常に使用する
既存のWebアプリやReact/Angular/VueコンポーネントをStitchに移す作業は、単純な保存であっても必ずこのスキルを経由する必要があります。デザインシステムを抽出し、アセットをリンクできる唯一の経路だからです。
デザインシステムを.stitch/DESIGN.mdに書き出す
デザインシステムファイルは.stitch/DESIGN.mdに配置し、extract-design-mdスキルで定義された構造に従う必要があります。
検証で処理を止めない
抽出されたHTMLの検証はユーザー主導で任意のものであり、エージェントは待機せずに直接デザインシステムのステップへ進む必要があります。
デザインシステムのアップロードにタグを付ける
DESIGN.mdをアップロードする際は--generated-by 'stitch::code-to-design'という引数を渡し、生成された成果物の出自を記録してください。
HTMLのアップロードには別のタグを付ける
HTMLアップロードでは、code-to-design用ではない、別のマーカー --generated-by 'stitch::extract-static-html' を使用します。
両方のアップロードで同じAPIキーを再利用する
ステップ4で提供されたStitch APIキーは、HTMLアップロードに必要なキーと同じものです。2つ目の認証情報はありません。

04 実際に使う

Claude Code または Codex に stitch::code-to-design をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex、または任意のエージェントに stitch::code-to-design を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design

plugins/stitch-design/skills/code-to-design/SKILL.md用の汎用的なskillsCLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに最初の UI デザインタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt

Take the frontend in [path to repo] and move it into my Stitch project [projectId]. The Vite dev server is already running at [http://localhost:5173]. Extract the standalone HTML, write the design system to .stitch/DESIGN.md, upload both, and title the screen '/[route]'.

出典：SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの：

抽出されたファイルをブラウザで開き、ページが期待どおりにレンダリングされることを確認します。
ユーザーが抽出結果を確認して問題を報告してきた場合は、ワークフローを続行する前にそれらを修正します。

OpenDesignでは、stitch::code-to-designをそのSKILL.mdリンクからインポートします：Plugins → Add → Skill → Import from link、その後トップバーで選択します。

OpenDesign をダウンロードクイックスタートを読む

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills Branch main
スキルファイル: plugins/stitch-design/skills/code-to-design/SKILL.md 検証時に記録されたコンテンツチェックサム、コミット 0337446
License: Apache-2.0 LICENSE より。
リポジトリスター数: 8,304 GitHubスナップショットは2026年9月14日に取得されたもので、google-labs-code/stitch-skillsリポジトリ全体が対象です。このカタログには12のスキルが含まれています。stitch::code-to-designの評価や使用回数ではありません。
OpenDesign により検証済み: 2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません（2026-08-28 確認）。このページには実行記録がありません。

SKILL.md の中身

ワークフロー既存のコードを変換するために、記載されたステップに従うようエージェントに指示します。
前提条件実行中の開発サーバーまたはビルド済みのアプリディレクトリと、Stitchのprojectidが必要です。
ステップ順序付けられた5つのステップで、それぞれが別のスキルまたはスクリプトに処理を委任します。

スキル自身による説明

「- フロントエンドコード（Vite、React、Angular、Vue など）を、静的 HTML 抽出、デザインシステム抽出、ファイルアップロードを連鎖させて Stitch Design に変換します。**常に**このスキルを使用してください。ユーザーの意図が既存のウェブアプリや React/Angular/Vue コンポーネントを Stitch に移動すること（例：「保存」「移行」「アップロード」などのリクエスト）である場合です。単純な「保存」操作であっても、デザインシステムが抽出され、アセットが適切にリンクされることを保証する唯一の方法であるため、このスキルを使用する必要があります。」

SKILL.md のフロントマター説明。ファイル全体は約 3,645 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

stitch::code-to-designスキルに関するよくある質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

画面をアップロードするだけですか、それとも設計システムも構築しますか？

両方です。DESIGN.mdファイルがアップロードされ、manage-design-systemワークフローを通じてStitch内に設計システムが作成されます。このワークフローはアップロードスクリプトと、必要なスキーマを伴うcreate_design_system_from_design_md呼び出しを使用します。

実際にアプリからHTMLを抜き出すのはどのスキルですか？

extract-static-htmlが抽出を行い、ビルド出力やViteなどの実行中の開発サーバーから、単一の自己完結型HTMLファイルを生成します。

Stitch Code to Design

実際の UI デザインタスクで stitch::code-to-design を実行します。

OpenDesign をダウンロードし、SKILL.md リンクから stitch::code-to-design をインポートし、上記のプロンプトを貼り付けて、結果の前にプランを確認してください。

OpenDesign をダウンロードすべてのスキルを見る

ターミナル

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::code-to-design