Design your own website with AI · Sam Cherkasov October 9, 2026 Fill in the fields in square brackets before use. Reel material is translated from Ukrainian. 1. Message from the Reel (English translation) Reference: https://www.getquoti.ai/ I like the bright style and the loud type. It feels like I’m looking at a comic book rather than a cleaning-service website! 2. Your website brief Reference: [website link] What I like: [2–3 specific features and why] What I do not want to carry over: [elements that do not fit] My website: - Product or business name: [name] - What it does: [one plain sentence] - Who it is for: [who will visit and what they need] - Primary action: [for example, book a consultation] - Website language: [language] - Page type: [for example, a one-page website] - Required sections: [offer, services, how I work, questions, contact] - Materials: [my copy, logo, photos, real testimonials, or “not available yet”] - Constraints: [brand colors, style, important requirements, or “none”] Use my information. Do not invent testimonials, customers or numbers. 3. Design-prompt instruction (English translation) Based on the website link and my comments above, prepare one detailed prompt for Claude Design that I can copy and use to design my own website. First, open the reference in a browser and study its visual design. Separate what you actually see from your assumptions. If you cannot view the website’s visual design, ask for screenshots before writing the prompt. Do not invent details. Turn my impressions into specific design decisions. For example, “it feels like a comic book” should translate into typography, outlines, composition, illustrations and rhythm, rather than just the word “comic” in the prompt. Give priority to the features I mentioned. In the finished prompt, describe: 1. The overall style, mood and impression visitors should get. 2. A palette with HEX codes and color roles: backgrounds, text, accents and buttons. Mark approximate colors as recommendations. 3. Typography: the character of the fonts, available alternatives, heading sizes and weights, and body-text readability. 4. Composition: grid, content width, spacing, density and the sequence of sections. 5. The first screen: navigation, main headline, short description, primary action and key visual. 6. The page structure and the design of each section. Adapt the content to my product, rather than the business in the reference. 7. Buttons, cards, forms, outlines, shadows, illustrations and other distinctive elements. 8. Suitable animations, hover states and mobile behavior. Consider contrast, visible focus and reduced motion. 9. What to avoid to preserve the chosen design character. Use the reference as a source of visual principles. Do not copy its logo, text, characters or brand images. If there is no information about my product in this conversation, leave clear fields for [Product name], [What it does], [Who it is for], [Primary action] and [Website language]. Do not invent testimonials, customers or numbers. The prompt must stand on its own: include the reference link and the necessary context, without phrases such as “as discussed above.” Write it in English as a direct instruction for creating a design, with specific requirements rather than general words such as “modern” or “beautiful.” Ask for desktop and mobile page designs, without writing code at this stage. Return only the finished prompt in one code block, without an introduction or explanation, so I can copy it in one click. 4. Adapt the ready-made example 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. 5. Precise design revisions Keep the overall style. Change only the following: 1. Where: [specific section, and desktop or mobile]. Problem: [what makes the website hard to read or understand]. Change: [the result I want]. 2. Where: [section]. Problem: [description]. Change: [description]. 3. Where: [section]. Problem: [description]. Change: [description]. Show the updated desktop and mobile designs. Leave the other sections unchanged. Do not add invented information. 6. Design-to-implementation handoff Implement the website using the attached design files and screenshots of the final version. Context: [paste your completed website brief]. Folder with the design and materials: [folder name or path]. Primary action and destination: [button text and real link]. Form behavior, if there is a form: [where submissions should go, or “visual mockup only for now”]. We are creating the website: [from scratch / in an existing project; specify the folder]. Read the files first. Identify the final design, required sections, fonts, colors and mobile behavior. If the folder contains several versions, ask which one to implement. If a technology choice is needed, suggest the simplest option for this task and briefly explain it. Preserve the design’s character, but build real responsive pages rather than one image. Use the supplied copy and materials. Do not invent testimonials, numbers or client logos. Check that the chosen fonts support my website’s language, including its special characters and currency symbols. Check the page in a browser at widths of 390 and 1440 px, plus a narrow 320 px screen: heading wrapping, no horizontal scrolling, contrast, visible focus, menu, buttons, links, forms and image loading. Explain what actually works and what still needs connecting. If a button destination or form configuration is missing, flag it and ask; do not display a fake success confirmation. Prepare a local preview and the project files. Include short instructions for opening the website. Do not publish it, buy a domain or connect paid services without my separate permission. Appendix: full Quoti example from the Reel (English translation) 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.