Make Claude check its own design

What this is

A free, step-by-step template from Taha's reels — the exact tools, prompts and links, laid out so you can follow along and ship. Comment the keyword on the reel and it also lands in your DMs.

Hey! 👋 Here's what I promised you:

Claude builds your front-end and says "done" — but it never actually looked at what it built. These tools let Claude review and check its design before you do:

1. Web Design Guidelines (Vercel) — a skill that audits your UI code against Vercel's Web Interface Guidelines (100+ rules on accessibility, performance and UX) and tells you where your design is weak.

🔗Skillhttps://github.com/vercel-labs/agent-skills/tree/main/skills/web-design-guidelines 🔗skills.shhttps://skills.sh/vercel-labs/agent-skills/web-design-guidelines 🔗The rules it checkshttps://vercel.com/design/guidelines

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

⚠️ It reports issues (as a file:line list) — it doesn't change your code by itself. Read the list, then ask Claude to fix the ones you agree with.

2. Image to Code (screenshot-to-code) — give it a design you like (a screenshot of a site, a mockup, a Figma design) and it turns it into code (HTML/Tailwind, React, Vue…), keeping the details.

🔗GitHubhttps://github.com/abi/screenshot-to-code 🔗Hosted apphttps://screenshottocode.com

It's a separate open-source app, not a Claude Code skill. Running it yourself needs your own API key (OpenAI, Anthropic or Gemini) — setup steps are in the README.

3. Playwright CLI — lets Claude open a real browser and take screenshots of what it built, so it can see the page, check the components and the mobile view, and spot errors itself.

🔗GitHubhttps://github.com/microsoft/playwright-cli 🔗Playwrighthttps://playwright.dev

npm install -g @playwright/cli@latest
playwright-cli install --skills

Then ask Claude: "Open my site with playwright-cli, take screenshots on desktop and mobile, and fix what looks broken."

Don't have these yet? I covered them before

4. Taste Skill — gives Claude real design taste instead of generic AI pages.

🔗GitHubhttps://github.com/Leonxlnx/taste-skill 🔗Sitehttps://tasteskill.dev

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

5. Awesome DESIGN.md — ready-made DESIGN.md files (design systems) from popular brands: drop one in your project and Claude builds a UI that matches it.

🔗GitHubhttps://github.com/VoltAgent/awesome-design-md 🔗Sitehttps://getdesign.md

Build → screenshot with Playwright → audit with Web Design Guidelines → fix. That's the loop. 👀

Want more? Go further in the Atlas Room Skool class

This page gives you the tools. The Skool class takes you step by step — full courses and guides to build and sell your own AI app or SaaS, in Darija, with a new lesson every week.

Join the Skool class →

New to vibe coding? See what you'll learn →

🔑NVIDIA

MINIMAX🎥