Building with the GitHub Copilot SDK, Part 7: A UX Design Tool That Actually Keeps Up
Every developer has been there. You have an idea for a layout, maybe a dashboard or a data-heavy form, and you just want to see it. Not tomorrow. Not after you wire up a backend. Right now. But the gap between the picture in your head and something running in a browser always seems to take longer than it should.
That gap is what kills momentum. You lose the thread of what you were trying to build while you wrestle with scaffolding, port conflicts, and mock data. The feedback loop that should be idea → code → see it live → tweak → repeat turns into idea → wait → configure → wait some more → give up and sketch on a whiteboard.
So in the latest What is Done update, we shipped a proper UX Design Tool that collapses that whole cycle. You go from “eh, maybe this layout” to a running Angular app in about 10 seconds. No joke.
This is part of the ongoing series where I walk through building with the GitHub Copilot SDK. If you are just joining, the earlier posts cover the SDK basics, pulling data from Outlook, and more. This one is all about making the design experience fast enough to match the speed your brain works at.
How It Actually Works
- Spin up a new UX Design and pick your stack. Our Angular + PrimeNG starter is stupidly good right now.
It dumps a full working skeleton into designs/, writes the designtype.json so the runner knows what it is dealing with, and quietly runs npm install in the background. Zero waiting around.
- The UX Design Runner is the real star. It gives you a split view:
- Left: Chat with an agent that already knows your entire file tree. No copy-pasting file paths. No explaining your folder structure. It just knows.
- Right: A live preview of the actual dev server.
MSW (Mock Service Worker) is baked in by default, so you can fake APIs and build UIs against realistic data without waiting for a backend to exist. That alone removes one of the biggest bottlenecks in early design work.
- The annoying dev-server problems are (mostly) handled.
- Port 7777 taken? It sniffs for zombie processes, kills them, and takes the port.
- Click Stop and it actually kills the whole process group. No more “port in use” roulette.
- Panels are resizable, so you can make the preview huge when you are judging spacing, or make the chat huge when you are rage-prompting the agent.
Why This Matters
Blank-page paralysis is a productivity killer, and we have all felt it. You stare at an empty project, knowing roughly what you want, but the friction of getting something visible on screen saps your energy before you even start.
This tool removes that friction. Wireframing a dashboard, tuning a gnarly data grid, prototyping a multi-step form — you get a working environment that moves at the speed your brain does. The feedback loop is tight enough that you can try five variations of a layout in the time it used to take to get one running.
Iterate. Stupid. Fast.
Seeing It in Action
In the image below, you can see me prompting the AI agent to update the name of the app. I asked it to change the app name to “Fast Todo,” and within seconds it updated the HTML title, environment configs, and UI text across the project. No hunting through files. No find-and-replace across six different config locations. Just tell the agent what you want and watch it happen in the live preview.
Try It Yourself
If you have been looking for a way to close the gap between design ideas and working code, this is it. Happy (actually fast) designing.
If you have questions, want to see a demo, or just want to argue about Angular vs. React, reach out to me on X at @chadmichel.
