一种轻量级、基于文本的线框标准，专为AI编码代理和规格驱动开发（SDD）设计。

⭐️ 如果你觉得这个项目对你的AI工具有用，请考虑给它一个星！ ⭐️

目录

• 问题
• 解决方案
• 安装与设置
• 推荐项目结构
• 工作流程
• 语法快速引用
• 设计主题
• 响应式设计
• 活动与互动
• 贡献
• 许可证

问题

视觉线框图（Figma、PNGs）标记较重，容易产生AI幻觉，且难以进行版本控制。自然语言提示通常缺乏确定性结构，导致界面生成不一致。

解决方案

该项目提供了严格的基于Markdown的中间表示（IR）。产品经理可以编写易于阅读的低保真度规格，AI代理则能以确定性准确度解析这些规范，生成React、Vue、HTML或其他任何UI代码。

安装与设置

为了获得最顺畅的体验，你应该将技能文件集成到你AI代理的具体指令架构中。

1.OpenClaw Hub（推荐）

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)