How does this help with AI-assisted coding?

Providing a clear wireframe helps Claude understand the intended structure and logic, leading to more accurate and organized code generation during the implementation phase.

Where are the wireframes stored?

They are typically stored in a WIREFRAME.md file within the specific component or page directory for easy reference during implementation.

Does this skill support responsive design?

Yes, it follows a mobile-first methodology, providing specific templates for mobile (375px), tablet (768px), and desktop (1024px+) viewports.

Why use ASCII wireframes instead of design tools like Figma?

ASCII wireframes allow developers to stay within their terminal or IDE, providing a fast, version-controlled way to align on structure without the overhead of high-fidelity design tools.

What information is included besides the visual layout?

It includes interaction documentation, data requirements (props/state), accessibility notes, and various UI states like loading, empty, or error views.

UI Wireframing & Layout Planning

Name: UI Wireframing & Layout Planning
Author: constellos

byconstellos

•

Herramientas de Diseño

Generates mobile-first ASCII wireframes to plan UI structure and interaction patterns before writing code.

This skill facilitates a structured frontend development workflow by providing a methodology for creating ASCII-based wireframes. It helps developers visualize component hierarchies, responsive layouts, and interaction patterns directly within the codebase using WIREFRAME.md files. By aligning on UI structure, accessibility, and data requirements before implementation, it reduces refactoring time and ensures a consistent mobile-first design approach across mobile, tablet, and desktop viewports.

Características Principales

015 GitHub stars

02Standardized WIREFRAME.md documentation templates

03Component-level and page-level layout visualization

04Multi-breakpoint layout planning (375px, 768px, 1024px+)

05Mobile-first ASCII wireframe generation methodology

06Detailed interaction and data requirement annotation

Casos de Uso

01Documenting complex UI interactions and data flow for team alignment

02Sketching component structures to identify necessary props and state early

03Planning a responsive dashboard layout before implementing React components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add constellos/claude-code ui-wireframing

For use in Claude.ai and ChatGPT

Download Skill