Design
Colours, fonts, spacing and the look of your pages.
5 skills. Each one is plain markdown you can paste into ChatGPT, Claude, Gemini or any AI chat, or install in Claude Code or Cursor. How it works
build-tailwind-design-system
Builds a reusable component library on Tailwind CSS v4 - a CSS-first @theme layer, semantic colour names, component variants with class-variance-authority, and a small docs page - and covers the v3 to v4 move. Use when the user wants a component library, consistent buttons and cards, UI variants, or to upgrade Tailwind v3 to v4.
Not yet model-tested; testing Jan 2027Designdesign-distinctive-frontend-ui
Gives a new page or app screen a distinctive look instead of the generic AI-template style - ground it in the subject, plan palette, type and layout, check the plan for cliches, then build and critique. Use when a design looks generic or AI-made, the user wants a unique visual identity, or asks for bold typography and a fresh style.
Not yet model-tested; testing Jan 2027Designdesign-landing-page-hero
Designs a high-converting landing page hero section with a clear headline, subhead, primary call to action, social proof and product visual, then the home page sections below it (benefits, services, testimonials, FAQ, final CTA). Use when the user wants a homepage, landing page, above-the-fold section, hero banner, or a marketing page that converts.
Not yet model-tested; testing Jan 2027Designdesign-tailwind-theme-tokens
Designs a small design system of colour palette, typography scale, spacing and radius tokens as Tailwind theme variables so the whole UI looks consistent. Use when the user wants a colour scheme, brand colours, fonts, a style guide, design tokens, or the app looks inconsistent or ugly.
Not yet model-tested; testing Jan 2027Designreview-ui-against-design-guidelines
Reviews web UI code against a practical interface checklist - interactions, forms, loading and error states, navigation, motion, layout, typography and dark mode - and reports each problem as file, line, issue and fix. Use when the user wants a UI or UX review, asks to check a page against web design guidelines, or wants the interface to feel polished and professional.
Not yet model-tested; testing Jan 2027