# UI Wireframe Diagrams
> Generate professional UI wireframe mockups showing screen layouts and components.
- Skill: `tools-only/ui-wireframe-diagrams-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add tools-only/ui-wireframe-diagrams-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tools-only/ui-wireframe-diagrams-2/raw
- Safety review: pending (external: skill-scanner WARNING, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tools-only (https://skillmd.com/u/tools-only)
- Updated: 2026-09-29
- Page: https://skillmd.com/skills/tools-only/ui-wireframe-diagrams-2
---
# UI Wireframe Diagrams
Generate professional UI wireframe mockups showing screen layouts and components.
## Approach 1: HTML/CSS to PNG (Recommended)
Generate HTML wireframes and convert to PNG using a headless browser.
```python
import subprocess
from pathlib import Path
def create_wireframe_html(title, components, filename="wireframe"):
"""
Create a wireframe as HTML, then convert to PNG.
components: list of dicts describing UI elements
"""
html = f'''
{title}
{generate_components_html(components)}
'''
# Save HTML
html_path = Path(f"{filename}.html")
html_path.write_text(html)
# Convert to PNG using wkhtmltoimage or similar
# Alternative: use playwright, puppeteer, or selenium
try:
subprocess.run([
'wkhtmltoimage', '--quality', '90',
str(html_path), f"{filename}.png"
], check=True, capture_output=True)
print(f"Generated: {filename}.png")
except FileNotFoundError:
print(f"Generated: {filename}.html (install wkhtmltoimage for PNG conversion)")
return html
def generate_components_html(components):
"""Generate HTML for wireframe components."""
html = ""
for comp in components:
comp_type = comp.get('type')
if comp_type == 'header':
nav_items = "".join([f'
{item}
'
for item in comp.get('nav', [])])
html += f'''
{comp.get('title', 'Application')}
{nav_items}
'''
elif comp_type == 'sidebar':
items = ""
for item in comp.get('items', []):
active = ' active' if item.get('active') else ''
items += f'
{item.get("label", "")}
'
html += f'
{items}
'
elif comp_type == 'main-start':
html += '
'
elif comp_type == 'main-end':
html += '
'
elif comp_type == 'breadcrumb':
crumbs = " › ".join(comp.get('items', []))
html += f'
{crumbs}
'
elif comp_type == 'card':
content = comp.get('content', '')
if comp.get('placeholder_lines'):
content = "".join([
f''
for line in comp.get('placeholder_lines')
])
html += f'''
{comp.get('title', 'Card')}
{content}
'''
elif comp_type == 'stats':
stats_html = ""
for stat in comp.get('items', []):
stats_html += f'''