How designers are using AI coding tools to build real products

Yes, designers can build real products with AI coding tools, and the quality is genuinely surprising. From full production websites to award-winning event apps to custom creative tools, AI coding assistants like Claude Code and Cursor let designers go from concept to working product without writing code from scratch. The barrier that used to exist between designing something and building it has dropped significantly.

I’m Fergus Hannant , Senior Product Designer at Fifty Five and Five with over seven years of experience creating digital products across legaltech, healthtech, insuretech, and B2B SaaS. I recently designed and built the Fifty Five and Five website from scratch using Claude Code, without relying on WordPress or any web building platform. The result scores 100/100 on Google PageSpeed and is fully optimised for SEO and GEO. A year ago, that would have required a developer. Now a designer with the right AI coding tools can ship it.

This goes deeper into the product development side of AI for designers . Not a tool roundup, but what actually happens when a designer starts building with AI, what you can realistically produce, and why the real value goes beyond working solo.

AI code generation and the rise of vibe coding

AI code generation has reached the point where non-developers can describe what they want in plain language and get working output. The shift happened fast. In February 2025, Andrej Karpathy, former Tesla AI director and OpenAI researcher, coined the term “vibe coding” to describe a new way of building software: “where you fully give in to the vibes, embrace exponentials, and forget that the code even exists” (Karpathy ).

The concept is straightforward. Instead of learning syntax and writing code line by line, you describe what you want to build in natural language. The AI generates the code. You review the output, test it, and iterate by describing what needs to change. The loop is closer to giving design feedback than traditional programming.

What makes this particularly relevant for designers is that we already think in the structures AI coding tools need. User flows, component hierarchies, layout systems, interaction patterns: these are the building blocks of good software, and designers work with them every day. When I describe a feature to Claude Code, I’m drawing on the same thinking I use in Figma. The difference is that now the output is a working product, not a static mockup.

The scale of what people are building this way is striking. Among Y Combinator’s Winter 2025 cohort, 25% of startups had codebases that were 95% AI-generated (TechCrunch ). These weren’t non-technical founders scraping by. They were capable builders who found that AI code generation was faster and often better than writing everything manually.

That said, vibe coding works for designers specifically because of the design skills you already have. Understanding user behaviour, structuring information clearly, thinking in components and systems: AI handles the syntax, but those decisions still need a human with design experience behind them.

What designers can actually build with an AI app builder

The range of what designers can build with an AI app builder goes well beyond prototypes. These are functional products that people use in real contexts, not rough demos to get stakeholder approval. Three projects from my own work show the range.

Production websites. I took the Fifty Five and Five website from concept to production using Claude Code, without WordPress or any web building platform. The site scores 100/100 on Google PageSpeed and is fully optimised for SEO and AI search. Not a template. A custom site that the team can update and maintain directly. This was the project that proved to me a designer could ship a production website to a professional standard using AI coding tools. Not a side project or an experiment, but the actual company website that clients visit every day.

Event activations and interactive experiences. For the TCS London Marathon, I designed and built a runner avatar app that let visitors at the Expo create a personalised 3D avatar and watch themselves cross the finish line in a photo-realistic video. I started in Figma mapping the user flows, then moved to Claude Code to build the front end and get the experience working in real time. One of the harder parts was recreating the iconic finish-line environment (the Mall, Buckingham Palace, the finish tape) that the 3D avatars would be rendered into. We used AI image tools and bespoke video tech to produce the final sequence. Over 1,500 personalised videos were generated across three days, and the project won a Drum Award (case study ). Seeing thousands of runners use something I designed and built is a highlight I won’t forget.

Custom creative tools. I’ve built bespoke tools for my own design workflow using Claude Code: a texture brush that lets me apply texture samples to images with grain and noise controls, and a pixel tool that creates pixelated versions of images with adjustable settings. These came out of a specific frustration: AI-generated images often look too clean and too flat. I wanted to add character back in, and rather than relying on Photoshop workflows, I built exactly what I needed. I find it exciting that AI coding tools let me explore creative ideas I wouldn’t have considered before.

Internal tools and process automations. Dashboards, content management flows, and workflow tools that solve specific team problems. These don’t need to be polished products: they need to work reliably and save time.

The pattern across all of these: I start in my comfort zone (Figma for design, user flows, and layout), then move to AI coding tools for the build. The design thinking comes first. The AI handles the implementation. And the iteration loop is fast, often faster than going back and forth with a developer on revision rounds.

Things still break. AI-generated code sometimes produces unexpected behaviour, and you need enough understanding of what you’re building to spot problems and describe fixes clearly. AI handles the syntax, but the decisions about structure, user behaviour, and product quality still sit with the designer.

The AI coding assistants that work for designers

The AI coding assistants that work best for designers share a few qualities: they accept natural language input, they provide visual feedback quickly, and they let you iterate without needing to understand the underlying code in detail. No single tool covers every use case, so most designers end up using two or three.

