Fluxwing Skills - Design at the Speed of Conversation

Rapid iterative design with progressive fidelity.

Fluxwing enables rapid iteration using ASCII—a format both humans and AI read natively:

1. Start low-fidelity - ASCII layouts in minutes, not hours
2. Iterate with AI - "Move this" → quick changes. "Add that" → done.
3. Add fidelity progressively - Metadata, tokens, behaviors as design solidifies
4. Review and validate - Get it right at low-fidelity before high-fidelity

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

---

Progressive Fidelity Workflow

Level 1: ASCII Layout

╭──────────────────────╮
│  Welcome Back        │
│  ┌────────────────┐  │
│  │ Email          │  │
│  └────────────────┘  │
│  [    Sign In    ]   │
╰──────────────────────╯

Iterate with Claude: "Move button up" → quick changes. Try multiple layouts rapidly.

Level 2: Component Metadata

{
  "id": "submit-button",
  "variant": "primary",
  "states": { "hover": {...}, "disabled": {...} }
}

Add behavior, states, accessibility as design solidifies.

Level 3: Review and Move to High-Fidelity

• Validate with stakeholders at low-fidelity
• Get feedback fast, iterate rapidly
• THEN build in React, design visually, implement

Get it right before investing in high-fidelity.

---

What is Fluxwing?

Fluxwing is the AI-powered design tool. uxscii is the open standard it uses.

Think of it this way:

• uxscii = The language (like HTML/CSS)
• Fluxwing = The tool that speaks it (like a code editor for design)

---

Installation

Claude Code (CLI)

Get started in 10 seconds:

# In Claude Code, add the marketplace
/plugin marketplace add trabian/fluxwing-skills

# Install the plugin
/plugin install fluxwing-skills

That's it! Start designing by talking to Claude naturally.

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

Available skills: 6 ZIP files (one per skill)

• fluxwing-component-creator.zip (60KB)
• fluxwing-library-browser.zip (7.6KB)
• fluxwing-component-expander.zip (9.3KB)
• fluxwing-screen-scaffolder.zip (15KB)
• fluxwing-component-viewer.zip (6.6KB)
• fluxwing-screenshot-importer.zip (24KB)

Requirements: Pro, Max, Team, or Enterprise plan with code execution enabled

---

See INSTALL.md for detailed instructions, development setup, and troubleshooting.

---

Quick Start

Create Your First Component

Simply ask Claude:

"Create a button component"

The fluxwing-component-creator skill activates and guides you through creating a button with interactive states, accessibility attributes, and clean ASCII visualization.

Browse the Library

Ask Claude:

"Show me all available components"

The fluxwing-library-browser skill shows you 11 bundled templates (buttons, inputs, cards, modals, etc.) and your project components.

Build a Complete Screen

Ask Claude:

"Build a login screen"

The fluxwing-screen-scaffolder skill creates missing components, composes them into a screen, and generates rendered examples with real data.

Add Component States

Ask Claude:

"Add hover state to my button"

The fluxwing-component-expander skill adds interactive states (hover, focus, disabled, active, error) to existing components.

---

The Six Skills

Skill	Triggers	Purpose
fluxwing-component-creator	"Create a button", "I need an input component"	Create new components (buttons, inputs, cards, etc.)
fluxwing-library-browser	"Show me all components", "Browse the library"	Browse available templates and user components
fluxwing-component-expander	"Add hover state", "Make this interactive"	Add states to existing components
fluxwing-screen-scaffolder	"Create a login screen", "Build a dashboard"	Build complete screens from components
fluxwing-component-viewer	"Show me the submit-button", "View details"	View component details and metadata
fluxwing-screenshot-importer	"Import this screenshot", "Convert screenshot"	Convert screenshots to uxscii components

Skills activate automatically based on your natural language requests to Claude.

---

How It Works

The Two-File System

Every component consists of two files:

1. .uxm file (JSON metadata):

{
  "id": "submit-button",
  "type": "button",
  "version": "1.0.0",
  "metadata": {
    "name": "Submit Button",
    "created": "2024-10-11T12:00:00Z"
  },
  "props": {
    "text": "Submit"
  },
  "ascii": {
    "templateFile": "submit-button.md",
    "width": 20,
    "height": 3
  }
}

2. .md file (ASCII template):

# Submit Button

## Default State

```
╭──────────────────╮
│   {{text}}       │
╰──────────────────╯
```

Output Structure

All component and screen outputs are saved to your project:

./fluxwing/                  # Your project files
├── components/              # Your created components (.uxm + .md)
├── screens/                 # Your created screens (.uxm + .md + .rendered.md)
└── library/                 # Customized copies of templates

Skills include bundled templates (READ-ONLY reference materials):

.claude/skills/{skill-name}/
├── templates/               # 11 component templates
├── schemas/                 # JSON Schema validation
└── docs/                    # Documentation modules

The Golden Rule: Skills READ from bundled templates, WRITE to your project workspace.

---

Why Fluxwing?

Rapid Iterative Design

Iterate at conversation speed. ASCII layouts enabl