Show HN: A Markdown DSL to stop AI agents from hallucinating UI code

Hi HN,

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!