skills.rest
coalesce-labs
coalesce-labsOFFICIAL
Explore all skills by this author →
GitHub

napkin-sketch

Generate ASCII wireframes and browser-captured references for UI designs.

20|4|Updated Oct 4, 2025
Search Tags:#prototyping#ui-design#ascii#wireframe#napkin-sketch#design-matching#browser-capture
One-click install
npx skills add https://github.com/coalesce-labs/catalyst --skill napkin-sketch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: napkin-sketch
Source: https://github.com/coalesce-labs/catalyst/tree/main/plugins/pm/skills/napkin-sketch
Command: npx skills add https://github.com/coalesce-labs/catalyst --skill napkin-sketch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly communicate UI ideas and align design expectations by providing lightweight, shareable wireframes and direct browser-captured references.

Core Features & Use Cases

  • Generate concise ASCII wireframes to sketch layouts and component placement.
  • Capture screenshots of existing UI to match design systems and tokens.
  • Use in PRDs, tickets, or design reviews to keep discussions concrete.

Quick Start

Tell me the screen you want to sketch and choose between an ASCII wireframe or a browser-capture reference.

Frequently Asked Questions about napkin-sketch

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create ASCII wireframes for UI design quickly?▼

ASCII wireframes for UI design are generated from text prompts to sketch layouts and component placement. This provides lightweight, shareable wireframes for early ideation and product design reviews without external services.

Can I capture browser screenshots to match an existing design system?▼

Yes, browser capture functionality allows you to capture screenshots of existing UI. This matches design systems and tokens by providing direct browser-captured references with optional annotations for alignment.

What is the best way to communicate UI ideas during early product design?▼

The best way to communicate UI ideas is by generating concise ASCII wireframes and capturing browser-referenced layouts. This turns abstract concepts into concrete wireframes for PRDs, tickets, and design reviews.

Do I need external services or dependencies to generate layout grids?▼

No external services or dependencies are required to generate layout grids. The tool supports ASCII diagrams and simple layout grids natively, making it easy to sketch web apps, mobile screens, and dashboards.

How do I include wireframes in PRDs and design review tickets?▼

Include wireframes in PRDs and tickets by generating ASCII layouts and component placement sketches directly from your concepts. This keeps design discussions concrete and aligned across design-system reviews.

Does ASCII wireframing work for mobile screens and dashboards?▼

ASCII wireframing works for mobile screens and dashboards by sketching layouts and component placement. It supports simple layout grids applicable across web apps, mobile screens, and dashboard design reviews.

Related Skills

Explore More Design & Creative Skills→
ryan-nguyen-01ryan-nguyen-01
4

agent-designer

Translate BA user stories and SA architecture into UI design documentation.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
ramybarsoumramybarsoum

napkin-sketch

Generate annotated ASCII wireframes and capture browser screenshots for design matching.

Community
Intermediate
BENYEKHLEF-AnouarBENYEKHLEF-Anouar

designer-ui

Generate atomic-design UI assets and HTML mockups from wireframes.

Community
Advanced