Design-Workflow: Bessere App-Interfaces mit KI und Figma

X-PostBreeje AnadkatAnleitung

Breeje Anadkat beschreibt seinen fünfstufigen Workflow, um ansprechende Benutzeroberflächen und funktionale MVPs mit Claude, ChatGPT, Figma und Claude Code zu erstellen.

Das Wichtigste

  1. Referenzen statt reine Prompts: Zu Beginn sammelt Anadkat visuelle Inspirationen und übergibt diese gemeinsam mit ersten Ideen an Claude oder ChatGPT.
  2. Iterative Kritik: Der erste KI-Entwurf dient nur als Rohbau, der gezielt bei Layout, UX, Farben und Interaktionen hinterfragt werden muss.
  3. Feinschliff in Figma: Das statische Interface, visuelle Hierarchien und Detailentscheidungen werden manuell in Figma verfeinert.
  4. KI als Sparringspartner: Modelle werden für Feedback, visuelle Varianten und das Hinterfragen von Entwurfsentscheidungen genutzt.
  5. Umsetzung zum MVP: Nach Fertigstellung des Figma-Designs setzt Claude Code den Entwurf in eine interaktive Anwendung inklusive Animationen um.

Warum das relevant ist

Viele KI-generierte Oberflächen wirken generisch oder weisen UX-Mängel auf. Die Kombination aus visueller Referenzierung, manueller Verfeinerung in Designtools und anschließendem KI-gestützten Coding zeigt einen pragmatischen Weg zu marktreifen Prototypen.

Einordnung

Anadkat positioniert KI nicht als vollständigen Ersatz für Designer, sondern als Beschleuniger in einer hybriden Pipeline. Entscheidend ist der Zwischenschritt in Figma: Statt rein promptbasiert zu arbeiten, bleibt die Kontrolle über Hierarchien und Typografie beim Menschen. Erst danach übernimmt Claude Code die technische Realisierung von Flows und Animationen.

Original-Post

Breeje Anadkat

@BreejeAnadkat · 12. September 2026

This is exactly how I create better-looking apps with AI. My complete workflow, no gatekeeping 🧵 t.co/80vk8Rq0m6

3513 Likes71 Antworten7003 Lesezeichen207.531 Aufrufe

Auf X ansehen
Weitere Posts im Thread (13)
  1. 1. I start with references, not prompts. I surf around, collect anything that sparks an idea, then dump the references and my rough thoughts into Claude or ChatGPT. Sometimes Claude cooks. Sometimes ChatGPT does. I use whichever understands the vision better. t.co/g8VSEdyDyD
  2. 2. The first draft is never the final design. Once it’s built, I get specific about what feels wrong: the layout, UX, colors, interactions, everything. AI gives you a draft. Your taste and feedback are what make it good. t.co/0hoLiXJKwm
  3. 3. Then I take it into Figma. This is where I add the actual taste: refining the UI, fixing the UX, improving the hierarchy and making everything feel intentional. AI gets me close. Figma is where I make it mine. t.co/plWvsrR3Jk
  4. 4. Treat AI like a creative partner, not just a tool. I use it to generate visuals, explore directions and challenge my decisions. If I’m confused, I ask for its opinion. Sometimes one simple conversation unlocks the entire design. t.co/4FR8hpSlzG
  5. 5. Once the design is locked, I take it back to Claude. This time, the direction is clear. I use it to turn the polished design into an interactive, working MVP with real flows, animations and interactions. From an idea to something you can actually use.
  6. If you liked this, follow me for more design + Claude Code experiments. Also, if you’re a founder looking for someone who can design your product and actually make the MVP live too, DM me. Happy to discuss the project.
  7. @GreySaurabh t.co/z3nfEY9coC
  8. @SanndyCreationz glad to hear that brooo
  9. @shubhambiswas29 Don't tell everyone that 😂💀
  10. @drapzdesigns Thanks man
  11. @vermabhindi Thanks 🙌
  12. @CoderSteven I only did static UI in figma, animations are done via Claude Code
  13. @AnilKody Noted
Ausgewählte Antworten (5)
  • @shubhambiswas29 @BreejeAnadkat Where is the 6th point in which you have to abuse the claude to get the rught result 😂
  • @GreySaurabh @BreejeAnadkat Thiss
  • @SanndyCreationz @BreejeAnadkat Thanks bro useful 🔥
  • @vermabhindi @BreejeAnadkat Love it!🤌🏼
  • @drapzdesigns @BreejeAnadkat this is sick

Erwähnte Links

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Ähnliche Einträge

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • Video

    Video:Chase AI

    Besseres Webdesign mit Claude Code in drei Schritten

    Chase AI stellt einen dreistufigen Workflow vor, um bei der Frontend-Entwicklung mit Claude Code generisches 'AI Slop' zu vermeiden. Der Ansatz kombiniert eine eigene Inspirationsbibliothek, spezialisierte Werkzeuge wie Impeccable oder den Higgsfield-MCP und einen visuellen, iterativen Build-Prozess mit interaktiven Tweak-Leisten.

    KI & AI· Anleitung

  • Link:sleek.design

    Sleek: KI-gestütztes Design-Tool für mobile Apps

    Sleek generiert vollständige Screens für iOS- und Android-Apps auf Basis von Textbeschreibungen oder Referenzbildern. Entwürfe lassen sich direkt als editierbare Ebenen nach Figma oder als Code in HTML und React mit Tailwind CSS exportieren. Zudem unterstützt das Tool Coding-Agenten wie Claude Code oder Cursor über eine API.

    KI & AI· Tool

  • X-Post:Himanshu Hingorani

    KI-gestützter Workflow für 3D-Webdesign und interaktive Frontends

    Himanshu Hingorani stellt einen mehrstufigen KI-Workflow für kreatives Frontend-Design vor, der Midjourney v7, Claude Opus 5 sowie Cursor und Claude Code kombiniert. Anhand des Projekts 'Zephyr' demonstriert er eine interaktive 3D-Bühne mit Scroll-Animationen und plädiert gegen uniforme Standard-SaaS-Landingpages.

    28Lesezeichen2664Aufrufe

    KI & AI· Demo

Zurück zur Wissensbasis

Lassen Sie uns über Ihr Projekt sprechen

Kontakt aufnehmen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.