How does this help during developer handoff?

It provides clear annotations, component specifications, and functional explanations that developers can use as a precise blueprint for frontend implementation.

Can this skill generate visual image files?

No, this skill generates structural wireframes using ASCII art and detailed text-based annotations to communicate layout, hierarchy, and functionality within the terminal.

Does it support complex UI states?

Yes, the skill includes best practices for documenting different interface states, including default, hover, active, and error states to ensure comprehensive design coverage.

Is this suitable for mobile app design?

Yes, the skill emphasizes mobile-first design principles and helps plan responsive layouts for various screen sizes, starting from the smallest viewport.

Wireframe Design & Information Architecture

Name: Wireframe Design & Information Architecture
Author: spjoshis

byspjoshis

•

デザインツール

Generates structured low and high-fidelity wireframes to visualize UI layouts and information hierarchy effectively.

This skill empowers Claude to act as a seasoned UX designer, facilitating early-stage design exploration and stakeholder alignment through detailed wireframing. It provides guidance on creating information architectures, layout planning, and clear annotations to bridge the gap between conceptual design and developer handoff. By following industry best practices like mobile-first design and iterative prototyping, it helps teams validate user experiences and structural logic before moving into high-fidelity production.

主な機能

01Detailed UI component annotations and specifications

02Mobile-first design strategy implementation

031 GitHub stars

04Low-fidelity ASCII wireframe generation

05Information architecture and layout planning guidance

06State-specific design documentation for hover, active, and error states

ユースケース

01Rapidly sketching UI concepts for early stakeholder feedback

02Creating technical documentation for frontend developer handoffs

03Mapping out complex user flows and information hierarchies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add spjoshis/claude-code-plugins wireframing

For use in Claude.ai and ChatGPT

Download Skill