Rapid Iterative Design in Action

1. Rapid Iteration on Structure

Try 5 different layouts in minutes. Explore alternatives at conversation speed.

• Rapid iteration: Start ASCII → iterate at conversation speed
• "Move this", "Add that", "Try without" → quick changes
• Why ASCII? It's rapid AND both humans and AI read it natively
• Explore alternatives without commitment → structure first, pixels later

Example: Agent reads button spec

{
  "id": "submit-button",
  "type": "button",
  "props": { "text": "Submit" },
  "accessibility": {
    "role": "button",
    "keyboardShortcuts": ["Enter", "Space"]
  }
}
          

Agent understands: This is a button. It says "Submit". It responds to Enter and Space keys. Perfect clarity—no interpretation needed.

2. Progressive Fidelity

Don't make detailed decisions too early. Add fidelity as design solidifies.

• Level 1: ASCII layout (structure, hierarchy)
• Level 2: Component metadata (states, behavior, accessibility)
• Level 3: Design tokens (colors, spacing, typography)
• Level 4: Generate outputs (Figma, React)

Example: Login screen iteration

"Create a login screen"
              

┌──────────────────────┐
│  Welcome Back        │
│  ┌────────────────┐  │
│  │ Email          │  │
│  └────────────────┘  │
│  ┌────────────────┐  │
│  │ Password       │  │
│  └────────────────┘  │
│  [    Sign In    ]   │
└──────────────────────┘
              

Give feedback: "Add a forgot password link". Iterate until perfect.

3. AI-Assisted Rapid Iteration

Iterate through conversation. Why ASCII? It's rapid and universal—both humans AND AI read it natively.

• Rapid iteration: "Move this", "Add that", "Try without" → quick changes
• No vision models needed—AI reads ASCII perfectly
• Fast feedback loop through conversation
• Explore alternatives rapidly

Example: Component Derivation

primary-button (base)
  ↓ extends
large-button
small-button
danger-button

→ Start with base component
→ Derive variations from it
→ Document relationships
              

4. Review Before High-Fidelity

Validate at low-fidelity before investing in high-fidelity implementation.

• Iterate rapidly on .uxm specs at low-fidelity
• Review with stakeholders - fast feedback loop
• Add detail progressively - metadata, states, tokens
• Get it right BEFORE building in React or designing visually

Example: Progressive fidelity workflow

submit-button.uxm (your spec)

↓ Iterate rapidly in ASCII
↓ Add metadata and states
↓ Review with stakeholders
↓ Validate and refine

When ready, move to high-fidelity:
→ Build React component from spec
→ Design visually
→ Implement with confidence
          

Fast iteration at low-fidelity. Get it right. THEN invest in high-fidelity implementation.