product-wireframe-mockup

Name: product-wireframe-mockup
Availability: InStock
Author: junchenghuo

Generate HTML wireframes and Mermaid flowcharts for web pages.

3|Updated Mar 11, 2026

Search Tags:#flowchart #prototype #ui design #png generation #wireframe #mockup

Ready to run

npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill product-wireframe-mockup

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: product-wireframe-mockup
Source: https://github.com/junchenghuo/openclaw-biz-agent/tree/main/leader/.agents/skills/product-wireframe-mockup
Command: npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill product-wireframe-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

This Skill helps quickly visualize web page layouts and user flows by generating simple wireframes and flowcharts without requiring complex design tools or paid services.

Core Features & Use Cases

Wireframe Generation: Creates basic wireframes for common web page types like login screens, forms, and dashboards.
Flowchart Creation: Generates Mermaid flowcharts directly from Markdown descriptions.
Image Output: Optionally screenshots the generated wireframe to a PNG image using Playwright.
Use Case: You need to quickly show a stakeholder a basic layout for a new login page. This Skill can generate a simple HTML wireframe and a PNG screenshot of it.

Quick Start

Generate a wireframe for a login page with fields for username and password, then screenshot it to wireframe.png.

Frequently Asked Questions about product-wireframe-mockup

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

FAQPage Schema

How do I generate a simple wireframe for a web page layout?▼

You can generate a wireframe by describing the web page layout, which produces a basic HTML structure. It supports common UI elements like login forms and dashboards to help you quickly visualize page designs.

Can I export a generated wireframe to a PNG image?▼

Yes, you can export a generated wireframe to a PNG image. The tool optionally screenshots the generated HTML wireframe using Playwright to produce the final PNG file for easy sharing.

How do I create a flowchart from a Markdown description?▼

You can create a flowchart by providing a Markdown description of your process. The tool generates Mermaid flowcharts directly from the text, allowing you to visualize user flows quickly without dedicated diagramming software.

Do I need Playwright installed to generate wireframes?▼

You do not need Playwright installed to generate the HTML wireframe itself, but it is a required dependency for the optional image output. Playwright handles screenshotting the generated HTML wireframe into a PNG file.

What is the best way to quickly visualize a login screen layout for a stakeholder?▼

The best way to quickly visualize a login screen layout is to generate a simple wireframe. This tool creates basic HTML layouts for common page types and can screenshot them to a PNG image for immediate stakeholder review.

What types of UI elements are supported for wireframe generation?▼

Supported UI elements for wireframe generation include common web page components like login forms and dashboards. The tool focuses on creating basic structural layouts to help you visualize the overall page design.