generate-wireframes

Generate low-fidelity wireframes and layout specs from screen Markdown files.

3|Updated Jan 25, 2026

Search Tags:#markdown #ux-design #wireframes #state-driven #ui-layout-spec #decision-manifest #intent-driven-development

Ready to run

npx skills add https://github.com/kapilvirenahuja/garura --skill generate-wireframes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: generate-wireframes
Source: https://github.com/kapilvirenahuja/garura/tree/main/core/components/skills/generate-wireframes
Command: npx skills add https://github.com/kapilvirenahuja/garura --skill generate-wireframes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the gap between high-level screen definitions and buildable UI layout by producing low-fidelity, state-by-state wireframes and a detailed Layout Spec directly inside each screen Markdown file.

Core Features & Use Cases

Structured visual wireframes per state: Appends a non-visual, ASCII box-drawing ## Wireframe section that shows component placement and per-state layout structure.
Downstream-ready layout documentation: Generates an appended ## Layout Spec with concrete grid/region definitions, component inventory, per-state placement rules, and interaction patterns.
Decision tracking for orchestrated determinism: Writes a decision-manifest.yaml capturing inferred decisions (tiered by grounding) so the orchestrator can surface them after completion.

Quick Start

Use generate-wireframes in the design Stage 4 by providing the screens_dir, product_research_path, and decision_manifest_path from the calling agent’s JSON contract.

Frequently Asked Questions about generate-wireframes

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

FAQPage Schema

How do I generate wireframes from markdown screen specifications?▼

Generating wireframes from markdown screen specifications involves reading existing screen inventory files, resolving paths against the product base, and appending ASCII box-drawing wireframe sections with state-by-state component placement directly into the markdown.

What is a state-driven UI layout spec and when do I need it?▼

A state-driven UI layout spec defines concrete grid and region placements, component inventories, and interaction patterns for each enumerated state in a screen file. You need it when bridging high-level screen definitions to buildable UI layouts during the design stage.

Can I use markdown to create low-fidelity wireframes for multiple UI states?▼

Yes, markdown can be used to create low-fidelity wireframes by appending non-visual ASCII box-drawing sections that show component placement and per-state layout structure, transforming screen inventories into visual-first wireframe content.

How to document UI layout decisions for intent-driven development?▼

Documenting UI layout decisions for intent-driven development requires generating a decision-manifest.yaml file that captures inferred layout choices tiered by grounding, allowing orchestrators to surface resolved decisions after wireframe generation completes.

Does this wireframe generation approach work without external dependencies?▼

Yes, this wireframe generation approach works without external dependencies, relying solely on existing markdown screen files, product research paths for capability tradeoffs, and a decision manifest path passed from the calling agent's JSON contract.

What are the limitations of generating ASCII wireframes inside markdown files?▼

Limitations of generating ASCII wireframes inside markdown files include producing only low-fidelity, non-visual representations rather than rendered mockups, and requiring resolved input paths alongside product research data to properly infer layout rules and grid definitions.