wireframe

Name: wireframe
Availability: InStock
Author: Jktfe

Translate wireframe screenshots and sub-canvas YAML into structured UI component layouts.

1|Updated Feb 5, 2026

Search Tags:#wireframe #visual-analysis #placement #flowspec #ui-component #data-mapping #sub-canvas

Ready to run

npx skills add https://github.com/Jktfe/flowspec-claude-code-plugin --skill wireframe

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/Jktfe/flowspec-claude-code-plugin/tree/main/skills/wireframe
Command: npx skills add https://github.com/Jktfe/flowspec-claude-code-plugin --skill wireframe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

FlowSpec wireframes and data mappings often live separately, making it hard to implement UI components that accurately reflect both the visual design and the underlying data structure.

Core Features & Use Cases

Combines a wireframe screenshot with a sub-canvas YAML to map data positions to UI elements.
Leverages optional main FlowSpec for full type and constraint context to enhance accuracy.
Supports responsive layouts by interpreting percentage-based placements rather than fixed pixels.

Quick Start

Implement a UI component by combining the wireframe screenshot with the sub-canvas YAML to place data elements.

Frequently Asked Questions about wireframe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I translate a wireframe screenshot into a structured UI component layout?▼

To translate a wireframe screenshot into a structured UI component layout, combine the screenshot with a sub-canvas YAML file to map data positions to visual UI elements accurately.

What is the best way to map FlowSpec data to a wireframe design?▼

Mapping FlowSpec data to a wireframe design involves parsing a sub-canvas YAML and optionally cross-referencing a main FlowSpec to provide full type and constraint context for the UI implementation.

How do I handle percent-based coordinates when implementing UI from a wireframe?▼

Handling percent-based coordinates when implementing UI from a wireframe allows the layout to interpret responsive placements rather than fixed pixels, ensuring adaptable component positioning.

Can I use a main FlowSpec to add type and constraint data to a wireframe layout?▼

Yes, you can leverage an optional main FlowSpec to add type and constraint data to a wireframe layout, enhancing the accuracy of the structured UI component implementation by pairing it with sub-canvas YAML.

Do I need a sub-canvas YAML to parse placements from a wireframe screenshot?▼

Yes, a sub-canvas YAML is required to parse placements from a wireframe screenshot, as it maps the sourceNodeType and data positions to the visual design elements to produce a usable UI.

Why are my wireframe data mappings not aligning with the UI component layout?▼

Wireframe data mappings may not align with the UI component layout if the sub-canvas YAML is not properly paired with the screenshot, or if the main FlowSpec type and constraint context is missing.