Google Labs Code

Stitchの画面デザインを、ReactとViteのダッシュボードへ変換するスキル。デザイン設定を反映し、データ取得やキーボード操作にも配慮して実装します。

• Stitchの画面をReactで実装したいとき
• DESIGN.mdの設定を反映したいとき
• データ取得と読み込み表示を加えたいとき

shadcn/uiの部品選びから導入、テーマ調整まで支援するスキル。フォームやダッシュボードを組み立て、操作性を保ちながら見た目や動作をカスタマイズします。

• 既存ReactアプリにUI部品を追加したいとき
• テーマや部品の種類を調整したいとき
• フォームや管理画面を組み立てたいとき

既存のフロントエンドコードから配色・書体・余白・部品の見た目を読み取り、DESIGN.mdに整理します。アプリを起動せず、Stitch向けの設計資料を作れます。

• 既存アプリのデザインを文書化したいとき
• 起動できないアプリの見た目を調べたいとき
• 既存のデザインをStitchへ移したいとき

文章や画像をもとにStitchで画面デザインを作り、既存画面の修正や別案の生成まで進めるスキル。依頼内容を具体化し、HTMLとスクリーンショットも保存します。

• 文章から画面デザインを作りたいとき
• モックアップ画像を画面化したいとき
• 既存画面を部分修正したいとき

曖昧な画面のアイデアを、構成・配色・部品の指定が伝わるStitch向けの指示文に整えます。既存の設計ルールも反映し、新規画面や部分修正の依頼を具体化します。

• 曖昧な画面案を指示文にしたいとき
• 生成結果を受けて依頼文を見直したいとき
• 既存の設計ルールを画面依頼に反映

サイトの要件や既存コンテンツを整理し、開発の共通方針となるSITE.mdを作るスキル。目的、見た目、ページ構成、優先タスクをまとめ、継続的な制作に備えます。

• 制作前にサイト要件を整理したいとき
• 目的や見た目の方針を記録したいとき
• 完成済みと予定のページを一覧にしたいとき

Google Stitchで画面を生成するためのDESIGN.mdを作成します。配色・書体・非対称の配置・動きに具体的なルールを設け、画面間の見た目を揃えます。

• Stitchの画面生成ルールを揃えたいとき
• 非対称のページ配置を設計したいとき
• 書体・配色・操作時の動きを文書化したいとき

Webアプリの表示状態を、CSSや画像を埋め込んだ静的HTMLとして保存します。画面の共有やStitchへの取り込み用に、特定のページや操作後の見た目を取り出せます。

• ページを静的HTMLで共有したいとき
• Stitchへの取り込み素材の準備
• クリックやフォーム入力後の画面保存

Stitchの画面デザインを、再利用しやすいReactコンポーネントへ変換します。既存画面の更新にも対応し、配色やフォント、画面間の移動も整えます。

• StitchのデザインをReact化したいとき
• デザイン変更を既存画面へ反映したいとき
• 共通UIを再利用できる部品に整理

StitchのHTMLデザインをReact Nativeの画面や部品へ変換し、既存画面の更新にも対応します。配色や余白を共通化し、StyleSheetで実装します。

• Stitchの画面をReact Native化したいとき
• 既存部品を最新デザインへ更新したいとき
• 配色・書体・余白を共通化したいとき

Stitchのアプリ画面をつなぎ、Remotionで紹介動画を作成します。画面切り替えやズーム、説明テキストを加え、機能や利用の流れを動画で示せます。

• Stitchの画面でアプリ紹介動画を作りたいとき
• 利用者の操作の流れを画面順に説明
• ズームと注釈による機能紹介

既存のWebアプリやコンポーネントから単体のHTMLと配色・書体などの設計ルールを抽出し、Stitchでデザインを見直せる形に移すスキル。

• 既存のWebアプリをStitchに移したいとき
• ReactやVueの画面を見直したいとき
• 画面と設計ルールを一緒に抽出

Stitchの配色・書体・角丸などの共通ルールを作成・更新し、既存画面に適用します。設計書とプロジェクト情報も管理し、複数画面の見た目をそろえるスキル。

• 既存の複数画面に共通ルールを適用
• テーマの説明を具体的な設計値にしたいとき
• Stitchの設計ルールを作成・更新

ローカルの画像やHTML、Markdownの設計資料をStitchへアップロードします。付属スクリプトで、MCP経由の転送時に起きる文字量制限を回避します。

• モックアップ画像をStitchへ送りたいとき
• 抽出したHTMLをStitchへ追加したいとき
• Markdownの設計資料を送りたいとき

Stitchでページを生成し、既存サイトへ組み込んで次の作業指示を残します。共通のデザイン方針と制作計画を参照しながら、複数ページのサイト制作を繰り返し進めるスキル。

• 複数ページのサイトを段階的に作りたいとき
• 共通デザインに沿ったページ追加
• 制作計画に沿ってサイトを拡張したいとき

Stitchの既存画面を分析し、配色・書体・部品・余白のルールをDESIGN.mdにまとめます。新しい画面を依頼する際に、既存の見た目を伝えるための設計書を作るスキル。

• 既存画面から設計ルールを文書化
• 新規画面の依頼用に設計書を作りたいとき
• 色コードと色の用途を整理