Навык Claude Code, который генерирует 5 UX-прототипов в виде B&W-кадров, затем добавляет чистые и полированные цветовые варианты с помощью параллельных агентов.

##Установка (впервые) Откройте терминал и запустите эту команду:

Или: «Скачайте SKILL.md и поместите его ~/.claude/skills/wireframe/SKILL.md».

Обновление ### (если оно уже установлено) Откройте терминал и запустите эту команду.

Что он делает

Генерирует 5 UX-подходов (1 безопасное расширение вашей системы проектирования + 4 поисковых) Сначала появляются каркасы B&W (~40-60), затем 5 параллельных агентов добавляют цветовые варианты.

• Каждый вариант имеет 3 подзадачи: Wireframe (B&W) / Clean (плоский цвет) / Polished (градиенты, тени, анимация)
• Прототипы интерактивны: рабочие вкладки, аккордеоны, состояния наведения, все внутри макета браузера-фрейма
• При первом запуске сканирует CSS, JS, шаблоны + скриншоты для создания постоянного контекста дизайна Извлекает цели оптимизации из вашей подсказки («больше конверсий», «уменьшить беспорядок» и т. Д.)
• Включает сводную вкладку со счетной таблицей и рекомендуемым вариантом

Как это работает

1. ** Фаза 1** (~40-60s): генерирует 5 B&W-кадров в одном HTML-файле, открывает его в браузере

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