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

Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Huashu Design — Huashu Design · HTML-native design skill for Claude Code · Claude Code 里 HTML 原生的设计 skill · 高保真原型 / 幻灯片 / 动画 + 23.6k ★
Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★

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.