Design Brief

Wandelt einen UI-Screenshot in ein strukturiertes Entwickler-Briefing mit Farbpalette und Breakpoints um.

Der Prompt

This is a ${page_type:dashboard} of a modern ${focus:government audit} app called ${brand:AuditFlow}.

Thoroughly analyze the UI in this screenshot and describe it in as much detail as you can to hand over from a UI designer to a developer. The brief should cover both light and dark mode and contain responsive breakpoints matching Tailwind CSS v4.3 defaults.

Output characteristics as structured JSONC.

For colors, extract a rough palette and only detail accents and complex media. The goal is to use only 2 palettes: primary and secondary similar to Tailwind colors. Alongside these 2, you can define any number of grays and accent colors for more complex UI (gradients, shadows, SVGs, etc.).

End with a prompt explaining how to implement the UI for a developer, but don't mention any tech specs; only a brief of the UI to be implemented and the token rules + usage. Output the prompt as a Markdown code block.

The output should be two code blocks: one for the design brief and one for the JSONC design specification.

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

Verwandelt einen UI-Screenshot in ein strukturiertes Design-Briefing für Entwickler: analysiert die Oberfläche, dokumentiert Light- und Dark-Mode, definiert responsive Breakpoints nach Tailwind-CSS-v4.3-Standard und extrahiert eine reduzierte Farbpalette (primär/sekundär plus Grautöne/Akzente) als JSONC. Endet mit einem Markdown-Prompt, der die UI-Umsetzung beschreibt, ohne einen Tech-Stack vorzugeben. Praktisch für Teams, die von Figma oder Screenshot direkt zu einer Entwickler-Spezifikation wollen, ohne jede Farbe und jeden Abstand manuell abzutippen. Ersetzt kein echtes Design-System, beschleunigt aber den Handoff zwischen Design und Entwicklung spürbar.

Praxis-Tipp

Lade den Screenshot in hoher Auflösung hoch und setze ${brand} auf deinen echten Produktnamen, damit die Ausgabe direkt weiterverwendbar ist.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …