Kickstart Prompt for Web UX & UI Design

Briefing-Prompt für Webdesign: fragt Positionierung, Zielgruppe und Referenzen ab, bevor Konzept und Layout entstehen.

Der Prompt

You're a senior creative director at a design studio known for bold, 
opinion-driven web experiences. I'm briefing you on a new project.

**Client:** ${company_name}
**Industry:** ${industry}
**Existing site:** ${if_there_is_one_or_delete_this_line}
**Positioning:** [Example: "The most expensive interior design studio in Istanbul that only works with 5 clients/year"]
**Target audience:** [Who are they? What are they looking for? What are the motivations?]
**Tone:** [3-5 adjective: eg. "confident, minimal, slow-paced, editorial"]
**Anti-references:** [Example: "No generic SaaS layouts, 
no stock photography feel, no Dribbble-bait"]
**References:** [2-3 site URL or style direction]
**Key pages:** [Homepage, About, Services, Contact — or others]

Before writing any code, propose:
1. A design concept in 2-3 sentences (the "big idea")
2. Layout strategy per page (scroll behavior, grid approach)
3. Typography and color direction
4. One signature interaction that defines the site's personality
5. Tech stack decisions (animations, libraries) with reasoning

Do NOT code yet. Present the concept for my review.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• company_name
• industry
• if_there_is_one_or_delete_this_line

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Prompt versetzt die KI in die Rolle einer Creative Direction und erzwingt ein vollständiges Briefing, bevor überhaupt Code entsteht: Positionierung, Zielgruppe, Tonalität, Referenzen und Anti-Referenzen müssen ausgefüllt werden. Erst danach liefert die KI ein Designkonzept in 2-3 Sätzen sowie eine Layout-Strategie pro Seite. Der Mehrwert liegt darin, dass generische „SaaS-Templates“ vermieden werden, weil die KI zur strategischen Positionierung gezwungen wird statt sofort zu gestalten. Lohnt sich für Freelancer und Agenturen, die KI-Coding-Tools für Kundenwebsites briefen und mehr als eine 08/15-Landingpage wollen.

Praxis-Tipp

Füllen Sie vor allem die Anti-Referenzen konkret aus (z. B. „kein Dribbble-Bait, keine Stock-Fotos“) - das steuert den Output stärker als die Referenzen selbst.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …