Markdown UI DSL for AI Agents

A lightweight, text-based wireframing standard designed specifically for AI coding agents and Spec-Driven Development (SDD).

⭐️ If you find this project useful for your AI tooling, please consider giving it a star! ⭐️

Table of Contents

• The Problem
• The Solution
• Installation & Setup
• Recommended Project Structure
• Workflow
• Syntax Quick Reference
• Design Theming
• Responsive Design
• Events & Interactivity
• Contributing
• License

The Problem

Visual wireframes (Figma, PNGs) are token-heavy, prone to AI hallucination, and hard to version control. Natural language prompts often lack deterministic structure, leading to inconsistent UI generation.

The Solution

This project provides a strict Markdown-based Intermediate Representation (IR). Product managers can write easily readable low-fidelity specs, and AI agents can parse them with deterministic accuracy to generate React, Vue, HTML, or any other UI code.

Installation & Setup

For the smoothest experience, you should integrate the skill file into your AI agent’s specific instruction architecture.

1. OpenClaw Hub (Recommended)

If your agent supports OpenClaw registry integration, you can install this skill directly via the marketplace. Visit the Markdown-UI DSL page on OpenClaw Hub for one-click installation or use their CLI:

claw install markdown-ui-dsl

2. GitHub Copilot (Agent Mode)

Copilot Agent mode works best when using its explicit Skill architecture. Set it up using these steps:

1. Initialise your copilot-instructions.md by asking Copilot to setup your project for AI agent assistance, or manually create .github/copilot-instructions.md.
2. Create a folder for the skill and download the DSL instructions:

mkdir -p .github/skills/markdown-ui-dsl
curl -o .github/skills/markdown-ui-dsl/SKILL.md https://raw.githubusercontent.com/MegaByteMark/markdown-ui-dsl/main/skills/markdown-ui-dsl/SKILL.md

3. Open your .github/copilot-instructions.md file and add the following mapping:

## Skills
- For interpreting `ui.md` files, use the `markdown-ui-dsl` skill to generate components based on the specifications provided.

2. Cursor / Roo Code / Cline

For agents that use single flat rules files, you can append the skill directly:

# For Cursor (picks up from .cursorrules)