Lookbk picks

The best design skills for Claude Code (2026)

Claude Code writes good code, but left to itself it reaches for the same fonts, gradients and layouts as everyone else. A design skill gives it a finished look for one job, the scripts to fill it in, and checks to run before it hands you the result. You can see what each one makes below before you install it.

See the 10 picks

Free skills to start. Pro is $99 a year for every skill, or $19 a month for 10. See pricing

Written for

and 25 more

The picks

From the Lookbk catalog only, one or two per job: a hero, a landing page, a docs site, a deck, a link-preview card, an article illustration and a diagram. We picked skills whose result you can see before you install, whose scripts check what they make before handing it over, and whose results are yours to use. They run with Node.js 18 or newer and Chrome (plus ffmpeg for the heroes’ videos), and work the same in Codex, Cursor and other agents that read SKILL.md. Four of the ten are free.

web
Cursor Tour HeroClaude CodeCodexCursor+3 more agents
01 · Motion Heroes · Pro
Cursor Tour Hero
One HTML file + embed · 1080p MP4 and poster
For a SaaS home page. A scripted cursor works through your product’s own window beside the headline, and you get a page, an embed and a 1080p video of it.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Cursor Tour Hero makes
web
Cloud Sky HeroClaude CodeCodexCursor+3 more agents
02 · Motion Heroes · Pro
Cloud Sky Hero
One HTML file + embed · 1080p MP4 and poster
For a calm, atmospheric first screen. A shader sky with clouds drifting in front of and behind the headline, and the build checks every line of text against every color that can sit behind it.
Needs: Node.js 18+, Chrome for the checks and recording, ffmpeg for the video
See what Cloud Sky Hero makes
web
Bento SaaS LandingClaude CodeCodexCursor+3 more agents
03 · Landing Pages · Pro
Bento SaaS Landing
HTML page or Next.js component · 10 tile types
A full SaaS landing page with a bento-grid feature section, written from your real features, numbers and screenshots. It comes as an HTML page or a Next.js component, checked at every width for cut-off text and contrast.
Needs: Node.js 18+, and Chrome for the checks
See what Bento SaaS Landing makes
Free
web
Mono Editorial LandingClaude CodeCodexCursor+3 more agents
04 · Landing Pages · Free
Mono Editorial Landing
One HTML file · drafted from your README
Free: a black-and-white landing page set like a magazine, drafted from your README. The hero holds a real waitlist form or buttons to get started.
Worth knowing: A waitlist needs an account with a form service, or your own endpoint.
Needs: Node.js 18+, and Chrome for the checks
See what Mono Editorial Landing makes
web
Docs StarterClaude CodeCodexCursor+3 more agents
05 · Developer Docs · Pro
Docs Starter
Static HTML site · drafted from your README and OpenAPI
A documentation site with search, code tabs and dark mode, drafted from your README and docs, with an API reference from your OpenAPI file. It checks every link and anchor before handoff.
Needs: Node.js 18+, and Chrome for the checks
See what Docs Starter makes
slides
Glass Keynote DeckClaude CodeCodexCursor+3 more agents
06 · Decks · Pro
Glass Keynote Deck
HTML deck with motion + PDF + PPTX · 8–20 slides
A keynote deck with frosted glass panels, glowing charts and slides that animate in the browser. You also get a PDF and a PowerPoint file with editable text and your speaker notes.
Needs: Node.js 18+, Chrome for the checks and exports; pptxgenjs only for the PowerPoint file
See what Glass Keynote Deck makes
Free
slides
Swiss Grid DeckClaude CodeCodexCursor+3 more agents
07 · Decks · Free
Swiss Grid Deck
HTML deck + PDF + PPTX · 6–15 slides
Free: an eight-column grid, one accent and heavy grotesque type. Your notes become a browser deck, a PDF and an editable PowerPoint file.
Needs: Node.js 18+, and Chrome for the PDF and PPTX
See what Swiss Grid Deck makes
Free
image
Editorial OG CardClaude CodeCodexCursor+3 more agents
08 · Social Cards · Free
Editorial OG Card
PNG · 1200 × 630
Free: a link-preview image for every post in one editorial look, rendered at 1200 × 630 with Chrome, with the meta tags wired up for you.
Needs: Node.js 18+ and Chrome
See what Editorial OG Card makes
image
Article Hero IllustrationClaude CodeCodexCursor+3 more agents
09 · Illustration · Pro
Article Hero Illustration
SVG + PNG · 1600 × 900 and 1200 × 630, plus a title card
One visual metaphor for your article, drawn as a flat riso-print illustration from 56 motifs, at 16:9 and Open Graph sizes, with alt text.
Needs: Node.js 18+ and Chrome
See what Article Hero Illustration makes
Free
image
Blueprint Architecture DiagramClaude CodeCodexCursor+3 more agents
10 · Diagrams · Free
Blueprint Architecture Diagram
HTML + SVG + PNG
Free: point Claude Code at your repository and it draws your system as a blueprint-style diagram, with labeled requests and moving data-flow dots, as HTML, SVG and PNG.
Needs: Node.js 18+, and Chrome for the PNG
See what Blueprint Architecture Diagram makes

Install

Install a pick with your agent

Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Mono Editorial Landing, which is free; each skill page has its own prompt.

1. Paste the install prompt

Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.

Install the "Mono Editorial Landing" skill from Lookbk (https://lookbk.dev/skills/mono-editorial-landing).
1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add mono-editorial-landing
2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again.
3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.

Or run it in a terminal

curl -fsSL https://lookbk.dev/cli.js | node - add mono-editorial-landing

2. Start a new session

Agents load skills when a session starts. The installer writes the folder where your agent looks:

Claude Code: ~/.claude/skills/mono-editorial-landing
Codex: ~/.agents/skills/mono-editorial-landing
Cursor: ~/.agents/skills/mono-editorial-landing

3. Ask for the result

Describe it in plain words, for example:

Build a Mono Editorial landing page for quietly.example from our README, with a waitlist form.

Another agent? Install a skill in any agent

FAQ

Questions

Still stuck? The guides cover installing, agents and licensing in more detail.

Read the guides

What is a design skill?

A folder with a SKILL.md that teaches Claude Code one visual job. Lookbk’s also carry a template that holds the design, scripts that fill it in from your content, and checks that run before the result is handed to you.

How is this different from Anthropic’s frontend-design skill?

Anthropic’s frontend-design skill is guidance: it steers Claude toward deliberate choices of palette, type, layout and motion when it builds any interface, and ships no templates or scripts. The skills here each make one finished thing in a fixed design. They work side by side: use frontend-design for your app’s own screens, and a skill here when you want a specific page, deck or image.

Do these skills need an API key or a design tool?

No. They run on your machine with Node.js and Chrome. No Lookbk skill calls an AI model or asks for an API key, and none needs Figma.

How do I install one in Claude Code?

Paste the install prompt from the skill’s page into Claude Code, or run the install command in a terminal. It goes into ~/.claude/skills/<skill>. Type /skills to check that Claude Code sees it.