Mockup

Skill AI-Driven-School/aiki/.claude/skills/mockup

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.From its SKILL.md

Install

npx -y skills add AI-Driven-School/aiki --skill mockup

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.6 KB, ~1.4k tokens by cl100k_base, as published. Nobody here has run it

/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)

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.