# AI Website Art Direction Instructions ## Purpose Use these instructions whenever AI is asked to design, generate, redesign, or extend a website. The goal is **not merely to produce a clean, modern, usable website**. The goal is to create a website whose visual language is derived from its: - subject matter - audience - brand personality - content - product - industry - emotional tone - positioning The generated website should feel intentionally art-directed rather than assembled from a generic AI website template. A successful result should make the viewer remember **the brand or subject**, not the fact that AI generated the website. --- # Core Principle ## Do not design toward the average AI commonly converges toward safe, familiar web patterns. This often produces websites with: - oversized centered hero text - purple or blue gradients - glowing background blobs - glassmorphism - excessive rounded cards - pill-shaped buttons - generic dashboards - floating 3D objects - repetitive three-column sections - identical section spacing - centered content everywhere - decorative grids - generic gradient text - excessive badges - predictable CTA sections These techniques are not forbidden by themselves. They become a problem when they are used **automatically, without a reason derived from the website's content or brand**. Before using any common design pattern, ask: > Why does this pattern belong to this website? If there is no strong answer, choose another solution. --- # 1. Content Before Style Never begin by selecting a trendy visual style. First understand the website. Before designing, identify: ### Website purpose What is the website trying to accomplish? Examples: - sell a product - explain a technology - publish editorial content - present a portfolio - build trust - generate leads - introduce a company - create a community - document a product - showcase an event ### Primary audience Who is expected to use the website? Consider: - age - profession - technical familiarity - expectations - attention span - device usage - purchase intent - cultural context ### Content characteristics Determine whether the content is primarily: - visual - editorial - technical - educational - transactional - data-heavy - product-focused - narrative - exploratory The page structure and visual language should respond to these characteristics. --- # 2. Extract a Brand Personality Before generating the interface, define a small set of brand characteristics. Choose approximately **3–5 meaningful traits**. Good examples: - precise - editorial - experimental - optimistic - understated - technical - playful - architectural - human - premium - rebellious - calm - cinematic - utilitarian - expressive Avoid vague combinations such as: > modern, clean, professional These words provide too little creative direction. Instead define more specific tension. For example: > Technical but warm > Minimal but not sterile > Editorial rather than SaaS-like > Experimental without sacrificing readability This tension should influence the final visual language. --- # 3. Define a Visual Concept Every website should have a recognizable visual concept. The concept should emerge from the content. Examples: ### Architecture website Possible direction: - strong grid - large negative space - structural typography - measured proportions - photography treated as architectural surfaces ### AI research website Possible direction: - information-dense typography - diagrams - technical annotation - modular research-paper influence - restrained color system ### Children's education website Possible direction: - playful geometry - illustration-led navigation - asymmetric rhythm - tactile shapes - friendly typography ### Luxury hospitality website Possible direction: - cinematic imagery - slow pacing - restrained interface - editorial typography - generous negative space Do not apply the same interface language to every industry. --- # 4. Create a Distinctive Design Vocabulary Define several recurring visual decisions that make the website recognizable. At minimum establish: ## Typography Specify: - heading personality - body personality - type scale - weight contrast - letter spacing - line height - maximum reading width - relationship between headings and content Typography should contribute strongly to identity. Do not rely on oversized typography alone to create visual impact. --- ## Color Create colors from the brand and content. Define: - primary surface - secondary surface - text - muted text - accent - interaction color - border behavior Avoid automatically selecting: - purple - cyan - neon blue - blue-purple gradients for technology or AI-related websites. Use them only when they genuinely belong to the brand. --- ## Geometry Determine a geometric language. For example: - sharp / architectural - soft / friendly - compact / technical - organic / expressive - editorial / flat - modular / systematic Do not apply the same border radius to every element. --- ## Spacing Use spacing intentionally to create rhythm. Avoid: ```text section large gap card grid large gap section large gap card grid ``` throughout the entire website. Mix: - dense information regions - breathing space - visual pauses - large statements - compact utility areas The page should have rhythm rather than uniform spacing. --- # 5. Avoid Card-First Design A card is one possible information structure. It is not the default solution for every piece of content. Before creating a card, determine whether the content might work better as: - editorial columns - full-width composition - comparison table - timeline - split screen - list - index - horizontal strip - sticky section - visual sequence - diagram - layered typography - image-led composition - interactive region Avoid turning every: - feature - testimonial - metric - article - team member - pricing option - statistic into an isolated rounded rectangle. --- # 6. Avoid Repetitive Section Templates Do not build the entire page from repeated structures such as: ```text small eyebrow large heading short paragraph three cards ``` repeated six times. Vary composition according to information importance. A page should contain hierarchy. Some sections may be: - quiet - dense - dramatic - visual - text-heavy - interactive - compact Not every section needs equal visual weight. --- # 7. Treat the Hero as Editorial Art Direction Avoid automatically generating: ```text badge centered headline paragraph two buttons dashboard screenshot gradient blob ``` Instead derive the hero composition from the site's strongest idea. Possible hero approaches include: - typography-first - editorial cover - oversized product visualization - split narrative - interactive demonstration - image-led composition - diagram - data-driven visualization - restrained introduction - asymmetrical composition - immersive viewport The hero should introduce the **identity of the website**, not merely occupy space above the fold. --- # 8. Use Brand-Specific Visual Assets Prefer meaningful visual material over generic decoration. Use or propose: - actual product UI - photography - original illustrations - custom diagrams - branded icons - data visualization - diagrams derived from the content - meaningful textures - domain-specific visual metaphors Avoid decorative visuals with no relationship to the content. Examples of common generic AI decoration: - glowing orb - random mesh gradient - floating cube - artificial neural network - abstract particle cloud - meaningless grid - decorative terminal code - fake analytics dashboard If such imagery is used, there must be a clear conceptual reason. --- # 9. Create Controlled Asymmetry Perfect symmetry often makes AI-generated layouts feel templated. Where appropriate, introduce controlled asymmetry through: - unequal columns - offset typography - unexpected alignment - overlapping visual layers - staggered content - varying image dimensions - mixed section density Asymmetry must remain intentional and readable. Do not introduce randomness merely to appear creative. --- # 10. Give Different Content Different Shapes The visual structure should communicate the meaning of the content. Examples: A process may become: ```text sequence → timeline ``` A comparison may become: ```text side-by-side → table ``` A statistic may become: ```text large numeric statement ``` A technical architecture may become: ```text diagram ``` A story may become: ```text scroll narrative ``` A portfolio may become: ```text visual gallery ``` Do not force all information into the same component. --- # 11. Design a Signature Element Whenever appropriate, introduce **one or two recognizable signature elements**. Examples: - unusual headline treatment - distinctive section numbering - custom illustration language - unique image masking - editorial annotation system - recognizable accent line - custom interaction - unconventional navigation detail - branded diagram style - recognizable data visualization treatment Signature elements should repeat selectively enough to create identity. Do not turn them into excessive decoration. --- # 12. Establish Negative Design Direction Before designing, explicitly define what the website should avoid. Create a short internal list. Example: ## Avoid - purple-blue gradients - glass cards - excessive rounded rectangles - generic AI illustrations - oversized pill buttons - neon glows - centered layout everywhere - unnecessary badges - gradient text - interchangeable SaaS sections - generic stock imagery - fake product screenshots The avoid list should change depending on the project. Do not apply the exact same negative list to every website. --- # 13. Preserve Brand Consistency Across Pages When creating a multi-page website, do not redesign every page independently. Use this hierarchy: ```text Brand Direction ↓ Visual Language ↓ Design Tokens ↓ Layout Principles ↓ Components ↓ Pages ``` Reuse: - typography - color - spacing logic - navigation - buttons - interaction behavior - border philosophy - image treatment - visual motifs But avoid making every page structurally identical. **Consistency should exist in the design language, not in identical layouts.** --- # 14. Do Not Over-Systemize the Interface A design system should create consistency without removing character. Avoid making every element follow exactly the same: - width - radius - alignment - spacing - container - card structure Allow controlled exceptions when they improve storytelling or visual hierarchy. A good website can be systematic without looking mechanical. --- # 15. Motion Must Have a Purpose Do not automatically add animation to make a website feel premium. Motion should support: - hierarchy - orientation - feedback - storytelling - spatial understanding - brand personality Avoid excessive: - fade-up effects - parallax - floating animation - scroll-triggered movement - glowing pulses When every element moves, motion loses meaning. --- # 16. Design for Real Content Do not optimize the design around perfect placeholder content. Account for: - long headlines - short headlines - multiple paragraphs - missing images - varying image ratios - long navigation labels - translated content - large numbers - dynamic content A distinctive website should remain usable when real content changes. --- # 17. Responsive Design Is Part of the Art Direction Do not treat mobile as a compressed desktop layout. For each major composition determine: - what should stack - what should disappear - what should become scrollable - what should change alignment - what should reduce visual complexity - what should retain its signature character Preserve the site's identity at small screen sizes. Do not remove every distinctive visual element simply because the viewport is smaller. --- # 18. Accessibility Is a Design Constraint Distinctive design must not reduce usability. Maintain: - sufficient contrast - readable font sizes - reasonable line length - clear focus states - semantic structure - keyboard usability - touch-friendly targets - reduced-motion compatibility - clear visual hierarchy Creative direction should operate **inside usable boundaries**. --- # 19. Generate Multiple Directions When Necessary Do not assume the first generated design direction is correct. When the project's visual identity is unclear, internally explore at least three substantially different concepts. For example: ### Direction A — Editorial Typography-driven, restrained, asymmetric. ### Direction B — Product Product UI as primary visual language. ### Direction C — Experimental More expressive composition and interaction. Do not create three versions that differ only by color. The underlying composition and visual logic should be meaningfully different. Select the direction that best matches the content and brand. --- # 20. Prefer Specificity Over Decoration If a website feels generic, do not simply add more visual effects. Instead increase specificity. Ask: - Is the typography distinctive? - Does the layout reflect the content? - Are the images specific to the subject? - Does the color system belong to the brand? - Does the page have recognizable rhythm? - Does the interface communicate personality? - Is there a visual idea connecting the sections? Specificity creates identity. Decoration does not automatically create identity. --- # Required Pre-Design Reasoning Before generating the final website, establish the following internally: ```text Website: Audience: Primary goal: Content type: Brand traits: 1. 2. 3. Visual concept: Typography direction: Color philosophy: Geometry: Layout behavior: Image / visual asset direction: Signature element: Things to avoid: 1. 2. 3. 4. 5. ``` Do not expose this analysis unless requested. Use it to guide the generated design. --- # AI Design Decision Rule For every major visual decision, use this priority: ```text Content meaning ↓ Brand identity ↓ User experience ↓ Visual hierarchy ↓ Responsive behavior ↓ Current design trends ``` Never reverse this hierarchy. Trends should support a concept. The concept should not exist merely to reproduce a trend. --- # Anti-Template Check Before finalizing a page, verify whether it accidentally resembles a generic AI-generated website. Ask: ### Hero Could this hero belong to hundreds of unrelated SaaS products? ### Typography Would changing the logo make the website feel like another company? ### Color Was the palette selected because it fits the subject, or because it is currently fashionable? ### Layout Does every section use the same centered container and card grid? ### Components Are cards being used because they are appropriate, or because they are convenient? ### Imagery Does the visual material communicate anything unique about the website? ### Branding Can the visual language be described without mentioning generic words such as: > clean, modern, sleek, professional? If not, the design direction needs more specificity. --- # Final Distinctiveness Test Before completing the design, evaluate it against the following test. ## 1. Logo Swap Test Imagine replacing the logo with another company. If the website still feels completely appropriate, the design may be too generic. --- ## 2. Screenshot Test Imagine seeing only a screenshot without the logo. Would someone recognize the brand, subject, industry, or personality? If not, strengthen the visual identity. --- ## 3. Section Shuffle Test If sections could be rearranged without affecting the story, the information hierarchy may be too weak. --- ## 4. AI Default Test Check whether the design relies heavily on: - gradients - glow - glass - rounded cards - oversized centered headings - pill buttons - generic dashboards If several appear without a content-driven reason, redesign those areas. --- ## 5. Memory Test After viewing the page, identify: > What is the one visual idea the visitor is likely to remember? If there is no clear answer, introduce a stronger visual concept. --- # Desired Outcome The generated website should feel: **specific rather than generic** **art-directed rather than assembled** **consistent rather than repetitive** **expressive rather than decorative** **brand-led rather than trend-led** **content-driven rather than template-driven** The final question should never be: > Does this look like a good AI-generated website? Instead ask: > Does this feel like the website this particular brand, product, topic, or organization should have? If the answer is yes, the design has succeeded.