Website Maker

Prompt

Design and build a landing page that feels intentionally art-directed by an experienced human designer. The page must NOT look like a generic AI-generated SaaS template. The highest priority is specificity, restraint, hierarchy, and useful content. If the design could work for almost any company just by changing the logo and brand name, it is too generic. ================================================== CORE PRINCIPLE ============== Do not start from trendy components. First decide: 1. What information matters most? 2. What should users notice first? 3. What deserves visual emphasis? 4. What layout best communicates the content? 5. What can be removed? Every visual element must have a reason to exist. If something is only there to make the page look “modern,” remove it. The page should feel composed, not assembled from reusable AI components. ================================================== AVOID GENERIC AI STRUCTURE ========================== Do NOT automatically generate: Navbar Centered hero Two CTA buttons Logo strip Three feature cards Bento grid Fake statistics Testimonials Pricing cards FAQ Final CTA Huge footer Build the page around the actual content instead. Sections can have different widths, heights, spacing, and compositions. Not every section needs: * a card * a heading * an icon * a CTA * a rounded container ================================================== VISUAL RULES ============ DO NOT USE: * purple-blue gradients * gradient text * glowing buttons * glowing borders * glowing orbs * blurred gradient blobs * glassmorphism * excessive backdrop blur * floating translucent cards * giant rounded rectangles * rounded corners on everything * identical feature cards * endless three-column grids * bento grids * icon + title + paragraph cards * fake dashboards * meaningless charts * fake analytics * fake logo strips * fake user counts * fake awards * fake 5-star reviews * random sparkles * decorative floating shapes * excessive drop shadows * excessive pills * badges above every heading * giant gradient CTA boxes * oversized pill-shaped navbars * glossy surfaces * fake AI chat conversations * random abstract 3D objects Avoid the recognizable style of default AI-generated SaaS websites. ================================================== TYPOGRAPHY ========== Typography should provide most of the visual personality. Do not automatically use Inter. Use one or two intentional typefaces. Possible directions: * humanist sans-serif * editorial grotesk * restrained neo-grotesk * serif + sans-serif pairing * slightly condensed display face Create hierarchy using: * size * weight * spacing * alignment * line length * contrast Do not rely on gradients or decoration. Do not make every heading enormous. Avoid generic AI-style headlines like: “Build Better. Move Faster. Do More.” Write natural, specific headlines. ================================================== COLOR SYSTEM ============ Use a restrained palette. Example: Background: warm off-white Primary text: near-black Secondary text: muted gray Accent: one restrained color Avoid: * stereotypical AI purple * rainbow palettes * neon colors * default blue everywhere * decorative gradients The accent should be used sparingly. ================================================== LAYOUT ====== Use a clear grid. Desktop should not default to everything being centered. Prefer: * left alignment * asymmetric columns * varied section widths * controlled negative space * occasional edge-to-edge imagery * deliberately uneven proportions Do not make every section the same height. Do not give every block identical padding. Spacing should respond to content. ================================================== NAVIGATION ========== Use a simple navigation. Left: Brand Right: Work About Contact Do not put navigation inside a huge floating pill. ================================================== HERO ==== Use an asymmetric layout. Left side: Headline: “Software should make work simpler.” Supporting text: “We design straightforward tools for teams that need to get things done without fighting their software.” Primary action: View our work Do not automatically add a second CTA. Do NOT add generic filler such as: “Trusted by 10,000+ teams” “No credit card required” “Powered by AI” “Start building for free” Right side: Use one meaningful visual. Examples: * actual interface * annotated screenshot * useful diagram * editorial image * project photo * purpose-built illustration Do not put it inside a floating glass browser frame. ================================================== INTRODUCTION ============ Use a simple two-column editorial layout. Left: WHY WE BUILT THIS Right: “Most software adds features until the original problem disappears underneath them. We work the other way around: understand what people actually need, remove unnecessary complexity, and build from there.” Keep the language natural. ================================================== COPYWRITING RULES ================= Use concrete nouns and verbs. Avoid vague marketing language. Avoid phrases such as: * revolutionize * supercharge * unlock your potential * unlock the power of * next-generation * cutting-edge * groundbreaking * game-changing * seamlessly * empower * elevate * reimagine * redefine * transform your workflow * future of * powerful platform * limitless possibilities * all-in-one solution * smarter, faster, better * built for the future Bad: “Revolutionize your workflow.” Better: “Review an invoice without switching between three applications.” Bad: “Powerful collaboration.” Better: “Leave feedback beside the thing being reviewed.” Specificity matters more than enthusiasm. ================================================== PROJECTS / WORK =============== Do not use three identical feature cards. Show projects vertically. Example: PROJECT 01 Field Notes 2026 “A lightweight field-reporting system for maintenance teams.” Large screenshot. Add a short note explaining one important design decision. PROJECT 02 Use a different layout. For example: image left text right PROJECT 03 Use a nearly full-width image with text underneath. All projects should share a visual system without becoming clones. ================================================== REAL INTERFACE STATES ===================== If showing UI, make it believable. Include realistic states such as: * populated data * empty state * validation error * disabled control * selected item * long text * loading * mobile view Do not create a fake dashboard full of meaningless charts. ================================================== CAPABILITIES ============ Use typography instead of cards. Example: What we work on Product design Web development Internal tools Design systems Technical prototypes Separate items using spacing or thin rules. No icons required. ================================================== PROCESS ======= Use a simple sequence. 01 — Understand Learn what people actually need to accomplish. 02 — Reduce Remove steps and features that do not help. 03 — Build Create the smallest useful version. 04 — Refine Improve it after observing real usage. Do not place these inside four rounded cards. ================================================== IMAGERY ======= Images must contribute information or project-specific atmosphere. Avoid generic AI imagery such as: * robots * glowing brains * futuristic cityscapes * chrome spheres * glass cubes * floating UI panels * generic smiling office teams * abstract 3D blobs If imagery adds nothing, use no imagery. ================================================== TESTIMONIAL =========== Use at most one testimonial. Do not put it inside a decorative card. Example: “They understood the problem quickly and didn’t try to turn a simple project into something unnecessarily complicated.” Daniel Hart Operations Director No star rating. No carousel. No fake customer wall. ================================================== CONTACT ======= Keep it direct. Headline: “Have something useful to build?” Text: “Tell us what you’re working on.” Action: Start a conversation No giant glowing CTA container. ================================================== FOOTER ====== Keep the footer compact. Brand Email Instagram LinkedIn © 2026 Avoid a huge corporate footer unless it is actually needed. ================================================== CARDS ===== Before adding a card, ask: “Does this information actually need a container?” If no, do not use a card. Do not put all text into cards. ================================================== ICONS ===== Before adding an icon, ask: “Does this communicate information faster than text?” If no, remove it. Do not decorate every heading with an icon. ================================================== BORDER RADIUS ============= Use restraint. Buttons: small to moderate radius Images: 0–8px Panels: 0–8px Some elements should have square corners. Do not use 20px+ rounded corners everywhere. ================================================== SHADOWS ======= Prefer: * spacing * borders * contrast * background differences over shadows. Use shadows only when elevation actually matters. ================================================== ANIMATION ========= Keep animation subtle. Allowed: * underline animation * light image reveal * subtle button state * small navigation transition Avoid: * everything fading upward * animation on every scroll event * bouncing icons * rotating gradients * glowing cursor effects * floating elements * excessive parallax * constant motion Respect reduced-motion preferences. ================================================== RESPONSIVENESS ============== Do not simply stack desktop sections. Make mobile intentionally composed. Check: * heading wrapping * readable line lengths * touch targets * image cropping * spacing * navigation * long text * buttons ================================================== ACCESSIBILITY ============= Use semantic HTML. Use strong contrast. Provide clear keyboard focus states. Provide useful alt text. Do not communicate state by color alone. Buttons should look like buttons. Links should look interactive. ================================================== DESIGN SYSTEM ============= Before building, define: * spacing scale * type scale * grid * border style * radius rules * accent color * image treatment * interaction behavior Consistency should come from these rules, not from repeating the same card component. ================================================== SUBSTITUTION TEST ================= Before finishing: Imagine replacing the logo, company name, and accent color. If the site still works perfectly for almost any startup, it is too generic. Revise the: * layout * copy * imagery * interface examples * visual hierarchy until the website clearly belongs to this specific company. ================================================== DELETION TEST ============= Review every: * card * badge * icon * background shape * shadow * animation * image * divider * CTA Ask: “What useful information would disappear if this were removed?” If the answer is “none,” remove it. ================================================== FINAL AI-SLOP AUDIT =================== Check for: [ ] centered generic hero [ ] purple/blue gradient [ ] gradient headline [ ] Inter everywhere [ ] three identical feature cards [ ] six-icon feature grid [ ] bento grid [ ] fake statistics [ ] fake logos [ ] fake reviews [ ] huge rounded CTA [ ] glassmorphism [ ] excessive border radius [ ] unnecessary pills [ ] fake dashboard [ ] meaningless graphs [ ] vague marketing copy [ ] repeated section layouts [ ] fade-up animation everywhere [ ] random decorative objects [ ] useless empty space If any appear without a strong functional reason, redesign them. ================================================== FINAL GOAL ========== The page should feel like an experienced designer: understood the product, understood the audience, made deliberate visual decisions, removed unnecessary decoration, and manually refined the composition. Prioritize: specificity over trendiness hierarchy over decoration typography over effects content over components restraint over spectacle real product thinking over fake polish The result may be simple. It must not be generic.

A system prompt was added to support web rendering