wireframe-generator

Generates PNG wireframe images from YAML definitions in Markdown using Chakra UI and Playwright.

Updated Jan 8, 2026

Search Tags:#prototyping #yaml #design automation #wireframe #mockup #ui generation

Ready to run

npx skills add https://github.com/takemo101/compose-workflow --skill wireframe-generator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: wireframe-generator
Source: https://github.com/takemo101/compose-workflow/tree/main/.opencode/skill/wireframe-generator
Command: npx skills add https://github.com/takemo101/compose-workflow --skill wireframe-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires js-yaml, playwright, react, @vitejs/plugin-react, vite, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the creation of visual wireframes from structured YAML definitions, streamlining the design review process and accelerating UI prototyping.

Core Features & Use Cases

YAML to Wireframe Conversion: Automatically generates PNG images of UI mockups based on provided YAML specifications.
Supports Diverse UI Patterns: Handles various components like forms, tables, detail views, dashboards, modals, and more.
Use Case: Designers and developers can quickly visualize complex screen layouts by defining them in YAML, allowing for rapid iteration and feedback before full implementation.

Quick Start

Use the wireframe-generator skill to generate a wireframe image from the YAML definition in the file 'my-screen.md'.

Frequently Asked Questions about wireframe-generator

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

FAQPage Schema

How do I generate UI wireframes from YAML definitions?▼

To generate UI wireframes from YAML, you define UI patterns like forms, tables, dashboards, and modals in YAML embedded within Markdown files. The tool then renders these structured definitions into PNG mockup images using Chakra UI components and Playwright.

What UI patterns can I prototype using YAML to wireframe conversion?▼

YAML to wireframe conversion supports a wide array of UI patterns for prototyping. You can define forms, tables, detail views, dashboards, modals, and various layouts in your YAML definitions to generate visual mockups.

Can I use React and Chakra UI components to create mockups from Markdown?▼

Yes, this tool uses React and renders Chakra UI components to create mockups. It processes YAML definitions embedded in Markdown files and uses Playwright to capture the rendered output as PNG wireframe images.

Do I need Playwright installed to automate wireframe generation from YAML?▼

Yes, Playwright is a required dependency to automate wireframe generation from YAML. It functions by rendering the React and Chakra UI components defined in your YAML and capturing them as PNG images for design validation.

What is the best way to streamline UI prototyping and design review from structured data?▼

The best way to streamline UI prototyping from structured data is to define screen layouts in YAML within Markdown files. This approach translates structured data directly into visual mockups, accelerating iteration and feedback before full implementation.

Are there limitations when generating dashboard and modal mockups from YAML?▼

Generating dashboard and modal mockups from YAML requires defining structured specifications within Markdown files. While it supports diverse UI patterns, you are limited to rendering Chakra UI components and outputting PNG images for visual mockups.