AI Is Changing How We Ideate, Design, and Build User Interfaces

For decades, the workflow for designing user interfaces was fairly predictable. Designers made mockups, developers turned those mockups into code, and product teams reviewed the results, iterated, and shipped. Every artifact had its own clear job: design files for designers, code for developers, screenshots for communication. The tools kept changing over the years, but the overall workflow stayed remarkably consistent. I was lucky enough to start my career during that era. I learned UI design through Photoshop, watched the industry move to Sketch, and eventually adopted Figma. Every few years, the tools changed, but the workflow didn't. As a beginner, that made things surprisingly simple: learn the process first, then learn whichever tool the industry happened to use. Then AI arrived—not just as another design tool, but as an active participant in the creative process.The UI design ecosystem has shifted from a relatively stable set of specialized tools to a rapidly growing landscape of AI-powered workflowsThese days, it's completely normal to ask an AI assistant to generate a landing page, redesign a dashboard, build an onboarding flow, turn a screenshot into code, or explain why a layout feels off. Sometimes what comes back is an image, sometimes it's React code, sometimes it's a Figma file, and sometimes it's all three at once.The conversation isn't just happening between designers and developers anymore. It's happening between humans and AI. And that shift, small as it sounds, raises a much bigger question: if AI is going to be a permanent collaborator in UI design, what should the ideal workflow actually look like?For designers entering the industry today, the answer isn't nearly as obvious as it used to be. Every company has its own process, new AI tools appear almost weekly, and even experienced designers are still figuring out where everything fits. So maybe the question isn't which tool is right anymore. Maybe it's time to rethink the workflow itself.There Is No Longer a Single Workflow Over the past year, I've found myself designing in completely different ways depending on the problem. Sometimes I start with AI-generated images to explore ideas. Other times, I jump straight into code. For production work, I still rely heavily on design tools, and increasingly, AI is connecting all of these together. Rather than looking for one "correct" workflow, I started asking a different question: what is each workflow actually good at? The Image-First Workflow Best for:Early ideation, visual exploration, creative brainstormingStrengths:Fast, inspiring, low-friction concept generationTrade-offs: Difficult to edit precisely, iterate consistently, or reuse A typography concept generated using ChatGPT's image model. Image generation is excellent for exploring visual directions quickly, but the result remains a static artifact. Source : OpenAIImage generation models have gotten remarkably good at visual exploration. Need ten different hero sections? A mobile banking app? A futuristic dashboard? AI can produce concepts in seconds, which makes it hard to beat for brainstorming and creative exploration.The catch is that images are still mostly endpoints. The moment you want to change the spacing, rename a component, introduce a design token, or reuse part of a layout somewhere else, you usually end up switching to a completely different tool. Screenshots communicate appearance really well, but they don't carry much structure with them. They're great for inspiration, not so great for iteration.The Code-First Workflow Best for:Functional prototypes and implementationStrengths:Real code, executable, close to productionTrade-offs: Slower visual exploration, requires technical context, harder for rapid design iteration A dashboard interface generated using Claude through Claude Design. Code generation produces immediately functional interfaces, but the design becomes coupled to a specific implementation. Source : AnthropicOn the other end of the spectrum is the code-first workflow. Modern AI models can produce surprisingly solid React, SwiftUI, Flutter, or HTML from a simple prompt, making it incredibly fast to go from an idea to a working interface. Iteration also becomes much easier since developers can tweak layouts, rename components, add variables, and test changes immediately.The downside is that code is rarely neutral. A React component is already making decisions about runtime, architecture, state management, styling conventions, and framework choices before you've even opened it. Code isn't just representing the design; it's implementing it. That's incredibly powerful when you're ready to build, but it also means the artifact becomes tightly coupled to a specific platform and technology stack.AI Inside Design Tools Best for:Production UI design and team collaborationStrengths:Rich editing, components, design systems, familiar workflowsTrade-offs: Artifacts remain tied to proprietary tools and ecosystems AI is becoming a native part of modern design tools, helping designers create and refine interfaces without leaving their existing workflow. Source : FigmaDesign tools are evolving just as fast. AI can now generate screens, edit layouts, create assets, organize components, and handle a lot of the repetitive work directly inside the design environment. For designers, this feels natural because everything stays inside an ecosystem that was already built for visual editing.The trade-off is that those artifacts tend to stay tied to that ecosystem. They're rich, editable, and collaborative, but they're also closely bound to proprietary formats and workflows.Connected AI Workflows Best for:Reducing friction between existing toolsStrengths:AI can work across multiple systems without manual handoffsTrade-offs: Improves the workflow, but usually not the underlying design artifact Connected AI workflows allow assistants to work across multiple tools and data sources, reducing friction while preserving existing workflows.Another direction that's picking up steam is AI connecting directly into existing tools through integrations and protocols. Instead of copying information back and forth between applications, AI can work across design files, repositories, documentation, and development environments at the same time, which cuts down on a lot of friction.But even here, the underlying representation usually stays whatever format the connected tools already use. The workflow gets better. The artifact itself often doesn't change much at all.None of These Approaches Are Right or Wrong One mistake I see a lot is people treating these workflows as competitors, when really they're not. Each one is optimized for something different: images for creativity and exploration, code for implementation and precision, design tools for collaboration and editing, connected workflows for productivity. The fact that all four keep growing at the same time tells you something: the industry hasn't actually agreed on what the ideal AI-assisted workflow looks like yet. We're still figuring it out.What Makes a Good AI Design Artifact? Instead of asking which tool is going to win, I think a better question is this: What properties should a UI design artifact actually have when both humans and AI need to work with it? A useful design representation in the AI era probably shouldn't be defined by whatever application created it. It should be defined by its characteristics instead. It needs to be readable by humans and by AI. Easy to edit and easy to version. Portable across tools, independent of any particular framework, and open enough that anyone can build around it. Thinking about these properties is what eventually led me to start experimenting with a different kind of design artifact. Rather than being tied to a design tool, an image, or a specific UI framework, I wondered what would happen if a user interface could exist as a portable, structured representation that both humans and AI could understand equally well.The Industry Is Moving in This Direction Zoom out, and you can see this happening already. Image models keep improving because visuals are still one of the fastest ways to communicate an idea. Code generation keeps getting better because implementation still matters. Design platforms are becoming more AI-native, developer tools are adding deeper AI integrations, and protocols are emerging to connect all these systems together more effectively. At the same time, there's a growing conversation around more portable, structured ways of representing user interfaces, ones that aren't tied to a single runtime or editor. None of these directions rules each other out. In fact, they might all end up being part of the future workflow.One Experiment One possible direction: .gui, an experiment in representing user interfaces as a portable, human-readable artifact for designers, developers, and AI.One of the directions I've been exploring is an open-source project called .gui. The idea isn't to replace design tools or code, but to experiment with a portable UI representation like an image format, like SVG or PNG, that's readable by humans, AI, and renderers alike. Instead of treating screenshots, proprietary design files, or framework-specific code as the primary artifact, .gui explores what happens when the design itself becomes the portable artifact.We're Still Early We're still in the early days of AI-assisted interface design. The workflows are evolving quickly, and it's unlikely that a single tool or approach will solve everything. Images, code, design tools, connected workflows, and portable formats will probably all have a role to play. I don't claim that .gui is the final answer. It's simply my attempt to explore one piece of this much larger shift. If nothing else, I hope it encourages more discussion about the kinds of design artifacts we'll need as AI becomes a permanent collaborator in how we design and build user interfaces.If you'd like to explore the project or challenge the ideas, I'd love to hear your thoughts.