How does Browser Capture help with design matching?

It uses browser automation to take screenshots of existing components, analyzes their design tokens (colors, spacing, typography), and creates a 'Match This' specification for new features.

Does this skill generate production-ready CSS or HTML?

No, Napkin Sketch is a wireframing tool. It generates ASCII representations and design specs that serve as a blueprint for implementation or as input for other AI generation tools.

Where are my wireframes stored?

Wireframes are delivered inline and automatically saved as markdown files to 'thoughts/shared/product/prototypes/' within your workspace.

Can I use this for complex application layouts?

Yes, it supports single-column, dashboard (two-column), and complex three-column layouts with specific sections for navigation, sidebars, and main content.

Napkin Sketch UI Designer

Name: Napkin Sketch UI Designer
Author: coalesce-labs

bycoalesce-labs

•

Herramientas de Diseño

Generates rapid ASCII wireframes and captures existing browser UI to bridge the gap between initial concepts and frontend implementation.

The Napkin Sketch skill enables developers and product managers to visualize UI concepts directly within the Claude Code environment. By offering two distinct modes—ASCII wireframing for new ideas and browser capture for existing design systems—it allows for rapid iteration on layouts, component placement, and interface states. This skill is particularly useful for establishing stakeholder alignment, illustrating PRDs, and providing structured visual context before moving into high-fidelity design or production-level coding.

Características Principales

019 GitHub stars

02Automatic file persistence to structured project folders for easy sharing

03Pre-defined library of UI components including buttons, cards, and tables

04Rapid ASCII wireframe generation for instant layout visualization

05Browser capture mode to reference and match existing UI patterns

06Interface state documentation for loading, empty, and error views

Casos de Uso

01Documenting existing design tokens and patterns to ensure frontend consistency

02Creating quick UI mockups for technical scoping and stakeholder alignment

03Illustrating feature requirements in PRDs and Jira tickets without high-fidelity tools

Características Principales

019 GitHub stars

02Automatic file persistence to structured project folders for easy sharing

03Pre-defined library of UI components including buttons, cards, and tables

04Rapid ASCII wireframe generation for instant layout visualization

05Browser capture mode to reference and match existing UI patterns

06Interface state documentation for loading, empty, and error views

Casos de Uso

01Documenting existing design tokens and patterns to ensure frontend consistency

02Creating quick UI mockups for technical scoping and stakeholder alignment

03Illustrating feature requirements in PRDs and Jira tickets without high-fidelity tools