進化した Google の Stitch でデザイン生成から MCP・Skills 連携まで試してみた

# Design System: The Artisanal Digital Atelier

## 1. Overview & Creative North Star
**The Creative North Star: "The Digital Curator"**

This design system moves beyond a standard e-commerce interface to create a high-end, editorial experience for *Boulangerie Miel*. We are not just building an ordering system; we are crafting a digital extension of a physical craft bakery. The aesthetic is rooted in Japanese "Soft Minimalism"—where every pixel serves a purpose, and "Ma" (negative space) is treated as a foundational element.

To break the "template" look, we utilize **Intentional Asymmetry**. Hero images of bread are not always centered; they may overlap container boundaries or bleed off-edge to suggest a tactile, magazine-like quality. Typography is used at high-contrast scales (Display-LG vs. Body-SM) to create a clear, authoritative hierarchy that feels curated rather than automated.

---

## 2. Colors
Our palette is inspired by the organic transition from raw flour to a perfectly baked crust.

### Palette Roles
* **Primary (#904905):** The "Terracotta" heart of the brand. Used for CTAs and moments of conversion.
* **Secondary (#705a47):** A muted, toasted brown for secondary actions and subtle branding elements.
* **Surface/Background (#fff8f0):** An inviting, warm off-white that prevents screen fatigue and evokes a premium paper feel.
* **On-Surface (#1e1b16):** Our "Dark Brown" for maximum legibility without the harshness of pure black.

### The "No-Line" Rule
**Explicit Instruction:** Do not use 1px solid borders to section content. Boundaries must be defined through background color shifts. For example, a `surface-container-low` (#faf3ea) card sits on a `surface` (#fff8f0) background. If a visual break is needed, use vertical white space (`spacing-8`) or a subtle tonal shift.

### Surface Hierarchy & Nesting
Treat the UI as a series of stacked fine papers. Use the `surface-container` tiers to create depth:
* **App Background:** `surface` (#fff8f0)
* **Navigation/Sidebar:** `surface-container-low` (#faf3ea)
* **Product Cards:** `surface-container-lowest` (#ffffff)
* **Floating Modals:** `surface-bright` with Glassmorphism.

### The "Glass & Gradient" Rule
To add "soul" to our flat aesthetic, apply a subtle linear gradient to Primary CTAs (transitioning from `primary` to `primary-container`). For floating navigation elements, use **Glassmorphism**: a semi-transparent `surface` color with a `backdrop-filter: blur(12px)`. This allows the warm photography to bleed through the edges, softening the layout.

---

## 3. Typography
The typography system balances the precision of Japanese Gothic styles with the warmth of an artisanal brand.

* **Display (Plus Jakarta Sans):** Used for large, editorial headlines. Bold and spacious.
* **Headline/Title (Plus Jakarta Sans):** Navigational anchors. High-weight, high-impact.
* **Body/Label (Manrope):** Chosen for its clean, geometric legibility at small sizes, ensuring the Japanese character sets (when applicable) feel balanced and modern.

**Hierarchy as Identity:** Use `display-lg` for product names in hero sections to create a sense of luxury. Use `label-sm` in all-caps for technical details (e.g., "WEIGHT: 400G") to provide a "spec-sheet" craft aesthetic.

---

## 4. Elevation & Depth
We reject traditional drop shadows in favor of **Tonal Layering**.

* **The Layering Principle:** Depth is achieved by "stacking" container tiers. Place a `surface-container-lowest` card on a `surface-container-low` background. This creates a soft, natural "lift" without the "dirty" look of grey shadows.
* **Ambient Shadows:** If a floating element (like a Cart Drawer) requires a shadow, it must be an **Ambient Shadow**: `0px 12px 32px rgba(59, 42, 26, 0.06)`. The tint is derived from our Dark Brown, not black, ensuring it feels like a natural shadow cast by warm bakery lighting.
* **The "Ghost Border":** If a border is required for accessibility, use the `outline-variant` (#dac2b4) at **15% opacity**. Never use 100% opaque borders.

---

## 5. Components

### Buttons
* **Primary:** Fill: `primary`, Text: `on-primary`. Roundedness: `xl` (1.5rem). Use a subtle gradient for depth.
* **Secondary:** Fill: `secondary-container`, Text: `on-secondary-container`. Flat, no shadow.
* **Tertiary:** No fill, `on-surface` text. Use for low-priority actions like "Cancel" or "View Details."

### Category Tags (Chips)
* **Unselected:** `tertiary-fixed` background, `on-tertiary-fixed` text.
* **Selected:** `on-background` (Dark Brown) background, `surface` text.
* **Shape:** `md` (0.75rem) for a modern, slightly squared-off craft look.

### Cards (Product Display)
* **Rule:** No dividers. Separate the image, title, and price using `spacing-3` and `spacing-1.5`.
* **Background:** `surface-container-lowest` (#FFFFFF).
* **Rounding:** `xl` (1.5rem).
* **Interaction:** On hover, apply a `surface-dim` tint or a very slight scale (1.02x) rather than a shadow.

### Input Fields
* **Style:** Minimalist. `surface-container-highest` background. No border.
* **Focus State:** A 2px "Ghost Border" using the `primary` color at 40% opacity.

### Navigation Sidebar
* **Background:** `surface-container-low` (#faf3ea).
* **Active State:** Use a vertical "accent bar" of 4px in `primary` on the left side of the active link, with no background change to the menu item itself.

---

## 6. Do's and Don'ts

### Do:
* **Do** use asymmetrical layouts where images overlap the "grid."
* **Do** prioritize white space over divider lines. If the content feels cluttered, increase the spacing scale instead of adding a line.
* **Do** use warm, "golden hour" photography. The UI is the frame; the bread is the art.
* **Do** use the `xl` (1.5rem) corner radius for large components to maintain the "soft" brand personality.

### Don't:
* **Don't** use pure black (#000000) for anything. Always use `on-surface` (#1e1b16).
* **Don't** use standard Material Design shadows. They are too "software-like" for a bakery.
* **Don't** use high-contrast borders. If you can see the border before the content, it's too dark.
* **Don't** center-align long blocks of text. Keep it editorial: left-aligned or carefully justified.

  クラフトベーカリー「Boulangerie Miel」の店舗情報ページ。
  パン職人の哲学と店の温もりが伝わる、雑誌の特集記事のような
  エディトリアルレイアウトのWebページ。

  **DESIGN SYSTEM (REQUIRED):**
  - Platform: Web, Desktop-first（モバイルレスポンシブ対応）
  - Theme: Light, Japanese "Soft Minimalism", editorial craft aesthetic
  - Background: Warm Off-White (#fff8f0) — 上質な紙のような温かみ
  - Surface Card: Pure White (#ffffff) for content cards
  - Surface Accent: Warm Cream (#faf3ea) for alternating sections
  - Primary Accent: Terracotta (#904905) for CTAs and accent elements
  - Secondary: Toasted Brown (#705a47) for secondary text and icons
  - Text Primary: Dark Brown (#1e1b16) — pure blackは使用しない
  - Text Secondary: Muted warm gray for descriptions and captions
  - Outline: Ghost Border (#dac2b4) at 15% opacity — 明確なボーダーラインは使わない
  - Buttons: xl rounded (1.5rem), primary buttons with subtle gradient
  - Cards: xl rounded (1.5rem), no borders, tonal layering for depth
  - Typography: Plus Jakarta Sans for headings (display/headline), Manrope for body text
  - Shadows: Ambient only — rgba(59, 42, 26, 0.06), no standard drop shadows
  - Spacing: generous whitespace（"Ma"）を基調とし、線ではなく背景色のトーン変化で区切る

  **Page Structure:**
  1. **ヘッダー:** ロゴ（左寄せ）、ナビゲーションメニュー（メニュー / ご注文 / 店舗情報）、
     右側にカートアイコン。Glassmorphism効果の半透明バー。
     「店舗情報」がアクティブ状態（左に4pxのTerracottaアクセントバー）。
  2. **ヒーローセクション:** 店舗外観の大判写真をフルワイド配置。
     早朝のゴールデンアワー照明で、木製ドアとガラス越しに並ぶパンが見える温かい写真。
     写真の上にオーバーレイで「Boulangerie Miel」のdisplay-lg見出しと
     「毎朝、小麦と向き合う。」のlabel-sm大文字サブテキスト。
     写真は左右の境界を少しはみ出す非対称配置（Intentional Asymmetry）。
  3. **ストーリーセクション（私たちについて）:** 2カラムの非対称レイアウト。
     左側（広め、約60%）にパン職人が生地をこねている写真。画像はカード境界を
     わずかにはみ出す配置。右側にオーナーシェフの挨拶文。
     見出し「パンへの想い」（headline weight）、本文は2-3段落のエディトリアル調テキスト。
     「2015年、小さな工房から始まりました」のようなストーリー。
     背景はsurface (#fff8f0)。
  4. **こだわりセクション:** surface-container-low (#faf3ea) 背景で領域を区別。
     3つのアイコン付きカードを横並び配置。
     - 「厳選素材」: 小麦アイコン、国産小麦と天然酵母へのこだわり
     - 「毎朝手作り」: 時計アイコン、早朝4時からの仕込み
     - 「無添加」: リーフアイコン、保存料・着色料不使用
     各カードはsurface-container-lowest (#ffffff)背景、xl角丸、
     ホバー時1.02xスケール。アイコンはTerracotta (#904905) カラー。
  5. **営業情報セクション:** 2カラムレイアウト。
     左カラム: 営業時間テーブル（線なし、背景トーンの交互切替で行を区別）。
     「営業時間」見出し（headline weight）。
     - 月〜金: 7:00 - 19:00
     - 土・日・祝: 8:00 - 18:00
     - 定休日: 毎週水曜日（label-sm、Terracottaカラーで強調）
     右カラム: 店舗情報リスト（アイコン + テキスト、縦並び、spacing-3で区切り）。
     - 住所: 📍 東京都世田谷区〇〇 1-2-3
     - 電話: 📞 03-XXXX-XXXX
     - 席数: 店内イートイン 12席
     - 駐車場: 2台分あり
  6. **アクセスマップセクション:** フルワイドの埋め込み地図プレースホルダー
     （角丸xl、surface-container-lowest背景）。
     地図の下に最寄り駅からの道順テキスト:
     「〇〇駅南口より徒歩5分。商店街を抜けた先、レンガの外壁が目印です。」
     label-smサイズ、左寄せ。
  7. **ギャラリーセクション:** surface-container-low (#faf3ea) 背景。
     「店内の風景」のheadline見出し。
     マソンリーグリッド（3カラム、不均等高さ）で店内写真を6-8枚配置。
     木のカウンター、棚に並ぶパン、エスプレッソマシン、窓際の席など。
     すべてゴールデンアワーの暖色トーン。各写真はxl角丸、ホバーで
     わずかなオーバーレイとキャプション表示。
  8. **お問い合わせCTAセクション:** surface (#fff8f0) 背景にセンター配置。
     「お気軽にお問い合わせください」のheadline見出し。
     「ご予約・お取り置き・特注ケーキのご相談など」のbodyサブテキスト。
     「お問い合わせ」Primaryグラデーションボタンと
     「Instagramを見る」Secondaryボタンを横並び。
  9. **フッター:** surface-container-low背景。
     3カラム: 左にロゴと一行キャッチコピー、中央に各ページへのリンク、
     右にSNSアイコン（Instagram / LINE）。
     最下部に「© Boulangerie Miel」のlabel-sm著作権表示。

  **Atmosphere & Details:**
  - 全体を「パン職人の一日を追ったドキュメンタリー雑誌」のようなトーンで
  - 写真は暖色系・ゴールデンアワー照明で統一、冷たい蛍光灯感は排除
  - テキストは左寄せを基本に、エディトリアルな読みやすさを優先
  - セクション間は線やボーダーではなく、背景色のトーンシフト
    （#fff8f0 → #faf3ea の交互切替）で視覚的に区切る
  - display-lgとlabel-smのコントラスト比を活かした力強い見出し階層
  - スクロール時の余白（Ma）を贅沢に取り、情報過多にしない

# Photo Library - Design System

## Overview

Photo Library は、写真の閲覧・管理を目的としたデスクトップアプリケーションUI。3カラムレイアウトを採用し、サイドバーナビゲーション、サムネイルグリッド、詳細パネルで構成される。クリーンでミニマルなデザインに、適度なアクセントカラーを組み合わせた視認性の高いインターフェース。

---

## Layout

### Structure

- **3カラムレイアウト**: サイドバー（固定幅） + コンテンツグリッド（可変幅） + 詳細パネル（固定幅）
- サイドバーとコンテンツ領域の間に薄い境界線あり
- 詳細パネルはコンテンツ領域の右側に配置

### Spacing

| Token        | Value   | Usage                          |
|--------------|---------|--------------------------------|
| `space-xs`   | 4px     | アイコンとラベル間             |
| `space-sm`   | 8px     | グリッドアイテム間のギャップ   |
| `space-md`   | 12px    | セクション内パディング         |
| `space-lg`   | 16px    | サイドバー内パディング         |
| `space-xl`   | 24px    | セクション間マージン           |

---

## Color Palette

### Base Colors

| Token               | Value       | Usage                              |
|----------------------|-------------|-------------------------------------|
| `--bg-primary`       | `#FFFFFF`   | メインコンテンツ背景               |
| `--bg-secondary`     | `#F5F6F8`   | サイドバー・詳細パネル背景         |
| `--bg-tertiary`      | `#EBEDF0`   | サムネイル背景・ホバー状態         |
| `--border-light`     | `#E2E4E8`   | セクション区切り線                 |

### Text Colors

| Token               | Value       | Usage                              |
|----------------------|-------------|-------------------------------------|
| `--text-primary`     | `#1A1D23`   | 見出し・ファイル名                 |
| `--text-secondary`   | `#6B7280`   | メタデータラベル（File Name等）    |
| `--text-tertiary`    | `#9CA3AF`   | プレースホルダー・補助テキスト     |

### Accent Colors

| Token               | Value       | Usage                              |
|----------------------|-------------|-------------------------------------|
| `--accent-primary`   | `#2B7A78`   | アクティブタブ下線・選択状態       |
| `--accent-select`    | `#3B9FD9`   | 選択写真のボーダー                 |
| `--accent-highlight` | `#E8A830`   | アクティブアルバムの左ボーダー     |

### Thumbnail Palette (コンテンツカラー)

サムネイルには以下のようなカラーバリエーションが見られる:

| Category     | Colors                                           |
|--------------|--------------------------------------------------|
| Dark         | `#2C3E50`, `#1B2838` - ダーク背景のサムネイル    |
| Teal/Green   | `#2B7A78`, `#4A9E8E` - 自然・植物系              |
| Light        | `#D4E5D7`, `#E8EDF0` - 明るい背景のサムネイル    |
| Warm         | `#E8A830`, `#D4854A` - アクセントカラー          |

---

## Typography

| Token             | Size   | Weight     | Usage                           |
|-------------------|--------|------------|----------------------------------|
| `--font-title`    | 18px   | Bold (700) | アプリタイトル「Photo Library」  |
| `--font-nav`      | 14px   | Regular (400) | サイドバーアルバム名          |
| `--font-tab`      | 13px   | Medium (500) | タブラベル（Details等）        |
| `--font-label`    | 12px   | Regular (400) | メタデータラベル              |
| `--font-value`    | 13px   | Medium (500) | メタデータ値                  |
| `--font-small`    | 11px   | Regular (400) | 補助情報                      |

- **Font Family**: System font stack (`-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`)
- **Line Height**: 1.4 - 1.6（テキスト密度に応じて調整）

---

## Components

### 1. Search Bar

- 角丸: `border-radius: 6px`
- 背景: `--bg-primary` (#FFFFFF)
- ボーダー: `1px solid --border-light`
- 左側に検索アイコン（虫眼鏡）
- プレースホルダーテキスト: `--text-tertiary`
- 高さ: ~32px

### 2. Album List (Navigation)

- **デフォルト状態**: `--text-secondary`, 背景なし
- **アクティブ状態**: `--text-primary`, 左側に `--accent-highlight` (ゴールド) の 3px ボーダー
- **ホバー状態**: `--bg-tertiary` 背景
- パディング: `8px 16px`
- アイテム間隔: 0px（連続配置）

### 3. View Mode Toggle

- 3つのビューモード: グリッド（小）、リスト、グリッド（大）
- 中央上部に配置
- アクティブ状態: アイコン色が `--text-primary` に変化
- 非アクティブ状態: `--text-tertiary`

### 4. Thumbnail Grid

- グリッドレイアウト: 5列（レスポンシブに調整可能）
- アスペクト比: 1:1（正方形）
- 角丸: `border-radius: 8px`
- ギャップ: `8px`
- **デフォルト状態**: ボーダーなし、`--bg-tertiary` 背景
- **選択状態**: `2px solid --accent-select` (ブルー) のボーダー
- **ホバー状態**: 軽いシャドウまたはオーバーレイ

### 5. Detail Panel

#### Image Preview

- 角丸: `border-radius: 8px`
- 最大幅: パネル幅に合わせて調整
- アスペクト比: 元画像を維持

#### Tab Navigation

- アクティブタブ: `--accent-primary` の下線（2px）、`--text-primary` テキスト
- 非アクティブタブ: `--text-secondary`、下線なし
- タブ間隔: `16px`

#### Metadata Section

- ラベル: `--font-label`, `--text-secondary`
- 値: `--font-value`, `--text-primary`
- ラベルと値の間隔: `4px`
- メタデータ項目間の間隔: `12px`

#### Color Swatches (Dominant Colors)

- 形状: 円形 (`border-radius: 50%`)
- サイズ: 16px x 16px
- 間隔: `6px`
- サンプルカラー: オレンジ (#D4854A), ダークグリーン (#2C5F4A), ティール (#3B8E8C), ライトブルー (#A8D4D0)

---

## Borders & Shadows

| Token               | Value                          | Usage                    |
|----------------------|--------------------------------|--------------------------|
| `--radius-sm`        | `4px`                         | 小さいUI要素              |
| `--radius-md`        | `6px`                         | 検索バー・ボタン          |
| `--radius-lg`        | `8px`                         | サムネイル・プレビュー画像 |
| `--border-default`   | `1px solid #E2E4E8`           | 区切り線                  |
| `--border-selected`  | `2px solid #3B9FD9`           | 選択アイテム              |
| `--shadow-card`      | `0 1px 3px rgba(0,0,0,0.08)`  | カード要素（軽微）        |

---

## Interaction States

| State      | Visual Treatment                                        |
|------------|----------------------------------------------------------|
| Default    | 標準背景・テキストカラー                                |
| Hover      | 背景色が `--bg-tertiary` に変化、またはシャドウ追加     |
| Active     | アクセントカラーのボーダーまたは下線                    |
| Selected   | `--accent-select` ボーダー（サムネイル）                |
| Focus      | `2px solid --accent-primary` のアウトライン             |
| Disabled   | `opacity: 0.5`, カーソル `not-allowed`                  |

---

## Iconography

- スタイル: アウトラインベース、線幅 1.5px
- サイズ: 16px（ナビゲーション）、20px（アクション）
- カラー: `--text-secondary`（デフォルト）、`--text-primary`（アクティブ）
- 使用アイコン:
  - 検索（虫眼鏡）
  - グリッドビュー（4x4ドット）
  - リストビュー（横線）
  - 拡大グリッドビュー（2x2ドット）

---

## Design Principles

1. **クリーン & ミニマル**: 装飾を最小限に抑え、コンテンツ（写真）を主役にする
2. **視覚的階層**: サイドバー → グリッド → 詳細パネルの3段階で情報を整理
3. **コントラストバランス**: 明るい背景にダークテキスト、アクセントカラーは控えめに使用
4. **一貫した角丸**: 8px を基準として統一感を維持
5. **サブトルなフィードバック**: 選択・ホバー状態は控えめだが明確に視覚化