skills.rest
TimothyNguyen04
TimothyNguyen04COMMUNITY
Explore all skills by this author →
GitHub

napkin-sketch

Generate ASCII wireframes and capture browser UI for design matching.

Updated Aug 23, 2026
Search Tags:#design system#prototyping#wireframing#ui design#ux#ascii art
One-click install
npx skills add https://github.com/TimothyNguyen04/pmos --skill napkin-sketch-timothynguyen04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: napkin-sketch
Source: https://github.com/TimothyNguyen04/pmos/tree/main/PM-OS/.claude/skills/napkin-sketch
Command: npx skills add https://github.com/TimothyNguyen04/pmos --skill napkin-sketch-timothynguyen04

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps quickly visualize user interfaces through ASCII wireframes or by capturing existing UI patterns, streamlining the early stages of design and development.

Core Features & Use Cases

  • ASCII Wireframing: Generate text-based wireframes for new UI concepts.
  • Browser Capture: Screenshot and analyze existing UI elements to match design systems.
  • Use Case: Quickly sketch out a new settings page layout with tabs, or capture the exact style of a company's existing button component to ensure consistency in a new feature.

Quick Start

Create an ASCII wireframe for a user profile page with sections for personal info and recent activity.

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

You can create ASCII wireframes by generating text-based layouts using defined symbols to represent UI components and states. This approach streamlines early design stages by visually communicating structure without needing graphical software.

Can I capture and analyze existing browser UI for design matching?▼

Browser capture allows you to screenshot and analyze existing UI elements from a browser. This extracts design patterns to match existing components, ensuring consistency when replicating styles like a company's button component for new features.

What is the best way to match existing UI patterns from screenshots?▼

Matching existing UI patterns involves capturing browser screenshots of the target interface and analyzing their component styles. This ensures new features align with established design systems by replicating exact visual patterns from the captured reference.

Do I need any design software to generate text-based wireframes?▼

No design software is required to generate text-based wireframes. You can sketch UI layouts and define component structures directly using ASCII art characters, making it a dependency-free approach for rapid prototyping.

How does ASCII art help with UX wireframing and prototyping?▼

ASCII art accelerates UX wireframing by enabling rapid, text-based visualization of interface layouts and component states. It allows designers to quickly iterate on structural concepts and user flows before committing to high-fidelity graphics.

Related Skills

Explore More Design & Creative Skills→
pisithrpspisithrps

napkin-sketch

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

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate
gustavscirulisgustavscirulis
114

ux-spec

Generate UI/UX specifications with wireframes and design systems from PRDs.

Community
Advanced
yutnayutna
2

ui-ascii-wireframe

Convert feature specifications into ASCII wireframes for enterprise web UIs.

Community
Intermediate