🔲 mockup.md

The Layout Control Language for Human-AI Collaboration

Current focus: slides

View on GitHub See Demo

Live Demo

See how different AI models render the same mockup

┌────────────────────────────────────────────────────────────────┐
│                                                                │
│                         ┌─┐                                    │
│                         │M│ ockup                              │
│                         └─┘                                    │
│                   The Markdown for Slides                      │
│                                                                │
│      ┌──────────┐      ┌──────────┐      ┌──────────┐         │
│      │   📝    │      │    🤖    │      │    🎨    │         │
│      │ Draft   │ ───→ │ Generate │ ───→ │  Image  │         │
│      └──────────┘      └──────────┘      └──────────┘         │
│                                                                │
└────────────────────────────────────────────────────────────────┘

> Cover slide with workflow
NotebookLLM rendered slide
GPT Output Coming Soon
Qwen Image Output Coming Soon

The Problem

When humans collaborate with AI on visual outputs, there's a control problem. Pure text prompts give inconsistent, unpredictable layouts. Precise formats (JSON, XML) are unreadable and hard to edit.

The missing layer: a human-readable, AI-parseable intermediate representation for layout — like ControlNet uses edge maps to guide image generation, but for structured visual content.

Why Mockup

👁️ Human-readable

ASCII art is visual and intuitive, anyone can sketch and edit

🤖 AI-parseable

Clear structure that any LLM can understand and generate

📝 Version-control friendly

Plain text diffs, easy to track changes

🎯 Intent over precision

Define what goes where, let AI handle the aesthetics

Design principles: WYSIWYG, Intent-Driven, AI-Native

Examples

Real-world slides converted to mockup format

📊

mockup-intro

mockup.md self-introduction
🏠

airbnb-pitch-deck

Classic 2009 startup pitch deck
🔄

raft-consensus

Distributed systems paper (Raft)
🤖

transformer

Attention mechanism explained
🗄️

spanner

Distributed database (Spanner)
📁

gfs

Google File System paper

Getting Started

Option 1: Copy-Paste (Any AI)

  1. Copy the entire mockup.md file
  2. Paste it into your AI chat (ChatGPT, Gemini, etc.)
  3. Either describe your slides or provide .mu content

Option 2: Claude Code CLI

  1. Install the mockup skill:
    2. mkdir -p ~/.claude/skills/mockup
curl -o ~/.claude/skills/mockup/SKILL.md https://raw.githubusercontent.com/simpx/mockup.md/main/.claude/skills/mockup/SKILL.md
curl -o ~/.claude/skills/mockup/mockup.md https://raw.githubusercontent.com/simpx/mockup.md/main/mockup.md
  2. Claude Code will auto-recognize .mu files