fluxwing-skills

🥈Silver

Fluxwing Skills enables rapid iterative design using ASCII components. Operations teams can create low-fidelity layouts quickly, then refine them with AI assistance. Connects to Claude for AI-driven design iteration and human review.

1510Updated 2mo ago

Intermediate30min to implementautomation

Saves ~45 min per use

Quick InstallView Source

git clone https://github.com/trabian/fluxwing-skills.git

Works with:

Claude

Overview

About This Skill

Fluxwing Skills is an AI-powered design tool that enables progressive fidelity workflows starting with ASCII layouts. The skill set includes six specialized tools: component creator, library browser, screen scaffolder, component expander, viewer, and screenshot importer. Teams can iterate designs through natural language conversation with Claude, moving from low-fidelity ASCII mockups to structured component metadata. All outputs save to your project workspace as .uxm metadata files and .md ASCII templates, following the uxscii open standard. This approach lets you validate design decisions quickly at low-fidelity before investing in high-fidelity builds.

How to Use

Install via Claude Code with '/plugin marketplace add trabian/fluxwing-skills' or upload ZIP files to Claude Desktop settings. Start designing by asking Claude naturally: 'Create a button component', 'Build a login screen', or 'Add hover state to my button'. Skills activate automatically and save all outputs to your ./fluxwing/ project directory.

Use Cases

Create reusable button, input, card, and modal components in minutes

Build complete UI screens by composing components through conversation

Add interactive states (hover, focus, disabled, error) to existing components

Convert screenshots into uxscii ASCII components for rapid prototyping

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/trabian/fluxwing-skills

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create a low-fidelity ASCII layout for a [COMPANY] data center in the [INDUSTRY] sector. Include [NUMBER] racks, [NUMBER] servers per rack, and [NUMBER] network switches. Then suggest 3 improvements to optimize airflow and cable management. Use this layout: [ASCII_LAYOUT].

Example Output

# Data Center Layout for GreenTech Solutions

```
+---------------------+
| RACK-01 (12 Servers) |
+---------+-----------+
| NET-SW-01 | NET-SW-02 |
+---------------------+
| RACK-02 (12 Servers) |
+---------+-----------+
| NET-SW-03 | NET-SW-04 |
+---------------------+
```

## Suggested Improvements
- **Airflow Optimization**: Add blanking panels to empty rack spaces to prevent hot/cold air mixing.
- **Cable Management**: Implement vertical cable managers on each rack to reduce clutter and improve airflow.
- **Redundancy**: Add a backup network switch (NET-SW-05) to ensure redundancy in case of hardware failure.