Claude Code is a terminal-based AI coding assistant with strong reasoning capabilities. It reads your project files, understands the context, and generates code that fits within an existing codebase. I use it as my primary tool for building full applications. The growth in adoption reflects how capable it has become: Claude Code went from 4% to 63% developer adoption in eight months, overtaking GitHub Copilot (Pragmatic Engineer ). For designers, the strength is that you can describe what you want in plain language and Claude Code generates production-quality output. The trade-off is that it runs in the terminal, which feels unfamiliar at first if you’re used to visual tools.

Cursor is an IDE (code editor) with AI built directly in. It feels closer to a design tool than a traditional code editor because you can see your changes in real time and interact with the AI inline. For designers who want more visibility into the code being generated, Cursor offers a middle ground between pure vibe coding and traditional development.

Figma Make is Figma’s response to the vibe coding movement. It generates working applications from within Figma, using your existing design system context. For designers, the appeal is obvious: you stay inside the tool you already use daily. It works best for generating prototypes and smaller applications that build on an established design system, an area where AI design systems are already shifting how designers work.

Google Stitch is a new AI design tool from Google Labs that generates complete UIs from text descriptions or uploaded sketches. It exports production-ready HTML, Tailwind CSS, or JSX, and has one-click Figma integration so you can refine the output in your existing workflow. For designers, it sits in a useful space between ideation and production: fast enough for exploring directions, structured enough that the output is genuinely buildable.

Riff (formerly Databutton) is browser-based and good for quick app prototyping without any local setup. I’ve used it at Fifty Five and Five for building small tools and testing ideas before committing to a larger build. The speed from idea to working prototype is particularly useful early in a project.

Replit is another browser-based option with an AI agent that can build applications from descriptions. It’s accessible for designers with no coding background at all, though the output tends to need more refinement for production use.

The tool matters less than understanding what each one does well. 84% of developers now use or plan to use AI tools in their work (Stack Overflow ). For designers, adoption is earlier but accelerating. Start with one tool, get comfortable with the workflow, and expand from there. I started slow with Claude Code, building small things first, and that foundation made it possible to take on larger projects with confidence.

How AI product development changes the designer-developer handoff

AI product development does not mean designers should try to replace developers. It means designers can now go much further on their own, and the quality of what they produce changes the conversation with product teams and engineering entirely.

Consider what the handoff used to look like. A designer creates screens in Figma, annotates interactions, writes documentation, and passes it to a developer who interprets all of that into working code. Information gets lost. Assumptions diverge. The gap between design intent and built reality is where most product friction lives.

Now consider a designer who can hand over a working prototype built with AI coding tools. Not a static file, but a functional product with real interactions, real data flows, and real user behaviour. The developer’s job shifts from “interpret this design” to “refine and scale this working thing.” That’s a fundamentally different starting point.

Designers who build, even with AI assistance, develop a sharper sense of what’s technically feasible. They ask better questions in sprint planning. They design components that work with real constraints rather than idealised ones. They catch interaction problems earlier because they’ve tested the behaviour themselves, not just imagined it in a prototype.

The Figma AI 2025 Report found that designer satisfaction with AI tools sits at 69%, compared to 82% for developers (Figma ). That gap partly reflects the fact that designers are still finding where AI coding tools fit into their existing workflows. Building with these tools, even on small projects, is one way to close that gap. The more you understand what the tools can do, the more effectively you use them.

At Fifty Five and Five, this shift has changed how I work with the rest of the team. I can take a concept further before involving a developer, which means the conversations we have are more specific and more productive. The developer gets a head start. I get a built product that more closely matches the design intent. Both sides benefit.

The real value of AI coding tools for designers isn’t independence from developers. It’s the ability to go further, produce higher quality output, and give the people you collaborate with something clearer and better to work from. That makes designers more valuable, not less.

Can designers build real products with AI coding tools?

The question was whether designers can build real products with AI coding tools. They can, and the products are better than most people expect. From production websites scoring 100/100 on PageSpeed to award-winning event apps used by thousands of runners, AI coding tools have opened up a range of work that designers couldn’t access before.

What I’ve found through building real projects:

• AI code generation and vibe coding have lowered the barrier to building, but designers succeed because they already think in user flows, component structures, and systems
• The range is wide: production websites, event activations, custom creative tools, internal applications
• Pick AI coding tools that match your workflow and use two or three for different purposes, just as you would with any design toolkit
• The real payoff isn’t doing it all yourself. It’s that going further on your own gives product teams and developers clearer, better things to work with
• Start slow to build understanding, then move quickly once you know what works

A lot of this is down to experimentation. AI coding tools are evolving fast, and the designers getting the most from them are willing to test, evaluate, and refine their approach. This is part of the broader shift explored in AI for designers : not replacing designers, but changing what we spend our time on. The design thinking still drives the outcome. The tools just let you take it further than a mockup.

If you’re a designer exploring what AI coding tools can do, get in touch . We build with these tools every day and can help you figure out where they fit.

Frequently asked questions