google-labs-code/stitch-skills

What it solves

このプロジェクトは、AI コーディング・エージェントが Google Stitch と統合できるようにするための、一組の特化された技能 (Agent Skills) とプラグインを提供します。エージェントがデザインを生成し、既存のコードをデザインに変換し、さらにそれらのデザインをプロダクション・レディなフロントエンド・コンポーネント (React や React

How it works

Agent Skills オープン・スタンダードを実装しています。Codex, Claude Code, Cursor, および OpenCode などの AI エージェントがロード可能なしる構造化された指示、スクリプト、およびリソースを提供します。これらの技能は Stitch MCP (Model Context Protocol) サーバーと通信し、Web アプリから HTML を抽出したり、DESIGN.md ファイルを介してデザイン・システムを管理したり、UI コンポーネントの自動作成を行ったりします。

Who it's for

Google Stitch での UI デザインとフロントエンド実装のワークフローを自動化したい、AI コーディング・エージェントを使用している開発者およびデザイナー。

Highlights

• Design Automation: テキスト/画像から新しい画面を生成、またはフロントエンド・コードをデザインに Stitch 変換します。
• Code Generation: Stitch デザインを React, React Native, または React + Vite ダッシュボードに変換します。
• Design System Management: DESIGN.md ファイルを使用して、デザイン・トークンとテーマを抽出・適用します。
• Multi-Agent Compatibility: Codex, Claude Code, Cursor, および OpenCode を含む、さまざまなコーディング・エージェントと互換性があります。
• Visual Walkthroughs: Remotion を使用してプロジェクトのデ possible 可能な walkthrough-video を生成する技能が含まれています。