Official Verified

wireframe

Create wireframes and user flows. Use when sketching page layouts in ASCII/SVG, mapping flows, or exporting to HTML.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/ckchzh/wireframe

Download Source Code (.zip)

Wireframe

Generate wireframes, component sketches, and user flow diagrams for UI design.

Commands

page

Generate a full-page wireframe in ASCII or SVG format.

bash scripts/script.sh page --sections "header,hero,features,cta,footer" --format svg --output wireframe.svg

component

Generate a wireframe for a single UI component (form, card, nav, table, etc).

bash scripts/script.sh component --type card --fields "image,title,text,button" --output card.svg

flow

Generate a user flow diagram showing page transitions and decision points.

bash scripts/script.sh flow --steps "login,dashboard,settings,logout" --decisions "auth:yes/no" --output flow.svg

annotate

Add numbered annotations and notes to an existing SVG wireframe.

bash scripts/script.sh annotate --input wireframe.svg --notes "1:Logo area,2:Search bar,3:Main content" --output annotated.svg

export

Export a wireframe to standalone HTML with inline styles.

bash scripts/script.sh export --input wireframe.svg --format html --output wireframe.html

template

Generate a wireframe from a built-in page template (landing, dashboard, blog, ecommerce, etc).

bash scripts/script.sh template --name landing --format ascii

Output

page: ASCII wireframe to stdout or SVG file to disk
component: SVG file with component wireframe
flow: SVG flowchart with boxes and arrows
annotate: SVG file with annotation markers and legend
export: Standalone HTML file with embedded wireframe
template: Wireframe output in chosen format

Requirements

bash 4+

Feedback

https://bytesagain.com/feedback/

Read Full Documentation on GitHub

Metadata

Author@ckchzh

Stars3562

Updated2026-03-29

View Author Profile

AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-ckchzh-wireframe": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Related Skills

designer-intelligence-station

Designer intelligence collection tool. Monitors 46 public sources (AI/hardware/mobile/design), dynamic quality-based filtering v2.1.8, generates structured daily/weekly reports. All data stored locally.

15217172098 4473

douyin-cover-builder

这是一个面向中文创作者的 OpenClaw Skill，输入主题与人物气质后，会输出可直接用于生图模型的高质量提示词与创意说明。

0x00000003 4473

SeedFlip Dashboard Theme

Re-theme your OpenClaw dashboard with 104 curated design seeds from SeedFlip. Fonts, colors, shadows, radii. One command, instant transformation.

bockenstette1 4190

webchat-audio-notifications

Add browser audio notifications to Moltbot/Clawdbot webchat with 5 intensity levels - from whisper to impossible-to-miss (only when tab is backgrounded).

brokemac79 4190

ChartMaker

Visualize data with bar charts, sparklines, and progress bars in terminal. Use when plotting metrics, rendering inline charts, or transforming data.

bytesagain1 4126