---
name: mockup
description: Generate UI mockup images as PNG using HTML/Tailwind CSS rendered via Playwright. Supports multiple device presets (iPhone, iPad, desktop). Use when creating visual prototypes or running /mockup.
compatibility: Requires Playwright for screenshot rendering
metadata:
author: AI-Driven-School
version: "1.0"
---
# /mockup スキル
UIモックアップをHTML/Tailwind CSSで生成し、PNG画像としてレンダリングします。
## 使用方法
```
/mockup ログイン画面
/mockup ダッシュボード画面 --device desktop
/mockup 商品詳細ページ --device ipad
```
## 実行フロー
1. **HTML生成**: Tailwind CSSを使用したモックアップHTMLを生成
2. **PNG変換**: Playwrightでレンダリングしてスクリーンショット
3. **保存**: `mockups/` ディレクトリに保存
## デバイスプリセット
| デバイス | サイズ | 用途 |
|---------|--------|------|
| `iphone` | 390x844 | モバイルアプリ（デフォルト） |
| `iphone-se` | 375x667 | 小型モバイル |
| `ipad` | 820x1180 | タブレット |
| `desktop` | 1440x900 | デスクトップWeb |
| `macbook` | 1512x982 | MacBook |
## 実装手順
### Step 1: HTMLファイル生成
```html
```
### Step 2: PNG変換
```bash
node scripts/render-mockup.js mockups/temp-{name}.html mockups/{name}.png iphone
```
### Step 3: 設計書に追加
生成した画像パスを設計書やドキュメントに記載。
## デザインガイドライン
### カラーパレット
```html
プライマリ
セカンダリ
成功
警告
エラー
```
### コンポーネントパターン
#### ボタン
```html
```
#### カード
```html
```
#### 入力フィールド
```html
```
#### ナビゲーションバー
```html
```
#### タブバー（モバイル）
```html
```
## 出力例
```
> /mockup ログイン画面
📱 モックアップ生成中...
[1/3] HTML生成中...
[2/3] Playwrightでレンダリング中...
[3/3] PNG保存中...
✅ mockups/login.png を作成しました (390x844)
📎 設計書に追加:
```