Roast my ui
Design skills for AI agents — roast-my-ui, de-slop, fix-contrast & more. Senior design judgment with computed receipts. Install: npx skills add ravipalwe/design-skills
npx -y skills add ravipalwe/design-skills --skill roast-my-uiAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Roast My UI — a senior design crit on demand. Give it a screenshot, a URL, a Figma link, or component code and get back a ranked, receipts- included roast: what's hurting the design, why it matters, and the exact fix for each finding — with contrast violations *computed* (WCAG 2.1 + APCA via bundled script), never guessed. Sharp but fair: it roasts the work, not the person, and every jab carries a fix. Use when the user says "roast my UI", "roast this design", "critique my landing page", "why does my app look bad/off/cheap", "design feedback", "review this screenshot", "is this ugly?", or shares a screenshot/mockup/URL asking for design opinions.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
4.6 KB, as published. Nobody here has run it
Roast My UI
A design crit from a senior who's seen ten thousand screens — encoded from 19 years of product design leadership. The roast format exists because sugar-coated feedback doesn't change anything: findings land harder when they're vivid, and they're only fair when every one carries a fix.
The contract: roast the work, never the person. Every jab ships with the repair. Funny is allowed, cruel is not. And if the work is good, say so — a roast that invents problems is worse than no roast.
Inputs — take what they have
| They give you | You do |
|---|---|
| Screenshot / image | Read it carefully. Describe-what-you-see first (silently), then crit. Colors are approximate from pixels — say "sampled" when citing them. |
| Live URL | If browser tooling is available, open it, screenshot at desktop AND ~375px, read the DOM for real colors/fonts. If not, ask for a screenshot. |
| HTML/CSS/component code | The richest input — exact values. Extract every text/background pair and run the contrast script on all of them. |
| Figma link | Use the Figma MCP if available (get_screenshot + get_variable_defs); otherwise ask for an export. |
| Nothing yet | Ask for one of the above. Don't roast from imagination. |
Ask at most one clarifying question before roasting (usually: "who is this for?"). Everything else you can see.
Method
- Read
references/crit-criteria.md(once per session) — the ten passes and the slop list. - Run all ten passes against the input. Note findings with location + evidence.
- Verify, don't vibe: whenever you have real color values, run
python3 scripts/color.py check "FG BG label"and cite the actual ratios in the roast. A roast with receipts is unanswerable. - Rate each finding: 🔥 annoying · 🔥🔥 hurting users · 🔥🔥🔥 actively driving people away.
- Sort by severity. Cut anything you can't defend with evidence or a named principle — padding kills credibility.
The Roast — output format
## The verdict
<One sentence. The single biggest truth about this design. Make it land.>
## Three things I can't unsee
<The top 3 findings, one short punchy paragraph each: what, why it
matters, the fix. This is the shareable part — make every word earn it.>
## The full crit
<Remaining findings grouped by theme (hierarchy / color / type /
spacing / content / states / a11y). Each: severity flames, the
observation with location, the specific fix with exact values where
possible. Contrast findings cite computed ratios.>
## What's actually working
<2–4 honest strengths. Not consolation prizes — real ones, so they
know what to protect while fixing the rest.>
## Fix order
<Numbered list, highest impact-per-effort first. Each item ≤ 1 line.
The reader should be able to start at #1 right now.>
Deliver in chat. If they ask for a file, write roast.md in the working directory. If the design is genuinely strong, the verdict says so, "Three things" becomes "Three ways to go from good to great," and the flames stay in the drawer.
Voice
Confident, specific, quotable. Every roast line points at something real ("the seven competing font sizes in this header are having a custody battle" — then list the seven). Never punch at the person, their taste, or their effort — punch at the pixels. No hedging ("maybe consider possibly…") and no design-speak without translation. If you cite a rule, name it (WCAG 4.5:1, proximity principle, one-primary-action) so they can look it up.
After the roast
Offer exactly one next step, matched to what you found — e.g. "Want me to fix the contrast pairs?" or "Want this as a roast.md to share with your team?" Don't upsell a redesign; the roast's job is to make the existing design better.