VibeBridge
Log in Start for free
Free · from the @vibebridge.ai carousel

The $10k Website
Design Pack

The 6 tools that make a site Claude builds look like a senior designer made it. Each with the exact command and how I actually use it.

No designer, no agency. Most are free coding-agent skills, one is a free reference, one has a paid tier. Flagged where it matters.

1 · Taste Skill 2 · impeccable 3 · Emil Kowalski 4 · Dribbble 5 · 21st.dev 6 · VibeBridge

The stack, in the order I use it

taste → audit → motion → reference → components → live
01

Taste Skill

Design taste · free

The anti-slop framework that gives Claude real design taste: stronger layout, type, spacing and motion instead of boilerplate UIs.

Install this skill
$ npx skills add leonxlnx/taste-skill
How I use it with Claude: I install it before anything else, so every screen Claude generates starts from a real design direction instead of a default layout. I give it the brief, the skill picks the direction.
github.com/leonxlnx/taste-skill →

Coding-agent skill (Claude Code, Cursor, Gemini CLI), not a one-click install. Community project, not affiliated with Anthropic.

02

impeccable

Audit & polish · free

A full design review of a finished page: it critiques and polishes hierarchy, type, spacing, color and motion until it looks intentional.

Install this skill
$ npx impeccable skills install
How I use it with Claude: Once a page is built, I run it as a review pass: /impeccable on the finished page and Claude tightens hierarchy, spacing and type before I ship it.
github.com/pbakaus/impeccable →

Free and open source (Apache 2.0) by Paul Bakaus. Needs a coding-agent harness to run.

03

Emil Kowalski

Motion · free

Adds premium animations and micro-interactions to your site: the easing and timing of the maker of Sonner and Vaul.

Install this skill
$ npx skills add emilkowalski/skill
How I use it with Claude: I pull it in for the motion pass. I ask Claude to add the transitions and micro-interactions and it uses Emil's timing and custom easing instead of default CSS.
emilkowal.ski/skill →

Intentionally lightweight, best used case by case (an animation review). Want to go deeper? Emil's paid course is at animations.dev.

04

Dribbble

Inspiration · free

The biggest feed of real design work. Pick a layout you love, hand the screenshot to Claude as your reference.

Use this
↗ dribbble.com
How I use it with Claude: When I want a specific look, I screenshot a layout I like and paste it into Claude as the reference. It matches the structure and rhythm, not the pixels, so the result is still yours.
dribbble.com →

Free to browse. Respect other people's work: use it as direction, never copy a design one to one.

05

21st.dev

Components · free tier

Its Magic MCP builds production-ready React and Tailwind components from a prompt, right in Claude or Cursor. Plus a huge library from top design engineers.

Connect the Magic MCP
$ npx @21st-dev/cli@latest install claude
How I use it with Claude: For a heavier component (pricing table, nav, hero) I let the Magic MCP draft it from a prompt inside Claude, then refine the copy and spacing by hand.
21st.dev →

Magic MCP has a free tier with monthly limits; paid plans for more generations. The component library itself is free to browse.

06

VibeBridge

Publish · free to start

Pushing files to a server is the easy part, and it is where the other tools stop. VibeBridge takes your finished site live on your own domain with SSL, then keeps it alive: SEO refreshed on every publish, a GDPR cookie banner and self-hosted fonts handled, forms, leads and analytics running underneath, and the live page still editable by you inline or by your AI over MCP without breaking the layout.

Ship it
$ npx vibebridge-cli deploy
How I use it with Claude: When the homepage is done, I publish it to VibeBridge, then rework the copy with Claude and by hand in the inline editor. New subpages I build in Claude and publish straight to VibeBridge. Everything stays in one place, so I am not juggling localhost links and HTML files.
github.com/vibebridge-ai/cli →

Free to start. The skills above make it beautiful; this is the part that makes it live and keeps it editable.

The part skills do not do

The skills make it beautiful. VibeBridge makes it live.

The skills build you a beautiful site, then hand you a folder of files and walk away. The part they skip is everything after: getting it online on your own domain, keeping the SEO and the cookie banner right every time something changes, catching the leads, and staying a click or a sentence to your agent away from the next edit. That is the part VibeBridge does, so finished actually means finished.

  • Publish your AI site to your own domain with SSL handled for you
  • SEO plus a fresh sitemap on every publish, so Search Console always has the current map
  • A GDPR cookie banner and fonts self-hosted automatically on publish, no Google call
  • Forms, leads and analytics built in, so the site actually works for you
  • Edit anytime in the inline editor, or let your agent edit over MCP, without breaking the layout
$npx vibebridge-cli deploy github.com/vibebridge-ai/cli →

Open source, with a VibeBridge skill so Claude, Cursor or your agent can publish and update the site for you.

Start free at vibebridge.ai See how it works

Not a builder, not an agency. The part that comes after the build.