Design Workflow: Creating Better App Interfaces with AI and Figma

X postBreeje AnadkatTutorial

Breeje Anadkat shares a five-step workflow for creating polished application interfaces and functional MVPs using Claude, ChatGPT, Figma, and Claude Code.

Key points

  1. References before prompts: Anadkat starts by gathering visual inspirations and rough concepts, passing them to Claude or ChatGPT to establish initial direction.
  2. Critiquing the initial draft: Early AI outputs are treated as starting points requiring specific feedback on layout, UX, colours, and interactions.
  3. Manual refinement in Figma: Taste and intent are applied inside Figma by refining UI components, visual hierarchy, and user experience.
  4. AI as a creative partner: LLMs are used conversationally to generate visual directions and challenge design decisions.
  5. Transitioning to code: Once the static UI is finalised in Figma, Claude Code builds the working interactive MVP, including animations and user flows.

Why it matters

Direct AI code and UI generators often yield generic results with subtle usability flaws. Combining manual design curation in dedicated tools like Figma with AI code generation bridges the gap between raw AI drafts and production-grade prototypes.

Analysis

The proposed workflow highlights that taste and layout refinement remain human responsibilities. Rather than relying solely on text-to-app prompts, Anadkat relies on a hybrid handoff: LLMs for rapid ideation, Figma for static polishing, and Claude Code for implementation and animation.

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

3.5k likes71 replies7k bookmarks207.5k views

View on X
More posts in the 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
Selected replies (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

Mentioned links

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Video

    Video:Chase AI

    Improving Web Design in Claude Code in Three Steps

    Chase AI outlines a three-step workflow to eliminate generic 'AI slop' when designing web interfaces with Claude Code. The method combines a personal design library, specialised CLI tools like Impeccable or the Higgsfield MCP, and an iterative build workflow featuring in-browser tweak bars.

    AI & LLMs· Tutorial

  • Link:sleek.design

    Sleek: AI-Powered Mobile App Design Tool

    Sleek creates full iOS and Android app screens from text prompts or reference images. Designs can be exported directly as editable layers into Figma or as code in HTML and React with Tailwind CSS. The tool also integrates with AI coding agents like Claude Code and Cursor via an API.

    AI & LLMs· Tool

  • X post:Himanshu Hingorani

    AI-Driven Workflow for 3D Web Design and Interactive Frontends

    Himanshu Hingorani showcases a multi-step AI workflow for creative frontend design combining Midjourney v7, Claude Opus 5, Cursor, and Claude Code. Using an interactive 3D stage project named 'Zephyr', he argues against flat, cookie-cutter SaaS landing pages in favour of immersive web experiences.

    28bookmarks2.7kviews

    AI & LLMs· Demo

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

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

Parts of this content were created with the assistance of AI.