Designing with AI

1.Design the layout yourself first

Before you touch AI, sketch out roughly how the page should look — what goes where. You don't need to be a designer; even a rough Figma layout or screenshots of sites you like works.

ExampleIf you're building a landing page, decide first that it'll have a big headline on the left, a product screenshot on the right, and three feature cards below — then tell AI to build exactly that, instead of saying "make me a landing page" and hoping it guesses well.

2.Lock in your typography before you code

Pick your fonts, sizes, and weights ahead of time, and write them down as rules. This stops AI from randomly changing text sizes every time you ask for a new section.

Example"Headings: Inter Bold, 32px. Body text: Inter Regular, 16px. Never use more than 2 font weights on one page."

3.Define your color palette

Choose 3–5 colors max before you start, and keep them in one place (like a CSS variables file). This keeps every button, background, and accent color consistent.

ExampleA primary blue, dark text, a light gray background, and one accent color for buttons. AI reuses these instead of inventing new shades each time.

• Primary#2563EB
• Text#111827
• Background#F9FAFB
• Accent#F59E0B

4.Make AI ask before deciding

Instead of letting AI silently choose things, tell it to check with you first when something is a design decision, not just a coding task.

ExampleInstead of AI quietly deciding a button should be red and rounded, it should ask: "Should this be your primary blue button or a secondary outline button?"

5.Use a visual annotation tool for feedback

Rather than describing changes in words ("move the button down and to the left a bit"), you point directly at the element on the page and say what you want changed. Tools like Agentation.dev let you do this with AI coding tools.

ExampleClick the hero image, type "make this 20% smaller and add rounded corners" — AI applies it to that exact element instead of guessing which one you meant.

6.Decide your animation patterns upfront

Pick just 2–3 animation types and stick to them everywhere, so motion feels consistent rather than random.

Example"Elements fade in on scroll, buttons scale slightly on hover, page transitions are a simple slide — nothing else."

7.Add one custom, memorable detail

One small, distinctive touch that most sites don't have. It signals craftsmanship even if the rest of the site is fairly simple.

ExampleA custom cursor that changes shape depending on what it's hovering over — a circle over images, a thin line over text.