create-design スキルは、Google Stitch 対応の DESIGN.md テンプレートを 50種類 提供します。プロジェクトの特性に合ったテンプレートを選ぶことで、デザイン仕様の策定時間を大幅に短縮できます。
各テンプレートは9セクション完備の完全なデザインシステム文書です。カラーパレット、タイポグラフィ、コンポーネント、レイアウト、レスポンシブ設計まで全て含まれています。
高密度の情報表示やプロフェッショナルツールに最適なダークテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
DARK_THEME.md | SaaS・開発者ツール・管理画面 | Linear / Supabase | 解説 |
SAAS_DASHBOARD.md | データ密度の高い管理画面 | Stripe / Datadog | 解説 |
FINTECH.md | 金融・フィンテック・資産管理 | Wise / Robinhood | 解説 |
CYBERPUNK.md | SF・サイバーパンク・HUD風 | Blade Runner / CP2077 | 解説 |
清潔感・信頼感・読みやすさを重視したライトテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
MINIMAL_LIGHT.md | ミニマルWebアプリ・ツール | Vercel / Notion | 解説 |
HEALTHCARE.md | 医療・ヘルスケア | WCAG AAA準拠 | 解説 |
NEWS_MEDIA.md | ニュース・メディア・ブログ | NYT / Medium | 解説 |
CORPORATE.md | コーポレート・企業サイト | IBM / Microsoft | 解説 |
没入感・ビジュアルインパクトを重視したエンターテインメント向け。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
GAMING_APP.md | ゲーム・カードゲーム | Sentry / Spotify | 解説 |
MUSIC_STREAMING.md | 音楽・ストリーミング | Spotify / Apple Music | 解説 |
PORTFOLIO.md | ポートフォリオ・個人サイト | Apple / Awwwards | 解説 |
SOCIAL_MEDIA.md | SNS・コミュニティ・チャット | Discord / Twitter | 解説 |
STREAMING_VIDEO.md | 動画配信・VODサービス | Netflix / Disney+ | 解説 |
PODCAST.md | ポッドキャスト・音声配信 | Pocket Casts / Overcast | 解説 |
MUSIC_ARTIST.md | アーティスト公式・ファンサイト | Beyonce / Travis Scott | 解説 |
ANIME_MANGA.md | アニメ・漫画・サブカル | Crunchyroll / MyAnimeList | 解説 |
消費者向けサービス・プラットフォームに最適化されたテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
ECOMMERCE.md | ECサイト・ショッピング | Shopify / Nike | 解説 |
TRAVEL.md | 旅行・予約サービス | Airbnb / Booking | 解説 |
FOOD_DELIVERY.md | フード・デリバリー | UberEats / DoorDash | 解説 |
EDUCATION.md | 教育・LMS・オンライン学習 | Duolingo / Coursera | 解説 |
RESTAURANT_CAFE.md | レストラン・カフェ・飲食店 | TableCheck / OpenTable | 解説 |
REAL_ESTATE.md | 不動産・物件検索 | Suumo / Zillow | 解説 |
WEDDING_EVENT.md | ウェディング・イベント | Zola / The Knot | 解説 |
FITNESS_WELLNESS.md | フィットネス・ヘルスケア | Peloton / Nike Training | 解説 |
ハイエンドブランド・プロダクトに最適化されたプレミアムテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
APPLE_PRODUCT.md | プロダクト紹介・ランディング | Apple.com / Product Page | 解説 |
APPLE_HIG.md | iOSアプリ・Apple準拠UI | Apple HIG / SF Symbols | 解説 |
LUXURY_FASHION.md | ハイブランド・ファッション | Gucci / Louis Vuitton | 解説 |
BEAUTY_COSMETICS.md | ビューティ・コスメ・スキンケア | Glossier / Aesop | 解説 |
AUTOMOTIVE.md | 自動車・モビリティ | Tesla / Porsche | 解説 |
ARCHITECTURE.md | 建築事務所・インテリア | Zaha Hadid / Foster | 解説 |
クリエイティブワーク・メディア表現に特化したテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
PHOTOGRAPHY.md | 写真家・フォトギャラリー | Unsplash / 500px | 解説 |
MAGAZINE_EDITORIAL.md | マガジン・エディトリアル | Vogue / Monocle | 解説 |
STARTUP_LANDING.md | スタートアップLP・ティザー | Stripe / Linear | 解説 |
テクノロジー・データ分析・開発者向けツールに特化したテーマ群。
| テンプレート | 用途 | 参考デザイン | 詳細 |
|---|---|---|---|
WEB3_CRYPTO.md | Web3・暗号資産・DeFi | Uniswap / OpenSea | 解説 |
AI_SAAS.md | AI SaaS・機械学習ツール | OpenAI / Hugging Face | 解説 |
NFT_GALLERY.md | NFTマーケット・ギャラリー | OpenSea / Foundation | 解説 |
DEVELOPER_CLI.md | DevOps・開発者ツール・CLI | Catppuccin / Warp | 解説 |
DASHBOARD_ANALYTICS.md | 分析・監視・BIツール | Grafana / Datadog | 解説 |
PRODUCTIVITY.md | タスク管理・ノートアプリ | Notion / Linear | 解説 |
特定のビジュアルトレンド・デザイン哲学に基づくスタイル群。
| テンプレート | 用途 | スタイル | 詳細 |
|---|---|---|---|
NEOBRUTALISM.md | 遊び心のあるWebアプリ | 太ボーダー・ハードシャドウ・パステル | 解説 |
GLASSMORPHISM.md | モダンUI・iOS風 | ガラス透過・ブラー・グラデーション | 解説 |
NATURE_ORGANIC.md | オーガニック・サステナブル | アースカラー・セリフ体・有機的形状 | 解説 |
BAUHAUS.md | デザインスクール・建築・アート | 原色・幾何学形態・太い黒ボーダー | 解説 |
VAPORWAVE.md | 音楽・アート・クリエイティブ | ネオングラデーション・CRT・グリッド | 解説 |
KIDS_CHILDREN.md | 知育アプリ・子供向けサービス | 大タッチターゲット・明るい色・丸い角 | 解説 |
伝統的なデザイン哲学・文化的美意識に基づくテーマ群。
| テンプレート | 用途 | スタイル | 詳細 |
|---|---|---|---|
RETRO_VINTAGE.md | レトロ・ビンテージ・懐古 | セピアトーン・テクスチャ・手書き風 | 解説 |
ART_DECO.md | アールデコ・1920s・ラグジュアリー | 金・幾何学パターン・対称構成 | 解説 |
SCANDINAVIAN.md | 北欧・スカンジナビアン | ナチュラルカラー・余白・機能美 | 解説 |
JAPANESE_WABISABI.md | 和・侘び寂び・日本文化 | 自然素材・非対称・余韻 | 解説 |
SWISS_TYPOGRAPHY.md | スイスタイポグラフィ・国際様式 | グリッド・サンセリフ・赤白黒 | 解説 |
上記一覧からプロジェクトに合うテンプレートを選択します。
# 例: ダークテーマをベースにする場合
cp templates/DARK_THEME.md ./DESIGN.mdaccent-primary をプロジェクトのブランドカラーに変更します。
この DESIGN.md に従って [画面名] を作成してください迷ったら
各テンプレートの解説ページにはインタラクティブなプレビューが含まれています。実際の見た目を確認しながら選択してください。
カスタムテンプレート
50種のプリセットに合うものがない場合は、カスタム作成ガイド を参照してゼロから作成できます。