My AI Design Workflow: Idea to App Store as One Designer

My AI design workflow runs from an idea to a working build in seven steps, and one person covers all of them: the idea, the design in Figma, design to code with Claude and the Figma MCP, native or web code (SwiftUI, WebGL, shaders), motion made with AI video, sound effects, and finally the App Store or a live URL. This is the exact pipeline behind the AI design experiments on this site, which are playable builds, not mockups. AI does the production work at every step. The decisions, the taste and the "does this feel right on a phone" judgment stay with me. Below I walk through each step with the real experiment behind it, a table of what AI does versus what I still do, and where this workflow does not hold up.

What "end to end" means in my AI design workflow

For most of my 12 years as a product designer, my job ended at a file. I designed in Figma, wrote a handoff note, and someone else built it. Motion was a Lottie if the team had budget. Sound did not exist. Shipping to the App Store was a different department.

That changed at ViewStats, the creator platform built by the team behind MrBeast, where my role grew from Lead Product Designer into design engineer. I worked in the codebase with Cursor, Claude Code, React, TypeScript and GitHub, built React components, opened pull requests and reviewed implementation. Iteration cycles got dramatically shorter. The full story is in the ViewStats creator tools case study, and the role itself is explained in what a design engineer is.

Since then I take AI experiments from idea to design to development to App Store, including sound effects and motion. One person covering what used to be a team. I want to share how that works in practice, because most articles about AI in design are about tools, and almost none show a real pipeline with real outputs you can open.

Step 1: the idea is one interaction, not a feature list

Every experiment starts with a single moment worth building. A bank card app where freezing your card actually freezes it in ice, and you tap three times to shatter it (the Payno card experiment). A pick and mix candy store where real 3D gummy bears pour into a bag and a live scale updates the price (Haribo Pick & Mix). A coffee app where the drink moves when you tilt the phone (Special Latte).

I pick the moment first because AI makes building cheap and that cuts both ways. If the idea is "a dashboard with charts", AI will give you a dashboard with charts in minutes and it will be forgettable. If the idea is "the confetti should be something you can grab and throw", the tools now let one person actually build that. My view, which I have held since long before these tools: interfaces should be fun and alive, with physics, motion, sound and surprise. AI did not create that belief. It removed the excuse.

Step 2: Figma is still where the design happens

Almost every experiment lists Figma as the first tool, and that is deliberate. I design the screens, the type, the spacing and the states in Figma the same way I did at Accern or Greenely. What changed is what the file is for. It used to be the deliverable. Now it is the source of truth that a model reads.

The design file is where taste lives. A model can generate ten layouts; it cannot tell you which one belongs to this product. That judgment is the job, and it is why I do not skip this step even for a one-screen experiment. If you want a sense of how a Figma prototype compares to a real SwiftUI build, I wrote up the trade-offs in SwiftUI vs Figma prototypes.

Step 3: design to code with Claude and the Figma MCP

This is the step that did not exist two years ago. The Figma MCP server lets Claude read the actual design file: layers, variables, spacing, components. Instead of describing my screen in a prompt and hoping, the model works from the real thing.

In practice I open the project in Claude Code, point it at the Figma frame, and ask for a SwiftUI view or a web component that matches it. Then I iterate the way I used to iterate with an engineer, except the loop is minutes, not days. I still read the code. I still reject output that is structurally wrong even when it looks right in a screenshot. At ViewStats I learned that reviewing implementation is part of the design work, not a favor to engineering. If you are choosing between agents, my comparison of Claude Code vs Cursor covers where each fits.

Step 4: native and web code, including the parts that used to need a team

The tools listed on the experiments tell the honest story of what one designer can now ship. Native iOS apps in SwiftUI with Liquid Glass and a Metal shader for a real water simulation (Pulse Health). A social app where every avatar is a glass bubble that bends like a lens when you press it, also a Metal shader (Say More). A web store with three.js and Rapier physics so the gummy bears have weight (the build is broken down in how to make a 3D configurator). A board game with a real 3D dice in SceneKit, built in an afternoon (Dice Board).

I did not become a graphics programmer. I became someone who can describe the effect precisely, read the shader that comes back, and tune it until it feels right. The precision of the description is design work. "Make it glassy" produces nothing usable. "The avatar should refract the content behind it like a convex lens, stronger at the edges, and spring back when released" produces something I can iterate on.

Step 5: motion made with AI video, played by the interface

Motion used to be the first thing cut from a project. Now it is one of the cheapest parts. Several experiments use Kling or Higgsfield to generate short video clips, and the interface then plays them under user control. In the Traveme onboarding the onboarding is one continuous film: swipe forward and the scene moves forward, swipe back and it plays in reverse. In Ocean Wave a jellyfish swims between sections as you scroll, using WebGL video keying so it floats over the page. In the LevelUp screen the animated badge is an HEVC alpha video so it keeps transparency on iOS.

The design decision is not "add a video". It is how the video is scrubbed, keyed, looped and tied to a gesture. That is interaction design applied to a new material, and it is a step I would have had no way to do alone five years ago.

Step 6: sound effects, because silent interfaces feel dead

