最新記事
Google Stitch のチュートリアル、事例、最新情報
Google Stitch + OpenCode 実践：Skills の手動インストールと MCP 設定
OpenCode ユーザー向けの Stitch Skills 手動インストールガイド。スキルフォルダーのコピー、命名の落とし穴（stitch:: プレフィックスと kebab-case 検証）、opencode.json への Stitch MCP 登録、Claude Code / Cursor との比較を解説します。
Google Stitch vs Banani：一言でマルチスクリーン生成か、Google のネイティブキャンバスか？
Banani は1つのプロンプトから複数画面のインタラクティブ UI を生成し、インタラクションからの後続状態の生成、デザイントークンの調整、Figma / HTML / CSS へのエクスポートに対応。Stitch はより完成度の高い AI ネイティブキャンバス、音声によるイテレーション、Google ツールチェーンとの連携を提供します。マルチスクリーンを素早く発散させるなら Banani、キャンバスで深くイテレーションするなら Stitch。
Google Stitch vs Flowstep：IDE 内の AI デザインキャンバスか、Google のクラウドキャンバスか？
Flowstep は AI デザインキャンバスを開発ワークフローに組み込みます。MCP で Cursor や Claude Code などから直接画面を生成・編集でき、⌘⇧C で Figma にコピー、スタイルガイドは一度設定すれば全体に反映されます。Stitch は誰でも使えるクラウドキャンバスで、Google エコシステムとの連携がスムーズ。開発者のワークフローなら Flowstep、汎用的な探索なら Stitch。
人気のチュートリアル
入門から上級まで、Stitch プロンプトを体系的に習得
Stitch Prompt
スタイルライブラリの実際のプロンプトテンプレート。コピーしてすぐ使えます
Design a Linear-inspired interface. - Dark-mode-native: #08090a marketing background, #0f1011 panel background, #191a1b elevated surfaces; - Inter Variable with "cv01", "ss03" globally — geometric alternates for a cleaner aesthetic; - Signature weight 510 (between regular and medium) for most UI text; - Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px); - Brand indigo-violet: #5e6ad2 (bg) / #7170ff (accent) / #828fff (hover) — the only chromatic color in the system. Colors: #010102, #08090a, #0f1011, #191a1b with #010102 accent. Typography: (.
Design a Notion-inspired interface. - NotionInter (modified Inter) with negative letter-spacing at display sizes (-2.125px at 64px); - Warm neutral palette: grays carry yellow-brown undertones (#f6f5f4 warm white, #31302e warm dark); - Near-black text via rgba(0,0,0,0.95) -- not pure black, creating micro-warmth; - Ultra-thin borders: 1px solid rgba(0,0,0,0.1) throughout -- whisper-weight division; - Multi-layer shadow stacks with sub-0.05 opacity for barely-there depth. Colors: #000000f2, #ffffff, #0075de, #213183 with #0075de accent. Typography: NotionInter.
Design a Mintlify-inspired interface. - Inter with tight negative tracking at display sizes (-0.8px to -1.28px) — compressed yet readable; - Geist Mono for code labels: uppercase, 12px, tracked-out, the terminal voice; - Brand green (#18E299) used sparingly — CTAs, hover states, focus rings, and accent touches; - Atmospheric gradient hero with cloud-like green-white wash; - Ultra-round corners: 16px for containers, 24px for featured cards, full-round (9999px) for buttons and pills. Colors: #0d0d0d, #ffffff, #18E299, #d4fae8 with #18E299 accent. Typography: Inter.