🎨 Websites & UIFREE · no sign-up

Design System Generator

Create a cohesive design system — colours, typography scale, spacing, radius and shadows — as Tailwind config and CSS variables.

✨ Fill in the blanks

0/2 filled
Live preview — updates as you type
Create a complete design system for a [TYPE OF PRODUCT] brand that feels [3 BRAND ADJECTIVES].

Include:
- Colour palette: primary, secondary, neutrals (50–950), success, warning, error — with hex values and contrast-checked text colours
- Light and dark mode variants
- Typography: a heading font and body font from Google Fonts, plus a type scale (xs to 6xl) with line heights
- Spacing scale, border radius scale and 3 shadow levels
- Button, input and card styles in every state (default, hover, focus, disabled)

Output it as: 1) CSS custom properties, 2) a tailwind.config extension, 3) a short guide on when to use each colour.

More websites & ui prompts

See all →
🎨Websites & UIFREE

Complete Landing Page Builder

Generate a full, modern, responsive landing page with hero, features, pricing, FAQ and CTA — ready for Cursor, Lovable or Bolt.

Build a modern, responsive landing page for [PRODUCT NAME], which [WHAT THE PRODUCT DOES] for [TARGET AUDIENCE]. Stack: React + Vite + TypeS…
Claude · Cursor · LovableUse free →
🎨Websites & UIFREE

Cinematic Hero Section

A prompt for an eye-catching full-screen hero section with video or gradient background, animated headline and CTAs.

Create a fullscreen cinematic hero section for [BRAND NAME], a [TYPE OF BUSINESS]. Stack: React + TypeScript + Tailwind CSS + framer-motion.…
Claude · Cursor · LovableUse free →
🎨Websites & UIFREE

UI/UX Design Critique

Get an honest, expert critique of any screen or website — hierarchy, spacing, typography, conversion and accessibility.

Act as a senior product designer. Critique the attached screenshot / the page at [URL OR DESCRIPTION]. The page's goal is: [GOAL e.g. get si…
ChatGPT · Claude · GeminiUse free →