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

•

设计工具

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.

主要功能

Seamless Skill Orchestration: Automatically delegates screen composition to the Screen Scaffolder for complex UI assembly.
9 GitHub stars
Component Hierarchy Detection: Intelligently distinguishes between atomic elements and composite structures like forms or cards.
Automated uxscii Generation: Creates standardized .uxm (JSON) and .md (ASCII) files for every detected UI element.
Support for Multiple Formats: Processes PNG, JPG, WebP, and GIF files to integrate into the development workflow.
Parallel Vision Analysis: Uses coordinated agents to simultaneously extract layout, component types, and visual properties.

使用场景

Rapidly prototyping UI documentation and ASCII screens from design tool mockups.
Reverse-engineering existing production interfaces into a structured uxscii component library.
Standardizing design systems for AI-assisted development through automated visual analysis.

关于

主要功能

Seamless Skill Orchestration: Automatically delegates screen composition to the Screen Scaffolder for complex UI assembly.
9 GitHub stars
Component Hierarchy Detection: Intelligently distinguishes between atomic elements and composite structures like forms or cards.
Automated uxscii Generation: Creates standardized .uxm (JSON) and .md (ASCII) files for every detected UI element.
Support for Multiple Formats: Processes PNG, JPG, WebP, and GIF files to integrate into the development workflow.
Parallel Vision Analysis: Uses coordinated agents to simultaneously extract layout, component types, and visual properties.

使用场景

Rapidly prototyping UI documentation and ASCII screens from design tool mockups.
Reverse-engineering existing production interfaces into a structured uxscii component library.
Standardizing design systems for AI-assisted development through automated visual analysis.