Get the FREE Ultimate OpenClaw Setup Guide →

mockup

Scanned
npx machina-cli add skill AI-Driven-School/aiki/mockup --openclaw
Files (1)
SKILL.md
4.6 KB

/mockup スキル

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

使用方法

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

実行フロー

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

デバイスプリセット

デバイスサイズ用途
iphone390x844モバイルアプリ（デフォルト）
iphone-se375x667小型モバイル
ipad820x1180タブレット
desktop1440x900デスクトップWeb
macbook1512x982MacBook

実装手順

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)

Source

git clone https://github.com/AI-Driven-School/aiki/blob/main/.claude/skills/mockup/SKILL.mdView on GitHub

Overview

Generates UI mockups by rendering HTML with Tailwind CSS into PNGs via Playwright. It supports device presets (iPhone, iPad, desktop, and MacBook) for visual prototypes and for running /mockup in a real workflow.

How This Skill Works

The process creates a Tailwind-based HTML mockup, then uses Playwright to render a screenshot at the chosen device preset, and saves the PNG under the mockups/ directory.

When to Use It

  • When you need a quick visual prototype to share with stakeholders
  • When generating device-specific previews for iPhone, iPad, or desktop layouts
  • When documenting UI designs in design specs or implementation guides
  • When creating assets for presentations or marketing materials
  • When iterating UI ideas by generating fresh mockups with /mockup commands

Quick Start

  1. Step 1: Create an HTML mockup using Tailwind CSS (HTML文件生成).
  2. Step 2: Render the HTML to PNG with Playwright, e.g., node scripts/render-mockup.js mockups/temp-{name}.html mockups/{name}.png iphone.
  3. Step 3: Add the generated image path to your design docs or README for reference.

Best Practices

  • Use the provided device presets (iphone, iphone-se, ipad, desktop, macbook) to ensure accurate viewport sizes
  • Generate HTML with a simple, self-contained Tailwind-based template (prefer CDN) for portability
  • Name mockup outputs clearly and save to the mockups/ directory for easy reference
  • Keep designs modular: build reusable components (buttons, cards, inputs) before rendering
  • Verify the PNG resolution matches the target device preset to avoid blurry exports

Example Use Cases

  • /mockup ログイン画面
  • /mockup ダッシュボード画面 --device desktop
  • /mockup 商品詳細ページ --device ipad
  • /mockup 新規登録画面 --device iphone
  • /mockup マイページ設定 --device macbook

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