Where are the imported components saved?

Generated components are saved to the ./fluxwing/components/ directory, while full screens are saved to ./fluxwing/screens/ within your project workspace.

How does the parallel vision analysis work?

The skill spawns a Vision Coordinator that runs three specialized agents in parallel—one for layout discovery, one for component detection, and one for visual properties—to ensure comprehensive analysis.

What is the uxscii standard used by this skill?

uxscii is a standard for representing UI components using ASCII art for visual representation (.md) and JSON for state management (.uxm), designed to be readable by both humans and AI.

Can it handle complex layouts like dashboards?

Yes, the layout discovery agent specifically analyzes spatial relationships, grid structures, and navigation elements to accurately map complex dashboard and sidebar layouts.

Does this skill require the Screen Scaffolder skill?

Yes, the Screenshot Importer orchestrates the process and delegates the final screen composition to the fluxwing-screen-scaffolder to ensure modularity and clean file creation.

Fluxwing Screenshot Importer

Name: Fluxwing Screenshot Importer
Author: trabian

bytrabian

•

Design Tools

Transforms UI screenshots into standardized uxscii components and screens using automated vision analysis and multi-agent orchestration.

This skill streamlines the transition from visual UI designs to structured code by analyzing screenshots with a specialized team of vision agents. It automatically extracts layout hierarchies, detects UI elements, and captures visual properties to generate atomic and composite components following the uxscii standard. By orchestrating parallel vision processing and delegating to the Fluxwing Screen Scaffolder, it provides a high-speed, automated workflow for documenting and building human-readable ASCII interfaces directly within the project workspace.

Key Features

01Seamless Skill Orchestration: Automatically delegates screen composition to the Screen Scaffolder for complex UI assembly.

029 GitHub stars

03Component Hierarchy Detection: Intelligently distinguishes between atomic elements and composite structures like forms or cards.

04Automated uxscii Generation: Creates standardized .uxm (JSON) and .md (ASCII) files for every detected UI element.

05Support for Multiple Formats: Processes PNG, JPG, WebP, and GIF files to integrate into the development workflow.

06Parallel Vision Analysis: Uses coordinated agents to simultaneously extract layout, component types, and visual properties.

Use Cases

01Rapidly prototyping UI documentation and ASCII screens from design tool mockups.

02Reverse-engineering existing production interfaces into a structured uxscii component library.

03Standardizing design systems for AI-assisted development through automated visual analysis.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add trabian/fluxwing-skills fluxwing-screenshot-importer

For use in Claude.ai and ChatGPT

Download Skill