Almost nobody in product design talks about sound, and I think that is a mistake. The experiments use three approaches. Generated effects from ElevenLabs, on LevelUp, Haribo and the Muse gadget. Synthesized sound with Web Audio, as in the stdo. keyboard page, a keyboard landing page where every key plays a note and you can record a loop. And real recorded sounds, on Special Latte, where the pour is an actual pour.

Sound is the step where "one person covering a team" is most literal. There was never a sound designer on any product team I led. Now a tap, a shatter or a level-up can have a sound in the same session I build the interaction. The limit: sound in a utility app is easy to overdo. I use it where the interaction is physical (ice, dice, coins, pouring) and leave it out of forms and settings.

Step 7: the App Store, or a live URL

Web experiments go live at ai.ayoubka.com. Native ones I have taken all the way to the App Store, with widgets and Live Activities. That last step is unglamorous: Xcode signing, App Store Connect, screenshots, the App Store Review Guidelines, and review feedback. AI helps with the code side. The decisions about what to ship, how to describe it, and whether the thing is actually good enough stay human.

Shipping is the part of the workflow I would push every designer toward, because it changes how you design everything upstream. When you know you are the one who will get the review rejection, the empty state and the error path stop being someone else's problem.

AI design workflow by step: what AI does, what stays mine

Step	Tools I use	What AI does	What stays with me
Idea	Notes, references	Nothing yet	Picking the one interaction worth building
Design	Figma	Variations if asked	Layout, type, states, taste
Design to code	Claude Code, Figma MCP	Reads the file, writes the first implementation	Reviewing structure, rejecting wrong code
Code and shaders	SwiftUI, WebGL, three.js, Metal, Rapier	Writes shaders and physics from a precise brief	The brief, the tuning, the feel
Motion	Kling, Higgsfield, alpha video	Generates the clips	Scrubbing, keying, gesture mapping
Sound	ElevenLabs, Web Audio, recordings	Generates or synthesizes effects	Where sound belongs and where it does not
Ship	Xcode, App Store Connect	Helps with build errors	What ships, how it is described, when it is good enough

Where this workflow breaks

I want to be careful here, because "one designer shipped an app" is a sentence that gets repeated without its limits. A playable experiment is not production software. It does not have accessibility audits, localization, analytics, a backend with real data, or a test suite. The ViewStats products I worked on had engineers who owned those things, and they should. My workflow replaces the handoff and the wait, not the engineering discipline that a product with 500,000 users needs.

It also does not replace research. The 13% to 65%+ activation improvement at ViewStats did not come from building faster. It came from funnel analysis, creator interviews and understanding why people signed up but never connected their channel. The workflow above makes the fix cheap to build. It does not tell you what the fix is.

And it does not solve trust. When we shipped AI thumbnail tools at ViewStats in about two weeks, the hard part was never the interface. It was designing something creators would trust, and then handling the public reaction when the feature became the story. A fast pipeline makes it easier to ship something people do not want. Speed is not a substitute for judgment, and I wrote about what AI actually replaced in will AI replace product designers.

Questions designers ask me about this workflow

What is an AI design workflow, in plain words?

It is a design process where AI tools do the production work between steps (turning a Figma file into code, generating motion clips, writing a shader, producing a sound effect) so that one designer can take an idea all the way to a working build. The designer still owns the idea, the design, the review and the decision to ship.

Do I need to code to use an AI design workflow?

You need to read code more than write it. In my pipeline I review what Claude produces, reject what is structurally wrong and tune what is close. That is a different skill from writing React from scratch, and it is learnable. Start with one screen from your own Figma file and the Figma MCP, and see how far you get before you need an engineer.

Which AI tools are in a design workflow for UI UX?

Mine is Figma for design, Claude Code with the Figma MCP for design to code, SwiftUI or WebGL and three.js for the build, Metal or WGSL shaders for effects, Kling and Higgsfield for AI video, ElevenLabs and Web Audio for sound, and Xcode plus App Store Connect to ship. Every experiment on this site lists its exact tools, so you can see which combination made which build.

How long does it take to go from idea to the App Store with AI?

I do not want to give a number that becomes a promise. The experiments range from a board game built in an afternoon to native apps that went through full App Store review. The honest answer depends on how much of the build is a new effect you have never described before, and how much is screens you already know how to make.

Can one designer really ship an app alone?

For an experiment, a prototype or a small focused app, yes, and the builds on this site are the evidence. For a product with real users, data and a support queue, you still want engineers, and the right framing is that the designer now ships working builds into that team instead of files.

Try one step, then tell me how it felt

You do not need to adopt all seven steps. Take one screen you have already designed, connect the Figma MCP, and ask Claude for a SwiftUI or React version of it. Then put it on a device. That single loop is where this workflow becomes real, and it is the loop I would want every product designer to run at least once this year.

I am curious what it does to you. The first time a model built something you designed, was it closer to excitement or to fear? I ask because I am still working out my own answer, and the honest ones from other designers are the most useful thing I read. If you are a founder who wants a designer who ships the build and not just the file, you can work with me as your product designer and design engineer, or look at the product work first and judge for yourself.