Premise — Case Study · Arne Steiger

Überblick

Auf einen Blick.

Rolle

Senior Art Director
Creative AI Lead

Aufgaben

Konzept · UX Design
Frontend · Backend · Deployment

Typ

Eigenprojekt

Zeitraum

März – April 2026

Status

● Live (Beta)

Tech Stack

React 18TypeScriptExpressClaude APIfal.ai FLUX.2Railway

Problem

Das Problem.

Brand-Workshops kosten Tage. Das erste visuelle Artefakt kommt zu spät, kostet zu viel, und ist nicht iterierbar.

Freelancer und kleine Agenturen brauchen oft Tage, um Kunden eine erste visuelle Orientierung zu liefern. Die Briefing-Phase frisst Zeit — noch bevor ein einziger Pixel gesetzt wurde.

Was fehlt ist ein gemeinsames Artefakt, das alle Beteiligten auf denselben Stand bringt: Farbe, Typografie, Bildsprache und Argumentation — auf einem Blick, sofort, diskutierbar.

Kunden müssen abstrakte Entscheidungen treffen ohne visuellen Kontext. Designer verteidigen Entscheidungen im Meeting statt vorher. Revision-Loops kosten Zeit die niemand hat.

User Research · Persona

Für wen.

Sarah K.

Freelance Creative Director · Hamburg · 34

„Ich verliere im ersten Meeting immer Zeit damit, Kunden erst mal ein gemeinsames Vokabular beizubringen. Das kostet mich Stunden die ich lieber designen würde."

Pain Points

Briefing-Phase dauert Tage, nicht Stunden
Kunden verstehen abstrakte Markenentscheidungen nicht
Erst-Pitch ohne visuellen Kontext ineffizient
Revision-Loops kosten Zeit und Geld
Kein gemeinsames Referenz-Artefakt im Team

Ziele

Schneller in die Gestaltungsphase kommen
Kunden früh visuell abholen und überzeugen
Design-Entscheidungen vorab begründen
Konsistente Ausgangsbasis für das Team
AI sinnvoll in den Workflow integrieren

Lukas M.

Freelance UX/UI Designer · Berlin · 28

„Ich brauche beim Kunden-Pitch schnell etwas Vorzeigbares. Nicht perfekt — aber überzeugend genug um den Job zu kriegen."

Pain Points

Kein festes Team, kein Briefing-Ritual
Pitches oft kurzfristig, wenig Vorbereitungszeit
Kunden erwarten sofort visuelle Orientierung
Budget zu klein für lange Konzeptphasen
AI-Tools liefern Output aber keine Begründung

Ziele

In 30 Minuten pitch-ready sein
Outputs die er direkt dem Kunden zeigen kann
Design-Entscheidungen automatisch begründet bekommen
Workflow der mit einem Menschen funktioniert

Weitere Zielgruppen: Brand Consultants, kleine Designagenturen, Marketing-Teams die Pitches vorbereiten.

UX · User Flow

Der Weg durch das Produkt.

01

✍️

Brief schreiben

Projektname, Branche, Tonalität, Zielgruppe, Keywords

02

⚡

KI generiert

Claude + FLUX.2 parallel — Orbital-Loader als Feedback

03

🎨

Result: 4 Tabs

Colors · Type · Mood · Document — je eigenständig

04

🔄

Iteration

Outputs regenerieren, Brief anpassen, vergleichen

05

📤

Export

PDF, Figma Tokens, CSS Custom Properties

06

📁

Dashboard

Alle Projekte gespeichert, vergleichbar, wiederabrufbar

Process · Wireframes

Vom Sketch zum Interface.

Vor dem finalen UI entstanden strukturelle Skizzen für die drei Kern-Screens. Ziel war es, Informationshierarchie und Interaktions-Logik zu klären bevor visuelles Styling entschieden wurde — insbesondere die Tab-Struktur im Result-Bereich.

Project Name

Industry

Audience

Brand Description

01 — Brief Input Form

02 — Generating State

Color Name + Role

03 — Result · Colors Tab

04 — Result · Typography

05 — Dashboard · Your Briefs

06 — Generating · AI at Work

