Content-First Text-Based Wireframe

The Problem with Visual-First Wireframing

Traditional tools like Figma and Penpot prioritize visual layout before content and structure. This approach:

Excludes screen reader users from the design process entirely
Makes accessibility an afterthought instead of a foundation
Creates barriers for non-designers to participate in early design decisions
Focuses on pixels before meaning

The Text-First Advantage

This tool inverts that paradigm:

Shift-Left Accessibility: Screen reader users can participate in wireframing and co-design
Semantic Structure First: Define what things ARE before how they LOOK
Inclusive Collaboration: Anyone comfortable with text documents can contribute
Content-First Thinking: Forces clarity about information architecture and user flows
LLM-Friendly: Structured text is perfect for AI-assisted design validation and testing

Comparison

Aspect	Visual-First (Figma/Penpot)	Text-First (This Tool)
First Question	"Where should this go?"	"What is this?"
Screen Reader Access	Cannot use wireframes	Fully accessible wireframes
Collaboration	Requires design tool knowledge	Anyone can read/edit text
Semantic Structure	Added later (if at all)	Required from the start
LLM Testing	Difficult to extract structure	Clean, parseable format

Using Layout Patterns for LLMs

The new Layout patterns help you convey visual structure in a way LLMs can understand:

[2 Columns] - Indicates side-by-side content areas
[Sidebar] - Shows primary/secondary content hierarchy
[Card/Block] - Groups related content visually
--- - Section dividers for visual separation

When you "Copy for LLM", these layout hints help AI understand not just what content exists, but how it's organized spatially—making it easier to test user flows, validate information architecture, and simulate screen reader navigation.

The Workflow

Design in text: Build your wireframe using semantic patterns
Copy for LLM: Get your design with full context included
Test with AI agents: Ask LLMs to act as screen reader users, cognitive accessibility auditors, or service designers
Iterate quickly: Fix issues in text before they become expensive to fix in code

Text is the most inclusive medium. By starting with text, you ensure everyone—including people with disabilities—can participate in creating better experiences.

Open Source Project

This tool is open source and freely available. The source code is hosted on GitHub where anyone can view it, report issues, or contribute improvements.

View the source code on GitHub →