amw-ascii-sketch

Generates three validated ASCII wireframe variants and iterates on feedback before HTML handoff.

Updated Jul 8, 2026
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-ascii-sketch-emasoft
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amw-ascii-sketch
Source: https://github.com/Emasoft/ai-maestro-webdesign/tree/main/skills/amw-ascii-sketch
Command: npx skills add https://github.com/Emasoft/ai-maestro-webdesign --skill amw-ascii-sketch-emasoft

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Iterating on webpage layout directly in HTML is slow and token-expensive, and a single guessed design often misses the mark. This Skill runs a plan-phase loop that proposes three ASCII wireframe variants per turn, letting you pick a direction cheaply before any HTML is written. ## Core Features & Use Cases - Three-variant generation: Emits Baseline, Advanced, and Experimental ASCII layouts per turn, each captioned with its design decision and trade-off. - Mandatory validation gate: Every variant passes through an ASCII validator script (with FIX hints on failure) before being shown, eliminating misaligned boxes and forbidden characters. - Two authoring modes: JSON-spec-driven rendering for structured diagrams (flowcharts, sequences, tables, layers) and hand-authored freeform mode for full-page wireframes. - Use Case: Ask for three ASCII wireframes of a landing page, request edits like "move the CTA right of the hero", iterate in chat, then approve with "ship it" to hand off the final sketch for HTML conversion. ## Quick Start Ask the assistant to propose three ASCII wireframe variants for your webpage layout using /amw-sketch, then give feedback until you are satisfied.

Frequently Asked Questions about amw-ascii-sketch

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

FAQPage Schema
How do I iterate on a webpage layout before writing HTML?▼

Use an ASCII wireframe loop: generate three layout variants in plain text, review them in chat, and request positional edits each turn. ASCII iteration costs a fraction of HTML iteration tokens and commits to no visual tokens like color or typography.

How to generate ASCII wireframes with correct box alignment?▼

Author a JSON spec with nodes and edges, render it with the amw-ascii-render.py script, then validate the output with amw-validate-ascii.py. The renderer computes widths and corners automatically, avoiding the alignment errors LLMs make when hand-drawing boxes.

Does ASCII sketching support flowcharts and sequence diagrams?▼

Yes, the JSON-driven mode supports four structured diagram types: flowcharts, sequence diagrams, tables, and layered architectures. Freeform hand-authored mode is reserved for unstructured full-page wireframes like dashboards and landing pages.

When should I use ASCII wireframes instead of HTML mockups?▼

Use ASCII during the plan phase when layout direction is undecided, since revisions are cheap and instant in chat. Switch to HTML only after explicit approval of a sketch, when typography, color, and component decisions need to be made.

Why does my ASCII diagram fail validation?▼

Validation fails on misaligned box borders, forbidden characters like variable-width triangles, long arrows, or emoji, and inconsistent column widths. Apply each FIX hint from the validator output and re-validate until it passes.