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

Speaker A: This audio is presented by Hacker Noon. Where anyone can learn anything about any technology. AI is changing how we ideate, Design and build User Interfaces By Jinson Joni 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. Thelearn 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. These 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 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 jumped 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 brainstorming Strengths fast inspiring low friction concept generation trade offs Difficult to edit precisely, iterate consistently or reuse image generation. Models have gotten remarkably good at visual exploration. Need 10 different hero sections. A, uh, mobile banking app, a futuristic Dashboard AI can produce concepts in seconds, which makes it hard to beat for brainstorming and creative exploration. The m catch is that images are still mostly endpoints. The moment you want to change the spacing, rename a component, introduce a design token or 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 implementation strengths Real code executable Close to production trade offs Slower visual exploration requires technical context harder for rapid design iteration on the other end of the spectrum is the Code first workflow. Modern AI model scan 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 collaboration strengths Rich editing components Design systems Familiar workflows trade offs Artifacts remain tied to proprietary tools and ecosystems Design 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 UH workflows best Reducing friction between existing tool strengths, AI can work across multiple systems without manual handoffs. Tradeoffs improves the workflow, but usually not the underlying design artifact. Another direction that's picking up Steam is AI uh, 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, uh, 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 I 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 Auser 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. Cogeneration 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, they 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 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, uh, 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 uh 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. Thank you for listening to this hackernoon story read by artificial intelligence. Visit hackernoon.com to read, write, learn, and publish.