I built this after getting incredibly frustrated with how LLMs handle UI scaffolding in tools like Cursor and Copilot.
If you ask an agent to "build a dashboard," you get a different result every time. If you write a massive, descriptive prompt detailing every padding and flex-box property, you waste time. Figma screenshots work sometimes (with vision models), but they are token-heavy, slow, and impossible to git commit as text.
I wanted a deterministic Intermediate Representation (IR) for UI that both humans and LLMs could read effortlessly. So, I built a lightweight Markdown DSL.
Instead of a paragraph of vague text, you just give your workspace a .ui.md file that looks like this:
||| COLUMN |||
::: CARD :::
# Welcome Back
[ text: Email Address ]
[ text: Password ]
[ Login ](#login)
--- END ---
--- END ---
```
Why this works better:
It's deterministic: LLMs inherently understand tree mapping and markdown. ||| COLUMN ||| maps to standard flex-col logic every single time without hallucinating.
Two-Way Code Sync: Because of the component: frontmatter, the AI knows exactly which file this wireframe maps to. If a PM or dev updates the text in the .ui.md file (e.g., adding a checkbox), you just hit Cmd+I / Copilot Chat and say "Sync changes", and it automatically hunts down the React/Vue file and reconstructs the component.
True separation of concerns: The structural wireframe is entirely isolated from the design system/styling rules.
It's essentially Spec-Driven Development taking advantage of native LLM text-parsing strengths.
It’s just a set of instructions/skills you can drop into your .github/copilot-instructions.md or .cursorrules.
Would love to hear your thoughts on this approach, or if any of you have found better ways to enforce strict layout constraints on coding agents!
MegaByteMark•2h ago
I built this after getting incredibly frustrated with how LLMs handle UI scaffolding in tools like Cursor and Copilot.
If you ask an agent to "build a dashboard," you get a different result every time. If you write a massive, descriptive prompt detailing every padding and flex-box property, you waste time. Figma screenshots work sometimes (with vision models), but they are token-heavy, slow, and impossible to git commit as text.
I wanted a deterministic Intermediate Representation (IR) for UI that both humans and LLMs could read effortlessly. So, I built a lightweight Markdown DSL.
Instead of a paragraph of vague text, you just give your workspace a .ui.md file that looks like this:
```markdown --- framework: React + Tailwind CSS theme: ./design-system.md component: src/components/LoginForm.tsx ---
||| COLUMN ||| ::: CARD ::: # Welcome Back [ text: Email Address ] [ text: Password ] [ Login ](#login) --- END --- --- END --- ```
Why this works better:
It's deterministic: LLMs inherently understand tree mapping and markdown. ||| COLUMN ||| maps to standard flex-col logic every single time without hallucinating.
Two-Way Code Sync: Because of the component: frontmatter, the AI knows exactly which file this wireframe maps to. If a PM or dev updates the text in the .ui.md file (e.g., adding a checkbox), you just hit Cmd+I / Copilot Chat and say "Sync changes", and it automatically hunts down the React/Vue file and reconstructs the component.
True separation of concerns: The structural wireframe is entirely isolated from the design system/styling rules.
It's essentially Spec-Driven Development taking advantage of native LLM text-parsing strengths.
It’s just a set of instructions/skills you can drop into your .github/copilot-instructions.md or .cursorrules.
Would love to hear your thoughts on this approach, or if any of you have found better ways to enforce strict layout constraints on coding agents!