By Manavarya09
Apply curated, hand-built design language references (Swiss, editorial, neo-brutalism, etc.) with token systems and anti-slop rules to build or restyle frontend UI that produces distinctive, non-generic aesthetics.
A curated library of award-grade design languages for Claude.
Pick a look. Claude builds UI that actually nails that aesthetic — by adapting a real, hand-built reference, not by interpreting keywords.
Most AI design tools fall into one of two traps: keywords in a spreadsheet (data without taste —
the model gets border-radius: 0px and produces slop with the right border-radius), or
principles in prose (taste without material — the model improvises and quality is a coin flip).
Lookbook does neither. Each design language ships as a pack: a philosophy, a full token system, ruthless anti-slop rules, and — the part nobody else has — a real, art-directed reference build the model studies and adapts. The exemplar is the proof.
/plugin marketplace add Manavarya09/lookbook
/plugin install lookbook@lookbook
Then just ask Claude to build something:
"Build a landing page for my dev tool — make it cyber/terminal." "Design a wellness app homepage. Pick a look that fits."
LANGUAGE.md, studies its reference/index.html —
then implements in your stack, adapting the exemplar. Progressive disclosure: the router stays
tiny; a heavy pack loads only when chosen.skills/lookbook/languages/<language>/
├─ LANGUAGE.md # philosophy · token system · anti-slop rules · gold-standard refs
└─ reference/index.html # the real, hand-built, award-grade exemplar
Plus a shared craft floor (skills/lookbook/foundations.md): the 8pt grid, modular type scales,
Material easing tokens, WCAG AA, and the hard anti-slop bans every language inherits.
Every pack stands on evidence, not vibes — built from cited research (research/) into
Awwwards / CSS Design Awards / FWA winners, elite design systems (Material, Apple HIG, Stripe,
Vercel/Geist), and the canonical work behind each style. Each reference was then rendered,
screenshotted, and QA'd against the award bar before shipping.
MIT
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
npx claudepluginhub manavarya09/lookbook --plugin lookbookExtract any website's design language and ship it. Eleven slash commands — /extract, /site, /grade, /battle, /remix, /pack, /theme-swap, /brand, /pair, /studio, /verify — wrap the designlang CLI to pull DTCG tokens, Tailwind/shadcn/Figma vars, motion + voice, synthesize a whole-site canonical design system with a consistency grade, generate shareable graded report cards, head-to-head battle pages, six-vocabulary remixes, downloadable design-system bundles, OKLCH-correct theme recolouring, full editorial brand-guidelines books, design crossovers between two sites, a live token-editor studio, and a rebuild-and-pixel-diff fidelity check.
Zero-setup cost tracking and budget management for Claude Code. Real-time burn rate, budget guardrails, ASCII reports, and pre-task cost estimation — all without external dependencies.
Mold your UI. Visual drag-and-drop editor for any running web app — drag, resize, edit text, change styles — and Claude syncs every change back to your source code.
Discover working public APIs for any task. Auto-verified, refreshed daily.
Git-native shared AI memory for teams. Record lessons, decisions, and conventions that auto-generate CLAUDE.md, .cursorrules, and AGENTS.md. Your AI remembers what your team learned.
Frontend design taste skills including brutalist, minimalist, soft, redesign, stitch, and more
Distinctive, production-grade frontend interfaces with high design quality. Creative, polished code that avoids generic AI aesthetics.
UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 stacks (React, Next.js, Vue, Svelte, Astro, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Nuxt, Jetpack Compose). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Connect Claude Code to TypeUI MCP for curated design systems, UI prompts, and layout variations.
UI/UX design intelligence. 107 styles, 127 palettes, 107 font pairings, 106 charts, 131 reasoning rules, 129 UX guidelines, 16 stacks (React, Next.js, Vue, Nuxt.js, Svelte, Astro, Angular, Remix, SolidJS, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Nuxt UI). 8 Python scripts: BM25 search, contrast checker, palette generator, token generator, type scale calculator, design system generator, UI auditor, CLI. Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, liquid glass, cyberpunk, spatial UI, data brutalism. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient, design tokens, contrast checker.
Plug-and-play MCP that gives your agent UI superpowers. One install: design skill + MCP server, zero config.