skills.rest
ramybarsoum
ramybarsoumCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

napkin-sketch

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

Updated Apr 10, 2026
Search Tags:#design#prototype#prd#annotations#ascii#wireframe#browser-capture
One-click install
npx skills add https://github.com/ramybarsoum/RStack-V0 --skill napkin-sketch-ramybarsoum
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: napkin-sketch
Source: https://github.com/ramybarsoum/RStack-V0/tree/main/skill/napkin-sketch
Command: npx skills add https://github.com/ramybarsoum/RStack-V0 --skill napkin-sketch-ramybarsoum

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rapidly communicates UI intent and design requirements when a full visual mockup or high-fidelity prototype is unnecessary, and documents existing interfaces to ensure design consistency during implementation.

Core Features & Use Cases

  • Create quick ASCII wireframes with annotated components, layout patterns, and state variations for PRDs and tickets.
  • Capture browser screenshots of existing UIs and extract design tokens and component guidance for matching new features.
  • Use cases include initial stakeholder alignment, developer handoff, and feeding wireframes into automated prototype generation workflows.

Quick Start

Sketch a settings page with tabs for Profile, Security, and Billing.

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 a PRD?▼

To create ASCII wireframes for a PRD, you provide structured answers describing the UI intent. The tool then generates annotated ASCII layouts with component patterns and state variations to communicate design requirements.

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

Yes, you can capture browser screenshots of existing UIs. The tool extracts design tokens and component guidance from the capture to ensure new features match your current design system.

What is the best way to communicate UI intent without a high-fidelity mockup?▼

ASCII wireframes are the best way to communicate UI intent without high-fidelity mockups. They rapidly sketch screen layouts and annotate components for initial stakeholder alignment and developer handoff.

Does this tool support state variations in wireframe prototypes?▼

Yes, the tool supports state variations in wireframe prototypes. It produces annotated ASCII layouts that include different state variations and optionally saves prototypes for downstream generation.

How do I extract design tokens from an existing interface?▼

You extract design tokens from an existing interface by using the browser capture feature. This automates a screenshot of the UI and extracts component guidance for design matching during implementation.

Related Skills

Explore More Design & Creative Skills→
horuz-aihoruz-ai
5

website-cloner

Clone websites into React components with Tailwind and motion via multi-agent QA workflow.

Official
Advanced
mvschwarzmvschwarz
60

ui-mockup

...

Community
Intermediate
webrix-aiwebrix-ai
1

design-handoff

Extract design specifications and implementation details from Figma handoff materials.

Official
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate