Building with the GitHub Copilot SDK, Part 8: Sketch-First UI Design
In Part 7, I walked through the UX Design Tool we built into What is Done — one that spins up a full Angular + PrimeNG app in about 10 seconds. That tool is great when you need a working skeleton fast.
But sometimes you don’t need a full framework. Sometimes you just want to play.
Try a layout. Feel the spacing. Test a micro-interaction. Figure out whether something actually feels right before you commit to wiring it up properly.
That’s what the sketch-first option is for.
Why Sketchy UI Has Advantages
It might sound counterintuitive, but making a design look deliberately rough has real benefits.
When a UI looks polished, stakeholders and team members tend to focus on the wrong things — colors, fonts, button styles. When it looks like a sketch, people focus on what matters: structure, flow, and whether the layout actually works.
There’s also a psychological benefit for the builder. A rough UI gives you permission to experiment. You don’t feel like you’re breaking something expensive when you tear it apart and try again.
What We Built
The new sketch option in What is Done lives in the ux_starts/sketch folder. It uses Bootstrap with a sketchy visual style — designs that look intentionally hand-drawn.
This is a deliberate contrast to the Angular + PrimeNG starter from Part 7. That starter gives you a full framework with component libraries, npm dependencies, and a proper dev server. The sketch option is lighter:
- Plain HTML, CSS, and JavaScript
- Bootstrap for layout and components
- A sketchy visual theme that signals “this is a prototype”
No Angular. No build pipeline. Just open a file and start iterating.
When to Use Each
So when do you reach for the Angular + PrimeNG starter vs. the Bootstrap sketch option?
Use Angular + PrimeNG when:
- You want a production-ready scaffold to build from
- You need real component libraries (data grids, dropdowns, etc.)
- You’re building something you plan to keep
Use Bootstrap sketch when:
- You want to explore an idea without commitment
- You’re presenting to stakeholders who shouldn’t be reviewing font choices
- You want to move fast without a build step
Neither is better. They serve different moments in the design process.
What’s Next
This is still early. A couple of things I’ll likely add:
- More pages to the task UI default
- A sample authentication flow
Both would make the sketch option more useful as a full prototype starting point, rather than just a single-page playground.
Try It Yourself
Everything here is baked into What is Done. Feel free to check it out at https://github.com/chadmichel/chadscopilot.
If you have questions or want to talk through design approaches, find me on X at @chadmichel.
