skills.rest
Jktfe
JktfeCOMMUNITY
Explore all skills by this author →
GitHub

wireframe

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
One-click install
npx skills add https://github.com/Jktfe/flowspec-claude-code-plugin --skill wireframe
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
xenitV1xenitV1
132

frontend-design

Apply design-thinking to frontend UI components, layouts, color schemes, and typography.

Community
Basic
wpgauravwpgaurav
14

ui-design-brain

Apply 60 component patterns and design-system rules to React, HTML, and CSS interfaces.

Community
Advanced
digisurfsomedigisurfsome

stage-06-layout-mockups-style

Transform stage-4/5 blueprint data into UI layout plans with design tokens.

Community
Advanced
traylinxtraylinx
2

vision-expert

Analyze images and screenshots to extract layout patterns, UI components, and diagrams.

Official
Advanced