skills.rest
junchenghuo
junchenghuoCOMMUNITY
Explore all skills by this author →
GitHub

product-wireframe-mockup

Generate HTML wireframes and Mermaid flowcharts for web pages.

3|Updated Mar 11, 2026
Search Tags:#flowchart#prototype#ui design#png generation#wireframe#mockup
One-click install
npx skills add https://github.com/junchenghuo/openclaw-biz-agent --skill product-wireframe-mockup
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
rhpdsrhpds

06-playwright-mcp

Configure and validate the Playwright MCP server for Claude Code browser automation.

Official
Advanced
gooseworks-aigooseworks-ai
1.1k

create-workflow-diagram

Convert plain-text workflow descriptions into HTML diagrams with SVG arrows and export PNGs.

Official
Advanced
mcclowesmcclowes
4

mermaid-diagrams

Generate Mermaid diagrams for code structure and execution flow.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate