The 5 Free Claude Code Skills That Make Your Front End Stop Looking Vibe Coded
The five skills from the video, in order. Each one gets the command that installs it and a line on what it changes, then one prompt at the bottom that makes Claude Code use all five on the same build. All five are free.
Before you start
Every command below runs in your terminal, inside the project you're working on, with Claude Code already installed. Three of the five install through the skills CLI, which drops the skill exactly where Claude Code looks for it. The other two are a plugin and a browser tool.
Skills load when Claude Code decides they fit the task. For the first few sessions, name the skill in your prompt so you can see it kick in. Start a new session after installing so it picks everything up.
1. Frontend Design, by Anthropic
This is Anthropic's own skill, and it lives in the anthropics/skills repo, which is sitting at 175,000 stars. It makes Claude Code work like the design lead at a studio that refuses templates. Deliberate palette, deliberate typography, a real type scale, and a hero that opens on the most characteristic thing in your subject instead of a big number with a gradient.
It also carries a list of the commonest tells of a generated page and steers away from every one of them. That's the part that locks in your design system, because the same rules apply to every screen it builds after the first.
Two ways in. Inside Claude Code it's one slash command, or install it from the repo with the skills CLI and pick frontend-design from the list.
/plugin install frontend-design@claude-plugins-official
npx skills add anthropics/skills2. Hallmark
Hallmark is the anti-slop skill, built by Nutlope at Together AI. It picks a macrostructure for your brief, dresses it in one of twenty-one themes, then runs fifty-seven slop-test gates plus a self-critique before it hands the code back. Your UI stops looking vibe coded because the defaults every model was trained into are refused on purpose.
Four verbs. The default builds new UI. audit scores existing code against the anti-patterns and gives you a punch list. redesign keeps your copy and structure and rebuilds with a different fingerprint. study is the one from the video: hand it a URL or a screenshot of a site you admire and it extracts the design DNA, the structure, the type pairing, the colour anchor, into a design.md you can reuse.
npx skills add nutlope/hallmark3. Web Design Guidelines, by Vercel
This one audits what Claude Code wrote against Vercel's web interface guidelines, over a hundred rules covering accessibility, focus states, forms, motion, typography, dark mode and touch. It pulls the latest version of the guidelines before every review, so it never goes stale, then flags and fixes the misses before the code comes back to you.
It ships inside vercel-labs/agent-skills. Run the command, pick web-design-guidelines from the list, and take react-best-practices while you're in there.
npx skills add vercel-labs/agent-skills4. 21st.dev Magic MCP
21st.dev gives Claude Code access to over 10,000 pre-built React and Tailwind components. Instead of hand-building a pricing table or a bento grid, Claude searches proven designs and drops one straight into your project, then adapts it to the design system the first two skills set up.
This one is an MCP, not a skill, so it needs a key. Generate a free one at 21st.dev/mcp, then add the marketplace from your terminal and install the plugin inside Claude Code.
claude plugin marketplace add 21st-dev/magic-mcp
/plugin install 21st5. Playwright CLI
Playwright CLI is Microsoft's browser tool for coding agents. It gives Claude Code the ability to open a real browser, click through what it just built, and screenshot it. Claude then looks at the screenshot and catches the broken layout or the error state before you ever see it.
It's built for agents, so it saves snapshots and screenshots to disk instead of stuffing them into the context window, which is why it's far cheaper on tokens than the Playwright MCP. Install it globally, then the second command drops the skill into Claude Code. The first run downloads a browser, let it.
npm install -g @playwright/cli@latest
playwright-cli install --skillsThe prompt that runs all five
Once everything is installed, this is the prompt I paste at the start of a build. It names each skill so nothing gets skipped, and it ends with the screenshot check, which is the difference between AI slop and something that actually converts.
Build [describe the page or app] using the frontend-design and hallmark skills. Pick a macrostructure and a theme that fit the subject, make deliberate type and palette choices, and run the slop test before you show me anything.
Any component I'd otherwise hand-build, pull from 21st first, then adapt it to the design system so it doesn't look pasted in.
When it's built, audit it with web-design-guidelines and fix everything it flags.
Then open it with playwright-cli, screenshot it at desktop and mobile widths, look at both screenshots yourself, and fix anything that's off before you report back. Show me the screenshots with the summary.The things that break it
Not naming the skill. Skills fire on intent, and "make it look nice" is not intent. Name frontend-design or hallmark in the prompt until you can see them kicking in on their own.
No key for 21st. It's the only one of the five that talks to an outside service. Without the key it returns nothing, and Claude quietly hand-builds the component instead.
Skipping the screenshot step. Claude reads code fine and guesses at layout badly. The Playwright pass is where the misaligned hero and the broken mobile nav get caught.
Letting two opinionated skills fight. Frontend Design and Hallmark both have taste. Give Hallmark the structure and the slop test, give Frontend Design the type and palette, and say so in the prompt.
Get the next one first
New prompts every week.
Free. The new drops and the tools behind them, before they hit the feed.
No spam · New issues Sunday · Unsubscribe anytime
Need it custom?
Want this built for you?
Tell me the idea and I’ll build it. An app, a tool, an automation. You don’t need to be technical.
Related guides
Guide
My ChatGPT and Codex Plugin Setup (The Plugins + Copy-Paste Prompts)
The setup behind my video: browser control, computer use and image generation, with prompts you can use right now.
Guide
Keep 4, Cut 4: The AI Coding Tools I Actually Ship With
Copilot did not make the cut. The full keep-or-cut scoreboard, why each tool lives or dies, and the eight-tool stack I actually ship with every day.
Guide
Run the Secret Unreleased AI Model for Free (Ox Alpha, Even Inside Claude Code)
A frontier model with a 1M context window showed up on one website under a fake name. It costs nothing during preview, and one command swaps it into Claude Code. The exact setup, plus the prompt that makes Claude Code build it for you.
Guide
Turn Your GitHub Profile Into an Animated Terminal (No Widgets, No Tokens)
A matrix-rain contribution graph, a neofetch card, and your favorite meme, all animated, all files you own, refreshing themselves every day for free.
Frequently asked questions
Yes. The Anthropic skill, Hallmark and the Vercel skills are open source. Playwright CLI is Microsoft's and free. 21st.dev needs an API key, and the key itself is free to generate at 21st.dev/mcp.
Most of them. The skills CLI installs into Cursor and Codex as well as Claude Code, Hallmark is built for all three, 21st has a Cursor setup, and Playwright CLI ships skills for Copilot and Codex. The prompt at the bottom works anywhere the skills are installed.
A skill is a set of instructions that changes how Claude works, which is why four of these install with one command and need no account. An MCP is a live connection to an outside service. 21st is the MCP, and that's why it's the only one that needs a key.
Into the skills folder Claude Code reads for your project. Start a new session after installing so it loads them, then name the skill in your first prompt to confirm it's active. The same command works for my Codex and ChatGPT plugin setup if you use both.
No. It removes the generic default that every AI build starts from, which is most of the gap. Real taste still comes from the references you feed Hallmark's study verb, so pick sites you actually admire and let it pull the DNA from those.