Design at the speed of conversation.

Rapid iterative design with progressive fidelity. Iterate and review in minutes using ASCII. Add detail as your design solidifies. Get it right before high-fidelity.

Why ASCII? It's rapid. Both humans and AI read it natively. Structure first, pixels later.

Get started View docs
AI DJ Mixer · uxscii render captured from fluxwing/screens/ai-dj-mixer.rendered.md

Rapid Iteration + Progressive Fidelity

Rapid Iteration

Iterate at conversation speed. "Move this", "add that" → quick changes. Try multiple layouts rapidly. No dragging, no resizing, just structure. Structure first, pixels later.

Why ASCII? Rapid + Universal

ASCII is rapid—no pixel-pushing, just structure. And it's universal—both humans and AI read it natively. Humans see hierarchy instantly. AI reads it without vision models. Iterate through conversation at the speed of thought.

Progressive Fidelity

Don't make detailed decisions too early. Start ASCII layout (structure, hierarchy). Add component metadata (states, behavior). Review and refine. Get it right before high-fidelity.

Review Before High-Fidelity

Iterate rapidly at low-fidelity. Add detail progressively. Validate with stakeholders. THEN move to high-fidelity tools. .uxm becomes your spec for implementation.

Component Derivation

Start with a base component, derive variations from it. The extends field documents relationships. AI can help propagate changes when you ask. Clear lineage for your design system.

Progressive Fidelity Workflow

Start simple, iterate fast, add detail as design solidifies. 

Level 1: ASCII Layout
╭──────────────────────╮
│  Welcome Back        │
│  ┌────────────────┐  │
│  │ Email          │  │
│  └────────────────┘  │
│  [    Sign In    ]   │
╰──────────────────────╯
Rapid iteration: "Move button up" → quick changes

Level 2: Component Metadata
{
  "id": "submit-button",
  "variant": "primary",
  "states": { "hover": {...}, "disabled": {...} }
}
Add behavior, states, accessibility

Level 3: Review and Refine
Validate with stakeholders
Add more detail as needed
Get feedback fast

Level 4: Move to High-Fidelity
.uxm becomes your implementation spec
Build in React/Vue/Svelte
Design in visual tools

Start simple → Add fidelity progressively → Move to high-fidelity when ready

.uxm becomes the spec. Review and refine at low-fidelity before investing in high-fidelity implementation.

From Idea to Implementation in Minutes

  1. Start Low-Fidelity

    You: "Create a login screen"

    Claude: Generates ASCII layout instantly. You see structure immediately. Give feedback naturally.

  2. Iterate Instantly

    You: "Move the button up, add forgot password"

    Claude: Updates instantly. Try multiple layouts quickly. Structure first, pixels later.

  3. Add Fidelity Progressively

    You: "Add hover states and accessibility metadata"

    Claude: Creates .uxm with ARIA labels, keyboard navigation, interaction states. Add detail as design solidifies.

  4. Review and Validate

    Share .uxm specs with stakeholders. Get feedback fast. Iterate rapidly. Get it right at low-fidelity before investing in high-fidelity.

  5. Move to High-Fidelity When Ready

    .uxm becomes your implementation spec. Build in React, design visually, or generate code. Fast iteration from idea to validated spec.

Component gallery

Browse components by category. Click a filter to see specific types.

Sidebar collapse button

Compact arrow button for collapsing/expanding sidebar panels.

Playback controls

Standard audio playback controls with clear iconography.

Chat input field

Text input with integrated send button for chat messages.

Account balance card

Commercial banking card with balance and trend indicators.

Terminal window

Faux CLI shell with progress indicator and blinking cursor.

Install Fluxwing

Claude Code (CLI)

Install via Claude Code's plugin system:

/plugin marketplace add trabian/fluxwing-skills
/plugin install fluxwing-skills

✓ Installs all six skills automatically

✓ Managed by Claude Code plugin system

✓ Easy updates with /plugin update

Claude Desktop App (macOS/Windows)

For the GUI Claude app:

  1. → Download ZIP files from latest release
  2. → Open Claude Desktop > Settings > Capabilities
  3. → Click "Upload skill" and select a ZIP file
  4. → Repeat for each skill you want to install

✓ 6 ZIP files available (60KB - 24KB each)

✓ Requires Pro, Max, Team, or Enterprise plan

✓ Code execution must be enabled

Development Setup

For local development and testing:

git clone https://github.com/trabian/fluxwing-skills.git
cd fluxwing-skills
./scripts/install.sh