Mockup

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

Claude Code + Codex 自動連携テンプレート - AI駆動開発の効率化

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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

4.6 KB, 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)