Design your own website with AI

This is an English translation of the actual response for Quoti. Fill in the product fields before using it. “Observed” labels describe claims in that response; check them against the current site. Its proposed colors and fonts are suggestions, rather than your brand rules. Check that the fonts support your website’s language.

You are an art director and web designer. Design a one-page website for my product in the style described below. Deliver desktop layouts (1440 px wide), mobile layouts (390 px wide), and a short style sheet covering colors, fonts, corner radii, shadows and buttons. No code is needed at this stage, only the design.

PRODUCT (filled in by me; do not invent anything)
- Name: [Product name]
- What it does: [What it does]
- Who it is for: [Who it is for]
- Primary website action: [Primary action]
- Website language: [Website language]
Do not invent testimonials, customers, partner logos, user counts or other numbers. If social proof is needed but no data is provided, leave a clearly marked empty block “[Real testimonial / number, if available]” or omit the section.

REFERENCE (a source of visual principles)
https://www.getquoti.ai/ is the website of a service-booking application. Do not copy its logo, text, photos, characters, illustrations or exact composition. Use only the principles described below. In this prompt, [OBSERVED] marks what the original analysis reported measuring on the live reference page, while [RECOMMENDED] marks proposed choices for the new design.

DESIRED IMPRESSION
The client likes a bright style and a “loud” font, as though they are looking at a comic book rather than a typical website. Visitors should notice this within two seconds of seeing the first screen. The tone is confident, direct and slightly bold, while remaining clear and trustworthy. Avoid a corporate startup feel.
Turn “comic book” into concrete decisions; follow these rather than merely hinting at comics:
- Typography: huge all-caps headings with very tight line spacing.
- Outlines: thick dark borders (1.5–3 px) on cards and large containers.
- Hard offset shadows without blur, like a sticker or comic panel.
- Tilted elements (cards and photo tiles) rotated by up to approximately 15 degrees to interrupt the strict grid.
- Torn-paper edges as section dividers and photo frames.
- Hand-drawn doodles around headings (zigzags, a crown, a moon with Zzz, outlined arrows).
- Abrupt background changes between dark, light and colored sections, without smooth gradients.

1. OVERALL STYLE AND MOOD
A warm paper base, near-black blocks, one strong accent and one secondary color. Flat, without gradients or glass effects. Arrange elements like stickers on a table: outlines, hard shadows and gentle tilts. Use doodles only as accents near headings, rather than background decoration. Humor in the copy is welcome if it does not obscure what the product does.

2. PALETTE
[OBSERVED in the reference, for context; do not copy]: dark #252322, warm light background #f0ece8, secondary background #dbdbd3, orange accent #fd5b2c, purple #7d5ba6, green #8ba02c, and white.
[RECOMMENDED for my website] (if I have a brand color, replace the accent with it):
- Ink (text, outlines, shadows and dark sections): #1E1B1A.
- Paper (main background): #F4EFE6.
- Paper 2 (alternating sections and large containers): #E3DDD0.
- Strong accent (primary buttons and key words in headings): #FFD23F, with #1E1B1A text.
- Secondary (pain-point cards and the colored “how it works” section): #5B3FE8, with white text.
- Doodles and small accents: #FF5A5F.
- Success or positive labels: #2DBE7E.
Contrast rules: white on #5B3FE8 has a ratio of approximately 6.8:1. Do not put white text on orange or yellow buttons. Do not make small text translucent on colored backgrounds.

3. TYPOGRAPHY
[OBSERVED]: headings use the heavy, wide sans-serif Obviously, weight 900, all caps, line height 0.85 and letter spacing -1%. At a 1280 px viewport: hero heading 105 px, large statements 149 px, section headings 59–78 px, card headings 36 px, small labels 22 px with +2% letter spacing. Body text uses Switzer, weight 500, 19 px, line height 1.4 and letter spacing -1%. Buttons and footer use the same display font in all caps.
[RECOMMENDED] free alternatives (Google Fonts): headings in Archivo (variable, width 100–125, weight 900) or Anton, all caps; body text in DM Sans or Inter, weight 500, 18–20 px on desktop and 17–18 px on mobile. Use clamp() for headings: hero 64–120 px on desktop / 44–56 px on mobile; large statements 56–140 px / 40–56 px; section headings 40–72 px / 32–40 px. Use line height 0.85–0.9 only for headings, with no more than 3–4 lines. Body text must be at least 17 px, with lines up to 65 characters.

4. COMPOSITION
[OBSERVED]: a 12-column grid, floating pill navigation and alternating backgrounds: dark, grayish, light, colored, light, dark. Headings are huge and often centered; body text occupies less than half the width. There is plenty of space.
[RECOMMENDED]: maximum content width 1280 px; side padding 24 px on desktop and 16 px on mobile; vertical spacing between sections 96–160 px / 56–80 px. One main accent per screen, and no more than two ideas per section. Alternate backgrounds: Paper, Ink, Paper 2, secondary color, Paper, Ink. Between sections, use an original SVG strip with an irregular torn-paper edge.

5. FIRST SCREEN
- Navigation: a floating pill. [OBSERVED]: warm light background, 1 px outline, 16 px radius, 4 px inner padding and 64 px height. Logo on the left, 3–4 links in the middle, a dark “Log in” button and an accent primary-action button on the right. On mobile, keep the logo and hamburger icon in the same pill.
- Heading: two short parallel phrases in all caps, following “Result. Less pain.” Example structure, not final copy: “[Desired outcome]. [Less of what annoys you].” Maximize the size; align left or center. Put a key word on a slightly tilted yellow highlighter block.
- Description: 1–2 sentences explaining what [Product name] does for [Who it is for], no more than 25 words.
- Primary action: one large button labeled [Primary action], with 2–3 short benefit labels and check marks beside or beneath it.
- Key visual: a real product screenshot in a tilted frame with an outline and hard shadow, with 1–2 doodles nearby. Do not use stock photos or invented faces.

