B&Wワイヤーフレームとして5つのUXプロトタイプを生成し、その後、並列エージェントを介してクリーンで洗練されたカラーバリエーションを追加します。

インストール(初回)

ターミナルを開き、このコマンドを実行します。

または手動で: [[SKILL.md]]をダウンロードして、[~/.claude/skills/wireframe/SKILL.md]に置く。

更新(既にインストールされている場合)

ターミナルを開き、このコマンドを実行します

それが何をするか

• 5つのUXアプローチを生成します(1あなたの設計システムの安全な延長+ 4のexploratory)
• B&Wワイヤーフレームは最初に現れます(~40-60s)、そして5平行の代理店は色の変形を加えます
• 各オプションには3つのサブタブがあります:ワイヤーフレーム(B&W)/クリーン(フラットカラー)/研磨(グラデーション、シャドウ、アニメーション)
• Prototypesはインタラクティブです: 作業タブ、アコーディオン、ホバー状態、すべてのブラウザフレームモックアップ中
• 最初の実行時に、CSS、JS、テンプレート+スクリーンショットをスキャンして、永続的なデザインコンテキストを構築します。
• あなたのプロンプトから最適化の目標を抽出します(「より多くの変換」、 "reduce clutter"など)
• スコアリングテーブルと推奨オプション付きのサマリータブが含まれています

使い方

1.Phase 1 (~40-60s):単一のHTMLファイルで5 B&Wのワイヤーフレームを発生させ、あなたのブラウザで開きます 2.

claude-wireframe-skill

A Claude Code skill that generates 5 UX prototypes as B&W wireframes, then adds Clean and Polished color variants via parallel agents.

Installation (First Time)

Open up the terminal and run this command:

mkdir -p ~/.claude/skills
git clone https://github.com/Magdoub/claude-wireframe-skill.git ~/.claude/skills/wireframe

Or manually: download SKILL.md and place it at ~/.claude/skills/wireframe/SKILL.md.

Update (If you already have it installed)

Open up the terminal and run this command

git -C ~/.claude/skills/wireframe fetch origin && git -C ~/.claude/skills/wireframe reset --hard origin/main

What it does

• Generates 5 UX approaches (1 safe extension of your design system + 4 exploratory)
• B&W wireframes appear first (~40-60s), then 5 parallel agents add color variants
• Each option has 3 sub-tabs: Wireframe (B&W) / Clean (flat color) / Polished (gradients, shadows, animation)
• Prototypes are interactive: working tabs, accordions, hover states, all inside a browser-frame mockup
• On first run, scans your CSS, JS, templates + screenshots to build persistent design context
• Extracts optimization goals from your prompt (“more conversions”, “reduce clutter”, etc.)
• Includes a summary tab with scoring table and a recommended option

How it works

1. Phase 1 (~40-60s): generates 5 B&W wireframes in a single HTML file, opens it in your browser
2. Phase 2 (parallel): 5 agents each write CSS color variants (Clean + Polished) for their option
3. Sub-tabs turn colorful as each option’s variants finish, no page reload needed

After running /wireframe improve the design of my header landing it looks crammed

Usage

In any project with Claude Code:

/wireframe simplify the signup flow
/wireframe add a search bar to the listing page
/wireframe redesign the dashboard with better data density
/wireframe add an onboarding wizard for new users

First run

The first time you use /wireframe in a project, it will:

1. Scan your codebase for CSS, JS, and template files to understand existing patterns
2. Ask for 2-3 screenshots of your current app
3. Create a wireframe/brain/design-context.md file with persistent design context

Subsequent runs skip this step and load the saved context.

Output

Each run creates a folder at wireframe//:

wireframe/
  brain/
    design-context.md    # Persistent design context (auto-generated)
    design-taste.md      # Craft principles & style tokens
  2302-signup-flow/
    index.html           # Shared HTML + inline JS