B&W 와이어프레임으로 5개의 UX 프로토타입을 생성한 Claude Code 스킬은 병렬 에이전트를 통해 깨끗하고 닦은 색상 변형을 추가합니다.

설치 (첫째로)

터미널을 열고 이 명령을 실행:

또는 수동으로: 다운로드 SKILL.md ~/.claude/skills/wireframe/SKILL.md] 에서 배치.

업데이트 (당신은 이미 설치 한 경우)

터미널을 열고 이 명령을 실행

무엇 그것

• 5가지 UX 접근법(디자인 시스템의 안전한 확장 + 4 탐험)
• B&W 전선 구조는 첫째로 나타납니다 (~40-60s), 그 후에 5개의 평행한 대리인은 색깔 변종을 추가합니다
• 각 선택권에는 3개의 sub-tabs가 있습니다: Wireframe (B&W)/청소 (풀 컬러)/닦는 (gradients, 그림자, 생기)
• Prototypes는 상호 작용합니다: 일 탭, 협정, hover 국가, 브라우저 구조 조업 안쪽에 모두
• 첫 번째 실행에서 CSS, JS, 템플릿 + 스크린 샷을 스캔하여 지속적 디자인 컨텍스트 구축
• 신속한 (“더 많은 변환”, “reduce clutter”, 등)의 최적화 목표를 추출합니다.
• 테이블과 권장 옵션으로 요약 탭을 포함

어떻게 작동합니까?

1. ** 단계 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