product-wireframe-mockup
CommunityGenerate simple wireframes as images
Authorjunchenghuo
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
playwright
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: product-wireframe-mockup Download link: https://github.com/junchenghuo/openclaw-biz-agent/archive/main.zip#product-wireframe-mockup Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.