wireframe-generator

name	wireframe-generator
description	YAML定義からChakra UIベースのワイヤーフレーム画像を自動生成する

Wireframe Generator

YAML定義から設計レビュー用ワイヤーフレーム画像を自動生成するスキル。

概要

項目	内容
入力	YAML定義（画面設計書内の yaml wireframe ブロック）
出力	PNG画像（スクリーンショット）
UIフレームワーク	Chakra UI
スクリーンショット	Playwright
スキーマ	wireframe.schema.json

使用タイミング

• /detailed-design-workflow の Phase 1.5（モックアップ生成）
• 画面設計書作成時のワイヤーフレーム生成

実行方法

cd <skill-dir>/wireframe-generator/scripts
bun install
bun run generate.ts <markdown-file> [output-dir]

Note: <skill-dir> は .opencode/skill または .claude/skills のいずれか（シンボリックリンクで同一）

---

JSON Schema

AIがYAMLを生成する際は、以下のスキーマに従ってください。

スキーマファイル: wireframe.schema.json（このスキルディレクトリ内）

対応UIパターン（type）

基本タイプ

type	用途	必須プロパティ
form	入力フォーム	screen, type, fields
table	一覧表示	screen, type, columns
detail	詳細表示	screen, type, sections
dashboard	ダッシュボード	screen, type
crud	CRUD画面	screen, type, table, form

レイアウト・ナビゲーション

type	用途	必須プロパティ
layout	ヘッダー/サイドバー付きレイアウト	screen, type, content
tabs	タブ付き画面	screen, type, tabs

コンテンツ表示

type	用途	必須プロパティ
card-grid	カードグリッド一覧	screen, type, cards
timeline	アクティビティ履歴	screen, type, items
gallery	画像ギャラリー	screen, type, items

ウィザード・状態表示

type	用途	必須プロパティ
wizard	ステップフォーム	screen, type, steps
empty-state	空状態/エラー画面	screen, type, title
alert	通知/警告	screen, type, alerts

モーダル・ダイアログ

type	用途	必須プロパティ
modal	モーダルダイアログ	screen, type, title, content
drawer	スライドパネル	screen, type, content
confirm	確認ダイアログ	screen, type, title, message

ビジネス・マーケティング

type	用途	必須プロパティ
pricing	料金プラン	screen, type, plans
faq	FAQ	screen, type, items
hero	ランディングページヒーロー	screen, type, title
stats	統計カード	screen, type, stats

コラボレーション

type	用途	必須プロパティ
kanban	カンバンボード	screen, type, columns
calendar	カレンダー	screen, type
chat	チャット画面	screen, type, messages

プロフィール・設定

type	用途	必須プロパティ
profile	ユーザープロフィール	screen, type, user
settings	設定画面	screen, type, sections
auth	ログイン/登録/2FA等	screen, type, variant, fields

---

YAML記法リファレンス

type: form

入力フォーム画面（ログイン、登録、設定など）

screen: ログインフォーム
type: form
fields:
  - name: email           # 必須: フィールド識別子
    label: メールアドレス  # 必須: 表示ラベル
    type: email           # 必須: text|email|password|number|textarea|select|checkbox|radio|date|file|pin
    required: true        # 任意: 必須フラグ
    placeholder: example`email` skill.com  # 任意
  - name: password
    label: パスワード
    type: password
    required: true
  - name: role
    label: 権限
    type: select
    options:              # select/radioの場合は必須
      - value: admin
        label: 管理者
      - value: user
        label: 一般ユーザー
  - name: remember
    label: ログイン状態を保持
     
    
     
                  
               
     
                  
    
           
    
     

type: table

一覧表示画面（ユーザー一覧、注文一覧など）

screen: ユーザー一覧
type: table
columns:
  - name: id              # 必須: データキー
    label: ID             # 必須: ヘッダーラベル
    width: 80             # 任意: カラム幅(px)
  - name: name
    label: 名前
  - name: status
    label: ステータス
    type: badge           # 任意: text|badge|date|currency|number
  - name: createdAt
    label: 登録日
    type: date
actions:                  # 任意: search|pagination|create-button|row-edit|row-delete|bulk-select|export
  - search
  - pagination
  - create-button
  - row-edit
  - row-delete
data:                     # 任意: サンプルデータ（省略時はダミー表示）
  - id: 1
    name: 山田太郎
    status: 
     

type: detail

詳細表示画面（ユーザー詳細、商品詳細など）

screen: ユーザー詳細
type: detail
sections:
  - title: 基本情報       # 必須: セクションタイトル
    fields:
      - label: 名前       # 必須
        value: 山田太郎   # 必須
      - label: ステータス
        value: アクティブ
        type: badge       # 任意: text|badge|date|link
  - title: 登録情報
    fields:
      - label: 登録日
        value: 2025-01-01
        type: date
actions:                  # 任意
  - label: 編集
    variant: primary
  - label: 削除
    variant: danger

type: dashboard

ダッシュボード画面（統計、KPI表示）

screen: 管理ダッシュボード
type: dashboard
stats:                    # 任意: 統計カード
  - label: 総ユーザー数   # 必須
    value: "1,234"        # 必須
    icon: users           # 任意: users|currency|activity|chart|inbox|settings
    trend: "+12%"         # 任意: トレンド表示
  - label: 今月の売上
    value: "¥1,234,567"
    icon: currency
    trend: "+5%"
widgets:                  # 任意: ウィジェット
  - type: chart           # 必須: chart|table|list
    title: 月別売上推移   # 必須
    chartType: line       # chart時: line|bar|pie
  - type: table
    title: 最近の注文
    columns:              # table時
      - label: 注文ID
      - label: 顧客名
      - label: 

type: crud

CRUD画面（一覧 + 作成/編集モーダル）

screen: 商品管理
type: crud
table:                    # 必須: 一覧テーブル定義
  columns:
    - name: name
      label: 商品名
    - name: price
      label: 価格
      type: currency
  actions:
    - search
    - pagination
    - create-button
    - row-edit
    - row-delete
form:                     # 必須: モーダルフォーム定義
  title: 商品登録
  fields:
    - name: name
      label: 商品名
      type: text
      required: true
    - name: price
      label: 価格
      type: number
      required: true

type: confirm

確認ダイアログ（削除確認、操作確認など）

screen: 削除確認ダイアログ
type: confirm
title: 削除の確認            # 必須: ダイアログタイトル
message: この操作は取り消せません。本当に削除しますか？  # 必須: 確認メッセージ
variant: danger              # 任意: info|warning|danger|success（デフォルト: info）
icon: warning                # 任意: アイコン（省略時はvariantに応じた自動選択）
confirmLabel: 削除する       # 任意: 確認ボタンラベル（デフォルト: 確認）
cancelLabel: キャンセル      # 任意: キャンセルボタンラベル（デフォルト: キャンセル）
confirmVariant: danger       # 任意: 確認ボタンのvariant（デフォルト: variantに応じて自動選択）

type: modal

モーダルダイアログ（編集フォーム、詳細表示など）

screen: ユーザー編集モーダル
type: modal
title: ユーザー情報を編集    # 必須: モーダルタイトル
size: md                     # 任意: xs|sm|md|lg|xl|full（デフォルト: md）
closable: true               # 任意: 閉じるボタン表示（デフォルト: true）
content:                     # 必須: コンテンツ定義
  type: form                 # form|table|detail|dashboard|card-grid|timeline|empty-state|custom
  config:                    # 重要: typeに応じた設定をconfigの中に記述
    fields:
      - name: name
        label: 名前
        type: text
        required: true
      - name: email
        label: メールアドレス
        type: email
        required: true
footer:                      # 任意: フッターボタン
  align: right               # 任意: left|center|right（デフォルト: right）
  actions:
    - label: キャンセル
      variant: secondary
    - label: 
       

type: drawer

スライドパネル（設定、フィルター、サイドメニューなど）

screen: 設定ドロワー
type: drawer
title: 表示設定              # 任意: ドロワータイトル
placement: right             # 任意: left|right|top|bottom（デフォルト: right）
size: md                     # 任意: xs|sm|md|lg|xl|full（デフォルト: md）
closable: true               # 任意: 閉じるボタン表示（デフォルト: true）
content:                     # 必須: コンテンツ定義
  type: form                 # form|table|detail|dashboard|card-grid|timeline|empty-state|custom
  config:                    # 重要: typeに応じた設定をconfigの中に記述
    fields:
      - name: theme
        label: テーマ
        type: select
        options:
          - value: light
            label: ライト
          - value: dark
            label: ダーク
      - name: notifications
        label: 通知を有効にする
        type: checkbox
footer:                      # 任意: フッターボタン
  actions:
      
       

注意: modalとdrawerのcontent内では、typeで指定したコンポーネントの設定を必ずconfigの中に記述してください。直接fieldsなどを書くとエラーになります。

---

画面設計書での記述例

画面設計書.md 内に以下のように記述：

## 3.1 SC-001: ログイン画面

### ワイヤーフレーム定義

```yaml wireframe
screen: ログイン画面
type: form
fields:
  - name: email
    label: メールアドレス
    type: email
    required: true
  - name: password
    label: パスワード
    type: password
    required: true
buttons:
  - label: ログイン
    variant: primary
```

### 生成されたワイヤーフレーム

![ログイン画面](./assets/ログイン画面.png)

---

生成フロー

flowchart LR
    A[画面設計書.md] --> B[YAML抽出]
    B --> C[Chakra UI レンダリング]
    C --> D[Playwright スクリーンショット]
    D --> E[PNG保存]
    E --> F[画面設計書に埋め込み]

ディレクトリ構成

wireframe-generator/
├── SKILL.md                    # このファイル
├── wireframe.schema.json       # JSON Schema定義
└── scripts/
    ├── package.json
    ├── tsconfig.json
    ├── types.ts                # TypeScript型定義
    ├── generate.ts             # CLIエントリポイント
    ├── extract.ts              # YAML抽出
    ├── screenshot.ts           # Playwright撮影
    ├── vite.config.ts
    ├── index.html
    ├── sample.md               # サンプル
    └── src/
        ├── main.tsx
        ├── App.tsx
        └── components/
            ├── FormRenderer.tsx
            ├── TableRenderer.tsx
            ├── DetailRenderer.tsx
            ├── DashboardRenderer.tsx
            └── CrudRenderer.tsx

制限事項

• デザイン性は考慮しない（設計レビュー用ワイヤーフレーム目的）
• カスタムCSSは非対応
• 複雑なインタラクションは非対応（静的表示のみ）