[Feature] Add Defensive CSS principles to improve UI resilience #85
Description
What problem does this solve?
In my experience, AI-generated UI almost always nails the “happy path” and then falls apart during QA.
The common issues are pretty predictable:
- long text breaking layouts
- images stretching or overflowing
- fixed heights causing content overflow
- elements colliding because spacing wasn’t considered
- components not holding up with real data
At this point, whenever I review AI-generated UI, I already expect to fix these manually.
Honestly, I usually end up going back to https://defensivecss.dev/tips/ as a checklist during QA — it’s kind of my go-to for catching all the small but important edge cases.
Proposed solution
I think it would be really valuable to bake “Defensive CSS” principles (Ahmad Shadeed) directly into the prompts.
The idea is not to add complexity, but to shift the default mindset from:
“make it look right”
to:
“make it hard to break”
Simple nudges could go a long way, like:
- avoid fixed heights unless absolutely necessary
- always account for long or unpredictable text
- make images resilient (
object-fit, aspect ratio awareness) - add safe spacing between flexible elements
- consider empty / loading / extreme states by default
Even something lightweight like:
“Apply defensive CSS principles. Assume content can be long, missing, or inconsistent, and ensure the layout remains stable.”
would probably eliminate a lot of the common UI bugs in first-pass output.
Provider(s) this applies to
- Cursor
- Claude Code
- Gemini CLI
- Codex CLI
- VS Code Copilot
- Kiro
- OpenCode
- All providers
Alternatives considered
Right now the workaround is just manual QA + fixing things after generation.
It works, but it’s repetitive and very predictable. Feels like low-hanging fruit that could be handled much earlier in the generation step.