/mockup スキル

UIモックアップをHTML/Tailwind CSSで生成し、PNG画像としてレンダリングします。

使用方法

/mockup ログイン画面
/mockup ダッシュボード画面 --device desktop
/mockup 商品詳細ページ --device ipad

実行フロー

HTML生成: Tailwind CSSを使用したモックアップHTMLを生成
PNG変換: Playwrightでレンダリングしてスクリーンショット
保存: mockups/ ディレクトリに保存

デバイスプリセット

| デバイス | サイズ | 用途 | |---------|--------|------| | iphone | 390x844 | モバイルアプリ（デフォルト） | | iphone-se | 375x667 | 小型モバイル | | ipad | 820x1180 | タブレット | | desktop | 1440x900 | デスクトップWeb | | macbook | 1512x982 | MacBook |

実装手順

Step 1: 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変換

node scripts/render-mockup.js mockups/temp-{name}.html mockups/{name}.png iphone

Step 3: 設計書に追加

生成した画像パスを設計書やドキュメントに記載。

デザインガイドライン

カラーパレット

<!-- 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>

コンポーネントパターン

ボタン

<button class="px-6 py-3 bg-indigo-500 text-white font-medium rounded-xl hover:bg-indigo-600 transition-colors">
    ボタン
</button>

カード

<div class="bg-white rounded-2xl shadow-lg p-6">
    <h3 class="text-lg font-bold text-gray-900">タイトル</h3>
    <p class="text-gray-600 mt-2">説明テキスト</p>
</div>

入力フィールド

<input type="text"
    class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none"
    placeholder="入力してください">

ナビゲーションバー

<nav class="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-b border-gray-100 px-4 py-3">
    <div class="flex items-center justify-between max-w-lg mx-auto">
        <h1 class="text-lg font-bold text-gray-900">アプリ名</h1>
        <button class="p-2">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>
    </div>
</nav>

タブバー（モバイル）

<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-4 py-2 pb-8">
    <div class="flex justify-around items-center">
        <button class="flex flex-col items-center text-indigo-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
            </svg>
            <span class="text-xs mt-1">ホーム</span>
        </button>
        <button class="flex flex-col items-center text-gray-400">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
            </svg>
            <span class="text-xs mt-1">マイページ</span>
        </button>
    </div>
</nav>

出力例

> /mockup ログイン画面

📱 モックアップ生成中...

[1/3] HTML生成中...
[2/3] Playwrightでレンダリング中...
[3/3] PNG保存中...

✅ mockups/login.png を作成しました (390x844)

📎 設計書に追加:
![ログイン画面](./mockups/login.png)

mockup

Como adicionar

Cole no README do seu repo

Skills relacionadas

frontend-design

mcp-builder

webapp-testing

web-artifacts-builder

Receba novas skills de Design e Frontend toda segunda