skills.rest
kinncj
kinncjCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

wireframe

Generate ASCII, SVG, or HTML wireframes from user story files.

23|7|Updated Feb 14, 2026
Search Tags:#html#svg#ui-design#ascii#wireframe#story-to-wireframe
One-click install
npx skills add https://github.com/kinncj/MAPLE --skill wireframe-kinncj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wireframe
Source: https://github.com/kinncj/MAPLE/tree/main/template/.opencode/skills/wireframe
Command: npx skills add https://github.com/kinncj/MAPLE --skill wireframe-kinncj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate low-fidelity wireframes from user story files to streamline UI planning and communication between product, design, and engineering.

Core Features & Use Cases

  • Generate ASCII, SVG, or HTML wireframes from a given story file.
  • Produce consistent wireframe primitives to guide visual design and UX review.
  • Use Case: Given a user story, produce a wireframe outline that captures layout and states.

Quick Start

Provide a story_file path and format to generate the corresponding wireframe in docs/design/wireframes.

Frequently Asked Questions about wireframe

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

FAQPage Schema
How do I generate wireframes from user stories for UI design?▼

To generate wireframes from user stories, provide your story file path to produce concrete layout designs in ASCII, SVG, or HTML formats. This streamlines UI planning by translating stories into structured artifacts stored under docs/design/wireframes.

Can I output wireframes in multiple formats like HTML and SVG?▼

Yes, you can output wireframes in HTML, SVG, or ASCII formats. Providing a story file path and selecting your desired format generates the corresponding wireframe representation for your UI design workflow.

What is the process for integrating wireframe generation into a design review cycle?▼

Integrating wireframe generation into a design review cycle involves deterministic generation of wireframe artifacts stored under docs/design/wireframes with an explicit approval workflow. This ensures structured review between product, design, and engineering teams.

How do I create low-fidelity wireframe outlines that capture layout and states?▼

To create low-fidelity wireframe outlines capturing layout and states, use a given user story file to produce consistent wireframe primitives. These primitives guide visual design and UX review by mapping story requirements into concrete layouts.

Do I need any external dependencies to generate ASCII wireframes from story files?▼

No external dependencies are required to generate ASCII wireframes from story files. The skill operates independently to translate your user stories into deterministic ASCII, SVG, or HTML wireframe representations.

Related Skills

Explore More Design & Creative Skills→
ThorStarlordThorStarlord
1

ui-blueprint

Create a UI layout blueprint with hierarchy and responsive reflow rules.

Community
Intermediate
kinncjkinncj
23

mockup

Generates runnable UI mockups from approved wireframes using declared stacks.

Community
Advanced
blakeoxblakeox

product-design-review

Analyze product interfaces and user flows for usability and visual design deficiencies.

Community
Intermediate
ryan-nguyen-01ryan-nguyen-01
4

agent-designer

Translate BA user stories and SA architecture into UI design documentation.

Community
Intermediate