skills.rest
garbray
garbrayCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ascii-ui-designer

Generate ASCII UI mockups and HTML/CSS/React code patterns with design tokens.

Updated Aug 23, 2026
Search Tags:#html#react#prototyping#design tokens#ui design#ascii#design-exploration
One-click install
npx skills add https://github.com/garbray/claude-config --skill ascii-ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ascii-ui-designer
Source: https://github.com/garbray/claude-config/tree/main/config/skills/ascii-ui-designer
Command: npx skills add https://github.com/garbray/claude-config --skill ascii-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps design teams rapidly prototype UI concepts in ASCII and produce implementation-ready patterns for later coding.

Core Features & Use Cases

  • Two-phase workflow: Start with ASCII design previews to define layout and information hierarchy, then move to code-generation patterns (HTML/CSS/React) and design tokens.
  • Stakeholder collaboration: Share ASCII mockups to solicit feedback before committing code.
  • Handoff readiness: Produce structured guidance (HTML structure, CSS approach, React components, tokens) to accelerate development.

Quick Start

Describe your UI idea to Claude and request ASCII mockups, iterate to refine structure, then request HTML/CSS/React code patterns and tokens for implementation.

Frequently Asked Questions about ascii-ui-designer

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

FAQPage Schema
How do I prototype UI designs in ASCII before writing React code?▼

You can prototype UI designs in ASCII by sketching layout and information hierarchy first, then iterating on the mockups before exporting HTML structure, CSS guidance, and React components for implementation.

What is the best way to share UI mockups with stakeholders for feedback?▼

Sharing ASCII mockups with stakeholders is an effective way to solicit feedback on UI concepts early, allowing you to refine structure and hierarchy before committing to HTML or React code.

Can I generate design tokens from ASCII UI sketches?▼

Yes, you can generate design tokens from ASCII UI sketches by finalizing the layout in the ASCII phase, then requesting the Phase 2 export which includes tokens alongside HTML and React code patterns.

How does an ASCII to React workflow handle design-to-code handoff?▼

An ASCII to React workflow handles design-to-code handoff by producing structured implementation guidance, including HTML structure, CSS approach, React components, and design tokens to accelerate developer integration.

Do I need any dependencies to use ASCII for UI design exploration?▼

No dependencies are required to use ASCII for UI design exploration, as the workflow operates by describing your UI idea to Claude, requesting ASCII mockups, and iterating without external libraries.

When should I not use ASCII prototyping for UI design?▼

ASCII prototyping for UI design is not suitable when you need high-fidelity visual styling, precise pixel-level layouts, or complex interactive states that cannot be represented by text-based characters.

Related Skills

Explore More Design & Creative Skills→
YamadaAoiYamadaAoi
5

sketch-split

Split Sketch Measure export artboards into a component plan with rect coordinates.

Community
Advanced
MuduiClawMuduiClaw
11

design-os

Generate specifications, design tokens, React components, and export packages for product design handoff.

Community
Advanced
joi-fairsharejoi-fairshare
1

design-implement-web

Generate token-compliant React and Next.js components from approved HTML mockups or PNG baselines.

Community
Advanced
zli5460zli5460
2

claude-design

Generate self-contained HTML prototypes with embedded CSS and JS.

Community
Intermediate