6. PAGE STRUCTURE (adapt it to my product)
1. First screen (Ink or Paper).
2. Pain points: a heading and three tilted #5B3FE8 cards, with a 1.5 px outline, 24 px radius and 6 px 6 px 0 #1E1B1A shadow. Each has a short 36 px heading and 1–2 sentences about a real problem faced by [Who it is for]. Use the data I provide; do not invent statistics.
3. Large statement: one giant centered heading, up to three lines, with two doodles around it; beneath it, 1–2 sentences and a button.
4. How it works: 3–4 steps in a colored section, each with a large number, heading, short description and slightly tilted dark rounded panel containing a product screenshot.
5. Features: a 2×3 grid, or alternating image-left / image-right cards with outlines.
6. Social proof: real data only; a paper-sticker frame for photos, with outlined navigation arrows.
7. Frequently asked questions: an accordion on an Ink background, with all-caps questions.
8. Final call to action: a large outlined panel with a torn edge inside, a heading, text and one button.
9. Footer: display-font links in all caps and legal links, without clutter.

7. BUTTONS, CARDS, FORMS AND ELEMENTS
- Buttons [OBSERVED]: 12 px radius, 20 px 24 px padding, 1.5 px outline in the same color as the fill, and all-caps display text. For my website: primary button with #FFD23F fill, #1E1B1A text, a 2 px #1E1B1A outline and a hard 4 px 4 px 0 #1E1B1A shadow; secondary button with an Ink fill and white text; minimum size 48 px.
- Cards: 24 px radius, 1.5–2 px #1E1B1A outline, 6 px 6 px 0 #1E1B1A shadow, 32–48 px padding, and rotation from -4 to 6 degrees.
- Large containers: 32 px radius, 3 px outline and 8 px 8 px 0 shadow.
- Form inputs, if needed: height 56 px, radius 12 px, 2 px outline; a thicker outline and yellow shadow on focus.
- Icons: outlined, 2 px stroke, without fills.
- Doodles: 4–6 across the whole page, hand-drawn outlines in #FF5A5F and #5B3FE8. Create original doodles related to my product; do not repeat the reference’s crown, Zzz moon or zigzag.
- Images: interface screenshots in tilted frames; photos with torn edges only if I provide real photos.

8. ANIMATION, STATES, MOBILE AND ACCESSIBILITY
- [OBSERVED]: the hero heading appears with a line-by-line mask; pain-point cards move horizontally and rotate during scrolling; service tiles are tilted in a fan. Hover states were not checked.
- [RECOMMENDED]: show hover, focus and active states for buttons and cards in the designs. Button hover: move 2 px up and left, with the shadow increasing to 6 px. Active: press the button down and remove its shadow. Card hover: straighten to 0 degrees over 200 ms. Section reveal: move up from 24 px below while fading in over 300–400 ms.
- Required: visible focus with a 3 px #5B3FE8 outline and 3 px offset; prefers-reduced-motion disables animated tilts, parallax and automatic carousels (static tilts remain); text contrast at least 4.5:1, or 3:1 for large text; tap targets at least 44 px.
- Mobile: one column, rotations reduced to 2–4 degrees, cards stacked vertically or in a swipe carousel with a visible cue, pill navigation with a hamburger menu, primary-action button fixed at the bottom or repeated after every two sections, and headings no longer than three lines.

9. WHAT TO AVOID
- Gradients, blurred shadows, glass effects, stock photos and invented faces.
- A generic SaaS look: gray cards with weak shadows, small headings, and characterless symmetrical “three columns with icons.”
- Small or low-contrast text; white text on yellow or orange.
- More than two accent colors on one screen, more than six doodles, or rotations beyond 15 degrees.
- A childish look: doodles should be accents, and the product should still feel trustworthy.
- Copying the reference’s logo, text, photos, characters or exact composition.
- Invented numbers, testimonials or client logos.

DELIVER: page layouts for desktop 1440 px and mobile 390 px with all sections, hover/focus state designs for a button and a card, and a style sheet. If product information is missing, leave clearly marked fields instead of inventing it.

Download the example as a separate file ↓

Add the full example prompt to Claude or Codex, then send this request with your own context:

Adapt the finished design prompt to my context below: [paste your completed website brief].

Keep the selected visual principles, but change the structure, copy and primary action to fit my audience. Replace every placeholder for which I have supplied information. If important information is missing, ask short questions. Do not invent facts. Check that the proposed fonts support my website’s language.

Return only the updated, self-contained prompt in one code block.

Stop the prompt generation and add screenshots. Ask for a new analysis based only on those images, with assumptions marked. Check that it matches what you see.

Go back to your brief. Repeat the audience and primary action. Name 2–3 reference features you want to keep, then ask AI to reshape the content around your product.

Ask it to continue in the same style and list the required sections. Then ask for the mobile version of the entire page. Finish the design before handing it over as final.

Screenshots help recreate the appearance, but do not describe menu or form behavior. Add the design prompt, your materials and a list of actions. If possible, return to the tool and save a ZIP or HTML/CSS export.

Check the current official guidance and the actions available in your account. You can use Stitch for step 4 with the same prompt. Prepare your context and prompt before deciding whether you need a different plan.