ℹ Die Wireframes entstanden als schnelle Skizzen in Figma — hauptsächlich um die Tab-Logik im Result-Bereich zu klären und sicherzustellen, dass jeder Output eigenständig reviewbar und exportierbar ist. Das Interface wurde laufend im Browser iteriert.

Design Process · Why I Decided This

Entscheidungen und ihre Gründe.

Jede Designentscheidung hat eine Alternative. Hier sind die Weggabelungen die mich am meisten beschäftigt haben — und warum ich so entschieden habe wie ich entschieden habe.

Entscheidung 01

Blueprint-Grid vs. Warmes Consumer-UI

✗Warmes, abgerundetes UI mit hellen Flächen und violetten Gradienten

✓Präzises Blueprint-Grid, fast schwarz, monochrome Ästhetik

Premise ist für Profis die damit Kunden überzeugen müssen. Warme Consumer-UIs signalisieren Spielzeug. Das Blueprint-Grid signalisiert: Hier passiert echte Design-Arbeit. Außerdem setzt sich Premise damit klar von 90% aller AI-Tools visuell ab.

Entscheidung 02

4 separate Tabs vs. eine lange Scroll-Seite

✗Alle Outputs auf einer scrollbaren Seite — kompakter, weniger Klicks

✓4 eigenständige Tabs: Colors · Type · Mood · Document

Der Output ist dicht: Palette, Typo-Paarung, 12 Moodboard-Bilder, ein 4-seitiges Dokument. Alles auf einer Seite überfordert. Entscheidend: Jeder Tab ist unabhängig regenerierbar und exportierbar — Palette akzeptieren, Moodboard nochmal, Dokument direkt teilen.

Entscheidung 03

Orbital-Loader vs. Skeleton-Screen

✗Standard-Spinner oder Skeleton-Screens während 25 Sekunden geladen wird

✓Animierter Orbital-Loader mit Prozess-Feedback in 3 Phasen

Claude API + FLUX.2 parallel brauchen 15–25 Sekunden. Ein leerer Screen fühlt sich wie ein Fehler an. Der Orbital-Loader kommuniziert aktiv: zwei Prozesse laufen parallel. Er setzt Erwartung — was danach kommt, war es wert zu warten.

Entscheidung 04

Rationale-Dokument als Output vs. reiner Visual-Dump

✗Nur die Outputs liefern (Farben, Typo, Bilder) ohne Begründung

✓Vollständiges Argument-Dokument: „Design decisions, already explained."

Das eigentliche Problem beim Kunden-Pitch ist nicht die Entscheidung — sondern die Erklärung. Claude begründet warum genau diese Farben für genau dieses Briefing passen. Das Dokument kann direkt an den Kunden geschickt werden. Das spart die Verteidigung im Meeting.

Screens & Interface

Das Produkt.

01 — Landing Page · Hero

02 — Brief Input · Step 01

03 — Result · Colors

04 — Result · Typography

05 — Result · Moodboard

06 — Result · Document

07 — Dashboard · Your Briefs

Iterationen & Learnings

Was ich mitgenommen habe.

✓ Was gut funktioniert hat

→Vollständiger Output in einem Briefing-Flow fühlt sich magisch an — das ist der Produkt-Moment
→Blueprint-Grid Ästhetik setzt sich klar ab von generischen AI-Tool-UIs
→Railway-Deployment funktioniert stabil und ist schnell iterierbar
→Claude als Reasoning-Layer für Design-Entscheidungen war der richtige Ansatz
→Semantic Color System macht Ergebnis direkt als Figma-Variables verwendbar

↻ Was ich heute anders machen würde

→Moodboard-Qualität früher priorisieren — FLUX.2 braucht präzisere Prompt-Steuerung
→/api/suggest Endpoint von Anfang an stabiler bauen statt nachzurüsten
→Font-Varianz über kuratierten Pool steuern statt per History-Ref
→Linux-Dateinamen Case-Sensitivity früher auf Railway testen
→User-Testing mit echten Freelancern früher in den Prozess einbauen

Ein AI-Tool ist nur so gut wie die Qualität des Outputs — nicht der Inputs. Die echte Design-Arbeit steckt im Prompt Engineering, nicht im UI.

Links

Weitererkunden.

🌐 Live Demo öffnen → 💻 GitHub ↗ ← Zurück zum Portfolio

Premise.Brand foundations,built in minutes.