mockuplisted
Install: claude install-skill AI-Driven-School/aiki
# /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
<!-- mockups/temp-{name}.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<!-- UIコンポーネントをここに生成 -->
</body>
</html>
```
### Step 2: PNG変換
```bash
node scripts/render-mockup.js mockups/temp-{name}.html mockups/{name}.png iphone
```
### Step 3: 設計書に追加
生成した画像パスを設計書やドキュメントに記載。
## デザインガイドライン
### カラーパレット
```html
<!-- Primary -->
<div class="bg-indigo-500 text-white">プライマリ</div>
<!-- Secondary -->
<div class="bg-violet-500 text-white">セカンダリ</div>
<!-- Success -->
<div class="bg-emerald-500 text-white">成功</div>
<!-- Warning -->
<div class="bg-amber-500 text-white">警告</div>
<!-- Danger -->
<div class="bg-rose-500 text-white">エラー</div>
```
### コンポーネントパターン
#### ボタン
```html
<button class="px-6 py-3 bg-indigo-500 tex