humbleteam

Ascii Wireframes — Design skill for Claude Code

Design community

ASCII wireframes: sketch 3 layout hypotheses before Figma or HTML.

How to install Ascii Wireframes

This entry records only its repository, not the path inside it, so there is no exact command to give. Open humbleteam/ascii-wireframes and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Ascii Wireframes does

ASCII wireframes: sketch 3 layout hypotheses before Figma or HTML. A Claude Code skill for design teams.

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Pack — Bundle every designlang output (DTCG tokens, Tailwind, shadcn, Figma vars, motion, anatomy, Storybook, prompts 3.6k ★
Part 3 — Technical Design Document Generator — I'll help you create a Technical Design Document for your MVP 2.1k ★

README

ASCII wireframes

**Sketch three genuinely different layout hypotheses as ASCII wireframes before opening Figma or writing a line of HTML - built for design teams who want to compare directions, not commit to one too early.**

[![CI](https://img.shields.io/github/actions/workflow/status/humbleteam/ascii-wireframes/validate.yml?branch=main&style=for-the-badge&logo=github&label=CI)](https://github.com/humbleteam/ascii-wireframes/actions/workflows/validate.yml) [![GitHub stars](https://img.shields.io/github/stars/humbleteam/ascii-wireframes?style=for-the-badge&logo=github&color=181717)](https://github.com/humbleteam/ascii-wireframes/stargazers) [![Last commit](https://img.shields.io/github/last-commit/humbleteam/ascii-wireframes?style=for-the-badge&color=339933)](https://github.com/humbleteam/ascii-wireframes/commits/main) [![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE) [![Claude Code](https://img.shields.io/badge/Claude_Code-skill-D97757?style=for-the-badge&logo=anthropic&logoColor=white)](https://github.com/humbleteam/ascii-wireframes/blob/main/SKILL.md)

Explore three layout directions for a screen in plain text, compare them side by side, and pick one before any hi-fi work starts. The skill takes a screen name and its primary job as input, and returns three monospace ASCII wireframes, each answering a different version of "what does this screen lead with" - not three palette variations of the same layout. A fixed legend keeps buttons, inputs, and active states readable the same way across all three.