Fluxwing - AI-native UX design using the uxscii standard. Create components and screens with ASCII art and structured metadata.
You can install this plugin from any of these themed marketplaces. Choose one, add it as a marketplace, then install the plugin.
Choose your preferred installation method below
A marketplace is a collection of plugins. Every plugin gets an auto-generated marketplace JSON for individual installation, plus inclusion in category and themed collections. Add a marketplace once (step 1), then install any plugin from it (step 2).
One-time setup for access to all plugins
When to use: If you plan to install multiple plugins now or later
Step 1: Add the marketplace (one-time)
/plugin marketplace add https://claudepluginhub.com/marketplaces/all.jsonRun this once to access all plugins
Step 2: Install this plugin
/plugin install fluxwing@allUse this plugin's auto-generated marketplace JSON for individual installation
When to use: If you only want to try this specific plugin
Step 1: Add this plugin's marketplace
/plugin marketplace add https://claudepluginhub.com/marketplaces/plugins/fluxwing.jsonStep 2: Install the plugin
/plugin install fluxwing@fluxwingDesign beautiful UX and screens with AI using the uxscii standard.
Fluxwing leverages AI's natural ability to create ASCII art specifications that humans can instantly understand and provide feedback on. Built on the open uxscii standard, it enables a rapid design feedback loop: AI generates visual specs using ASCII, humans review and iterate naturally, and the system captures increasing levels of fidelity through structured metadata.
The perfect collaboration: AI excels at creating ASCII layouts. Humans excel at giving feedback on ASCII drawings. Together, they create production-ready designs through progressive refinement.
Fluxwing is the AI agent that helps you design. uxscii is the standard format it uses.
Think of it this way:
Get started in 30 seconds:
# Add the marketplace
/plugin marketplace add fluxwing/claude-code-plugins
# Install the plugin
/plugin install fluxwing
That's it! Start designing with /fluxwing-create or /fluxwing-library
See detailed installation options →
/fluxwing-create button
Fluxwing guides you through creating a button with interactive states, accessibility attributes, and clean ASCII visualization.
/fluxwing-library
Explore 11 bundled templates (buttons, inputs, cards, modals, etc.) and your project components.
/fluxwing-scaffold login-screen
Fluxwing creates missing components, composes them into a screen, and generates rendered examples with real data.
/fluxwing-validate
Get instant feedback on schema compliance, accessibility, and best practices.
| Command | Purpose |
|---|---|
/fluxwing-create [name] | Create a single component |
/fluxwing-scaffold [screen] | Build a complete screen |
/fluxwing-validate [file] | Validate components |
/fluxwing-library | Browse all components |
| Agent | Purpose |
|---|---|
| fluxwing-designer | Autonomous multi-component design from descriptions |
| fluxwing-validator | Deep quality analysis with recommendations |
| fluxwing-composer | Assemble screens from existing components |
11 Curated Component Templates: Buttons, inputs, cards, modals, navigation, alerts, badges, lists, forms, and more.
2 Complete Screen Examples: Login screen and dashboard with rendered examples showing real data.
Complete Documentation: Modular guides optimized for AI agents, full uxscii reference, ASCII pattern library, and validation standards.
Production-Ready Schema: JSON Schema for validation with complete field reference and extensible architecture.
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}} │
╰──────────────────╯
```
Critical Understanding: Fluxwing has TWO separate file locations:
{PLUGIN_ROOT}/data/ # Bundled with plugin - reference only
├── schema/ # JSON Schema for validation
├── examples/ # 11 component templates (READ-ONLY)
├── screens/ # 2 screen examples (READ-ONLY)
└── docs/ # Documentation modules
These are bundled reference materials - NEVER modified by commands or agents.
./fluxwing/ # Your project files - ALL outputs go here
├── components/ # Your created components
├── screens/ # Your created screens
│ └── *.rendered.md # Examples with REAL data
└── library/ # Your customized template copies
All command and agent outputs are saved here. These are YOUR files.
The Golden Rule: READ from plugin data, WRITE to project workspace.
AI's Superpower: Modern AI models are exceptional at generating ASCII art and visual layouts. They can instantly create boxes, borders, layouts, and structured visual representations.
Human's Superpower: Humans can instantly parse ASCII drawings and provide immediate, intuitive feedback: "move this left", "make that bigger", "add spacing here".
The Magic: This creates a natural feedback loop where:
Start simple, add detail as needed:
Level 1: ASCII Layout
╭────────────────────╮
│ Login │
│ ┌──────────────┐ │
│ │ Email │ │
│ └──────────────┘ │
│ [ Login ] │
╰────────────────────╯
Quick visual feedback, instant iteration.
Level 2: Structured Metadata
Add component types, props, states, and behavior through the .uxm file.
Level 3: Enhanced Details Add accessibility, interactions, animations, responsive behavior, and design tokens.
You control the fidelity. Start with quick ASCII sketches, refine progressively as the design solidifies.
Version Control Friendly - Text-based format with meaningful diffs. Collaborative editing without binary conflicts.
Production Ready - Schema validation ensures quality. Accessibility built-in (ARIA roles, keyboard support). Multiple states for all interactive elements.
Tool Independent - Open uxscii standard, not proprietary. Works with any text editor. No vendor lock-in.
Portable & Self-Contained - Everything needed is in the plugin. No external dependencies. Works in any Claude Code installation.
Natural conversation-based design:
You: "Create a login screen with email, password, and a submit button"
AI: [Generates ASCII layout]
╭──────────────────────╮
│ Welcome Back │
│ ┌────────────────┐ │
│ │ Email │ │
│ └────────────────┘ │
│ ┌────────────────┐ │
│ │ Password │ │
│ └────────────────┘ │
│ [ Sign In ] │
╰──────────────────────╯
You: "Add a forgot password link and make the button more prominent"
AI: [Iterates instantly]
╭──────────────────────╮
│ Welcome Back │
│ ┌────────────────┐ │
│ │ Email │ │
│ └────────────────┘ │
│ ┌────────────────┐ │
│ │ Password │ │
│ └────────────────┘ │
│ Forgot password? │
│ ╔════════════════╗ │
│ ║ SIGN IN ║ │
│ ╚════════════════╝ │
╰──────────────────────╋
You: "Perfect! Now add the metadata for accessibility"
AI: [Adds structured .uxm metadata with ARIA labels, roles, keyboard navigation]
Design converges through natural feedback on ASCII drawings.
Quick single component:
/fluxwing-create button
Full screen with multiple components:
/fluxwing-scaffold dashboard
Browse the library:
/fluxwing-library
Validate your work:
/fluxwing-validate
Let AI design autonomously:
"Create a complete dashboard with revenue cards, user activity chart, and recent notifications"
The agent will:
Contributions welcome! To add features or improvements:
Check TROUBLESHOOTING.md for solutions to common problems.
fluxwing/data/examples/ for component patternsfluxwing/data/docs/00-INDEX.md for all guidesMIT License - free to use and modify
Built on the uxscii standard - an open, AI-native design markup language.
Fluxwing brings uxscii to Claude Code, making AI-powered UX design accessible to everyone.
Install Fluxwing directly from the plugin marketplace:
1. Add the Fluxwing marketplace:
/plugin marketplace add fluxwing/claude-code-plugins
2. Install the plugin:
/plugin install fluxwing
That's it! Fluxwing is now available across all your Claude Code sessions (terminal and VS Code).
Toggle the plugin on/off as needed:
/plugin disable fluxwing
/plugin enable fluxwing
For development or offline use, install from a local directory:
1. Clone or download the marketplace:
git clone https://github.com/trabian/fluxwing-plugin.git
cd fluxwing-plugin
2. Add the marketplace:
/plugin marketplace add /path/to/claude-code-plugins
3. Install the plugin:
/plugin install fluxwing@fluxwing-marketplace
Note: Replace /path/to/claude-code-plugins with the absolute path to the marketplace directory (containing .claude-plugin/marketplace.json).
When developing the plugin locally, you need to copy the built-in components to Claude's plugin cache directory:
1. Navigate to the marketplace root:
cd fluxwing-marketplace
2. Run the setup script (first time only):
npm run dev:setup
3. After modifying built-in components, sync them:
npm run dev:sync-components
This script copies the built-in components from fluxwing/data/examples/ to the well-known location (~/.claude/plugins/cache/fluxwing/data/examples/) where Claude Code expects to find them.
fluxwing-marketplace/
├── .claude-plugin/ # Marketplace manifest
├── package.json # Development scripts
├── tests/ # Automated tests
├── docs/ # Development documentation
└── fluxwing/ # The plugin
├── .claude-plugin/ # Plugin manifest
├── commands/ # 4 slash commands
├── agents/ # 3 autonomous agents
├── data/ # All uxscii assets (portable)
│ ├── schema/ # JSON Schema validation
│ ├── examples/ # 11 component templates
│ ├── screens/ # 2 screen examples
│ └── docs/ # Documentation modules
└── [Documentation files]
Ready to design with AI?
Start with: /fluxwing-create or /fluxwing-library
Design beautiful UX with Fluxwing - your AI design assistant
1.0.0