What types of diagrams can I create?

The skill supports full page layouts, individual UI components, and step-by-step user flow diagrams to map out application logic.

Is it possible to customize the UI components?

Absolutely. You can generate specific components by name, use templates, and use the annotate feature to add custom details to any design.

Can I export the generated wireframes?

Yes, you can use the 'wireframe export' command to save your layouts and diagrams into multiple supported formats for external use.

Does this skill work while offline?

Yes, all processing is done locally within your workspace, allowing you to design and prototype without an internet connection.

Does this skill require external API keys?

No, the Wireframe skill functions locally and does not require external API calls for its core wireframing and diagramming features.

Wireframe UI Generator

Name: Wireframe UI Generator
Author: dvcrn

bydvcrn

•

Herramientas de Diseño

Generates ASCII-based wireframes, page layouts, and user flow diagrams to streamline the UI/UX design process within Claude Code.

The Wireframe skill is a powerful design utility that allows developers and designers to conceptualize user interfaces and application flows directly from the terminal. By generating ASCII and text-based representations of components and pages, it facilitates rapid prototyping and structural planning without the need for heavy design software. Users can create everything from simple button sketches to complex multi-step user flows, annotate designs for clarity, and export the results into various formats, making it an essential tool for early-stage development and technical documentation.

Características Principales

015 GitHub stars

02Annotate designs with specific implementation notes

03Export wireframes to multiple formats for documentation

04Create detailed user flow diagrams and logic maps

05Generate ASCII-based page layouts and component sketches

06Access built-in UI templates for rapid structural prototyping

Casos de Uso

01Visualizing complex user navigation logic for backend developers

02Creating text-based UI documentation that lives alongside your source code

03Drafting initial frontend layouts during the project discovery phase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dvcrn/openclaw-skills-marketplace wireframe

For use in Claude.ai and ChatGPT

Características Principales

015 GitHub stars

02Annotate designs with specific implementation notes

03Export wireframes to multiple formats for documentation

04Create detailed user flow diagrams and logic maps

05Generate ASCII-based page layouts and component sketches

06Access built-in UI templates for rapid structural prototyping

Casos de Uso

01Visualizing complex user navigation logic for backend developers

02Creating text-based UI documentation that lives alongside your source code

03Drafting initial frontend layouts during the project discovery phase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dvcrn/openclaw-skills-marketplace wireframe

For use in Claude.ai and ChatGPT