Hi, I'm Rahul. I'm documenting what I learn while building products.
Make Your Vibe-Coded Website Look Better
Four tools that give AI coding agents better design direction, components, review, and visual testing.
AI coding agents are already very good at building websites. But without the right context and tools, the result can still feel generic.
The answer is not another prompt asking the agent to “make it look better.” Give it a better workflow for design direction, components, review, and testing.
These are the four tools I would add.
The simple mental model
Impeccable → Design. Gives the agent stronger visual direction.
21st → Components. Gives it better building blocks.
Vercel Guidelines → Review. Checks what the agent built.
Chrome DevTools → Eyes. Lets the agent inspect and use the real website.
1. Impeccable
Best for better design direction
Impeccable is a design skill and toolkit for AI coding agents. It gives the agent a more precise vocabulary for typography, colour, spacing, layout, hierarchy, motion, and overall visual direction.
Install it near the beginning of a project so it can establish the design context. Use it again near the end for a final polish pass.
Install and initialise
npx impeccable install /impeccable init
Polish an existing interface
/impeccable polish
Impeccable also provides commands for typography, simplification, auditing, and other focused improvements. Use the specific command that matches the problem instead of asking for a general redesign.
2. 21st
Best for high-quality components
21st connects your coding agent to a large catalog of React components. Before generating another hero, pricing section, form, navbar, or animation from scratch, the agent can search for an existing component and inspect the real code.
The current workflow combines the 21st CLI and MCP. Setup varies by coding agent, so use the command generated on the official MCP page instead of copying an old Magic MCP configuration.
Ask your agent
Find a clean pricing section that fits the visual style of this website. Show me the best options before installing anything.
Search from the CLI
21st search "pricing table" 21st generate "a pricing table" --variants 3
3. Vercel Web Design Guidelines
Best for reviewing the finished UI
This official Vercel agent skill acts like a reviewer. It checks interface code for accessibility, forms, typography, images, navigation, dark mode, touch interactions, animation, performance, and usability.
Use it after the main design is built. Ask it to fix important issues without changing the direction you already chose.
Install only the review skill
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
Run a focused review
Audit this landing page for design, accessibility, and UX issues. Fix the important issues without changing the overall visual direction.
4. Chrome DevTools MCP
Best for inspecting the real website
Source code does not show the whole experience. Chrome DevTools MCP lets the agent open the rendered website, click through it, inspect errors and network requests, test interactions, check responsiveness, and measure performance.
Use it throughout testing, but especially after the visual design is mostly finished. It gives the agent something extremely useful: eyes.
Claude Code MCP setup
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
Inspect the result
Open my local website. Inspect the landing page at desktop and mobile sizes. Check the layout, interactions, console, and network requests for problems. Fix the important issues and inspect it again.
The workflow I would use
1. Set the direction with Impeccable
Create the design context before the interface grows in five different directions.
2. Find components with 21st
Search for strong building blocks when you need a section instead of generating every component from zero.
3. Polish with Impeccable
Run a focused visual-quality pass once the complete page exists.
4. Review with Vercel’s guidelines
Find accessibility and UX problems without replacing the design.
5. Test through Chrome DevTools
Inspect the real page, fix what is broken, and inspect it again.
The takeaway
No single tool will make every interface good. The improvement comes from giving each stage of the work a clear purpose.
Set a direction, use better components, review the result, and test the actual website. That workflow is far more useful than repeatedly asking an agent to make the page look better.