skills.rest
pisithrps
pisithrpsCOMMUNITY
Explore all skills by this author →
𝕏@pisithrpsGitHub

napkin-sketch

Generate ASCII wireframes or capture browser UI to match design systems.

Updated Mar 11, 2026
Search Tags:#design-system#ascii#wireframe#annotation#design-ideation#ui-prototyping#browser-capture
One-click install
npx skills add https://github.com/pisithrps/yapzee --skill napkin-sketch-pisithrps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: napkin-sketch
Source: https://github.com/pisithrps/yapzee/tree/main/.claude/skills/napkin-sketch
Command: npx skills add https://github.com/pisithrps/yapzee --skill napkin-sketch-pisithrps

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Quickly generate visual design concepts as ASCII wireframes or capture existing UI from a browser to align with design systems, speeding up early UX exploration.

Core Features & Use Cases

  • Mode 1: ASCII Wireframe for new UI concepts to communicate layout and interactions
  • Mode 2: Browser Capture to reference and match existing patterns in the product
  • Output is suitable for PRDs, design reviews, and developer handoffs, with optional annotations and state variations

Quick Start

Tell me the screen or feature you want to sketch, then choose ASCII wireframe or browser capture to generate the output.

Frequently Asked Questions about napkin-sketch

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

FAQPage Schema
How do I generate ASCII wireframes for UI prototyping?▼

You can generate ASCII wireframes by describing your screen or feature to produce quick UI layouts for early design exploration. This creates text-based visual concepts to communicate layout, interactions, and state variations without needing a graphical design tool.

Can I capture existing UI from a browser to match a design system?▼

Yes, the browser capture mode references existing UI patterns to align with your design system. This allows you to match current product interfaces and generate accurate wireframes for stakeholder reviews or developer handoffs.

What is ASCII wireframe mode used for in design ideation?▼

ASCII wireframe mode is used for rapid design ideation to communicate UI layout and interactions. It outputs text-based sketches suitable for PRD artifacts, design reviews, and handoff materials for web and mobile interfaces.

How do I add annotations and state variations to wireframes?▼

You can add annotations and state variations to wireframes by specifying these requirements when generating the sketch. This guides designers and developers by providing clear layout definitions and interaction states directly within the output.

Do I need any design software or dependencies to create UI sketches?▼

No dependencies or external design software are required to create UI sketches. The skill operates independently to generate ASCII wireframes and browser captures directly within your current environment.

What is the best way to document UI layouts for PRD artifacts?▼

The best way to document UI layouts for PRD artifacts is generating ASCII wireframes with clear layout definitions and optional annotations. This provides lightweight, easily readable visual references for stakeholder reviews and developer handoffs.

Related Skills

Explore More Design & Creative Skills→
cuongtl1992cuongtl1992
10

prd-to-mockup

Parse Lean PRD Screen States into a single navigable HTML wireframe.

Community
Intermediate
Yukine5377Yukine5377

po-uiux-design

Coordinate UI/UX review and handoff documentation between designers and developers.

Community
Intermediate
Zangetsu101Zangetsu101
1

prototype

Create interactive terminal and UI prototypes for validating design and logic.

Community
Advanced
ramybarsoumramybarsoum

napkin-sketch

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

Community
Intermediate