Select Topic Area

General

Copilot Feature Area

Copilot Agent Mode

Body

Hi,

I've been heavily using Copilot's Agent mode to scaffold frontend code, particularly React which I'm relatively new to. It’s amazing, but I found that writing natural language prompts for complex UI layouts ("make a login page with a card in the middle and a dark button") was too flaky. Sometimes it hallucinates, totally misses constraints, or generates spaghetti CSS that doesn't match the theme I'm trying to implement.

I wanted a way to give Copilot strict "wireframes" it could actually understand. Figma is too token-heavy, paired with the fact LLM's don't have eyeballs so its doing its best guess of pixel math to work out how things should be arranged, and trying to explain intricate layout in English is equally cumbersome.
So I built an open-source intermediate representation which I've called the Markdown-UI DSL.

I packaged it as a Copilot Custom Skill that you can just drop into .github/skills/markdown-ui-agent/SKILL.md.

Once installed, you can write dumb-simple .ui.md files like this:

---
framework: Next.js + TailwindCSS + Shadcn UI
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 so well with Copilot Agent Mode:

• Deterministic Parsing: Because the syntax is incredibly rigid (||| COLUMN |||, [ ] Checkbox, |[ Tabs ]|), Copilot maps it perfectly.
• Design Isolation: You point the top YAML frontmatter at a single design-system.md file (where you list your Tailwind standards), and Copilot applies that theme globally to every .ui.md file you feed it.
• Two-Way Code Sync: This is my favourite part—if you update the wireframe spec in the .ui.md, the Copilot skill instructs it to automatically hunt down the frontend component mapped in the frontmatter (src/components/LoginForm.tsx) and update the React code to match your spec changes.
  If you are trying to implement true "Spec-Driven Development" (SDD) using Copilot agents, you might find this really useful.

I wrote up a quick 2-minute installation guide in the repo here: https://github.com/MegaByteMark/markdown-ui-dsl

Would love to know how you guys handle UI design prompting with Copilot and if you find this DSL useful!