What it does

• Fifteen starting styles, from Swiss and editorial to brutalist, terminal and an accessibility-first one, then every value is yours to change
• Import the look of any website, with an AI agent filling in a template from its CSS and screenshots
• Primary, accent and status colours with generated scales, tinted neutrals and a light and dark theme, all checked for WCAG contrast
• Twenty-six Google fonts served from this site, system stacks or your own font, on a modular type scale with optional fluid sizes
• Spacing grid, density, corner radius, borders, shadows and background texture
• Layout patterns (navigation, hero and feature sections) that steer away from the generic template look
• Button, input, card, badge and icon styles, plus motion timing, easing, hover lift and entrance
• Live preview of a marketing page, an app screen and every element, in both themes, at desktop and phone width
• Exports DESIGN.md for your agent, CSS variables, a Tailwind v4 theme, W3C design tokens JSON and the visual identity file it imports

Why I built it

Ask an AI coding agent for a web page and you get the average of every page it has seen: a centred hero, three feature cards, safe blue buttons. The code works, but the result looks like everyone else's. Agents follow exact constraints very well, though, so the fix is to hand them your visual identity as a precise brief instead of "make it look modern". This app writes that brief for you, and lets you see what it describes before an agent builds anything.

How to use it

1. Pick a starting style, then make it yours: your product's name, who it is for and how it should feel, then colours, fonts, spacing, shape, layout, components and motion.
2. Check the preview. Switch between the website, the app screen and the element sheet, the light and dark theme, and desktop and phone width. The contrast checks under Colour flag text that would be hard to read.
3. Export. Save DESIGN.md in the root of your project and tell your agent to follow it (the app gives you the line to paste into CLAUDE.md or AGENTS.md). Add tokens.css, or theme.css in a Tailwind project, so the values exist in code too.
4. Iterate section by section. DESIGN.md ends with a review checklist: ask the agent to check each section it builds against it, and fix one part at a time rather than regenerating the page.

Import a look from a website

The builder can start from the look of a site you like, or from your own brand's live site. It doesn't read websites itself; an AI agent does that part, from material you collect:

1. Collect the site's look. Take screenshots of a few pages (and of the dark theme, if there is one) and save its CSS files. In Chrome or Edge, Save page as › Webpage, complete saves the CSS next to the page.
2. Have an agent fill in the template. On the Import tab, download the blank visual-identity.json and copy the prompt. Give both to Claude, or any agent that reads images, with the screenshots and the CSS.
3. Import the result. Open the file the agent wrote, or paste its reply. The builder reports what it took, what it had to adjust to fit, anything it couldn't read, and the agent's own notes on what it guessed. Undo puts your previous design back.

The template is the same file the builder exports, with every value empty, so there is one format going in and out. Each field carries notes for the agent (what it means, its options, where to find it in CSS); the import reads only the values and ignores the notes. Export your current design the same way to have an agent adjust it ("make it warmer, and the buttons less round") and import the answer.

What DESIGN.md tells the agent

• Rules first: what to always do and never do, including the habits behind the generic look (gradients, glassmorphism, emoji icons, the hero with three cards). Add your own.
• Every token, with its job: which colour is for buttons and which for links, which size for which heading, which spacing steps exist. Links get their own colour, darkened from your primary where needed so they stay readable.
• Layout and components: the navigation, hero and feature patterns, and how buttons, inputs, cards, badges, alerts, tables and icons look in every state.
• Motion in numbers: durations, easing curve, hover lift and entrance, and what happens with reduced motion.
• The full token set as CSS, so the file works on its own.

Privacy

Everything happens in your browser. Your design is remembered in this browser so you can come back to it; nothing is uploaded. The Google fonts are served from this site, so trying them sends nothing to Google. To keep a design or move it to another browser, export visual-identity.json and import it there. When you import a website's look, the screenshots and CSS go to the AI agent you choose, not to this site.