The Designer-Developer's AI Toolkit: From Concept to Production
Over the course of three years of experimenting with AI tools in my design and development workflow, I've discovered that the real magic isn't in any single tool—it's in how they work together.
The 70% Problem in Design and Development
Before diving into my workflow, it's crucial to understand what I call the "70% problem"—a phenomenon perfectly captured by a recent observation from product manager Peter Yang: non-technical people can use AI to get 70% of the way to a working prototype surprisingly quickly, but that final 30% becomes an exercise in diminishing returns.
This isn't just about coding—it applies to the entire design-to-development pipeline. AI can rapidly generate impressive-looking interfaces and working prototypes, but the gap between "looks good in a demo" and "works reliably for real users" still requires deep expertise in design thinking, system architecture, and user experience principles.
The key insight: AI tools help experienced practitioners more than beginners. They're like having a very eager junior team member who can work incredibly fast but needs constant guidance and quality control. As Addy Osmani and Gergely Orosz describe in "How AI-assisted coding will change software engineering: hard truths", this "70% problem" is a recurring pattern: AI tools accelerate prototyping and routine coding, but the final 30%—robustness, maintainability, and polish—still demands human expertise.
Senior engineers use AI to speed up what they already know how to do, while juniors risk building "house of cards code" by accepting AI output without critical review.
The paradox: AI democratizes access, but amplifies the productivity of those with deep domain knowledge.
My Four-Stage AI Workflow
Over the past year, I've developed a workflow that leverages four distinct AI tools, each optimized for a specific stage of the design-to-development process:
Stage 1: Concept Development with ChatGPT
What it's for: Transforming rough ideas into structured briefs and design requirements Every project starts with an idea that's usually half-formed and full of assumptions. Instead of jumping straight into design tools, I begin with ChatGPT to develop and refine the concept.
How I use it:
- Brain dump sessions: I describe my rough idea, target audience, research insights, and business goals
- Requirements extraction: ChatGPT helps me identify unstated assumptions and missing requirements
- Brand identity development: We iterate on visual direction, tone of voice, and positioning
- User journey mapping: Breaking down complex user flows into manageable components
Example prompt pattern:
I'm designing a financial wellness app for freelancers who struggle with irregular income.
Help me develop a comprehensive brief including:
- Core user problems and jobs-to-be-done
- Key features that address these problems
- Visual and interaction design principles
- Technical considerations for MVP
Ask me clarifying questions to develop this fully.
Why this works: ChatGPT excels at structured thinking and asking the right questions. It forces me to articulate assumptions and consider angles I might miss. The iterative conversation format helps refine ideas before any visual work begins.
Stage 2: Iterations with different AI Tools
Stage 2 consists of multiple iterations using various AI tools to refine the product. Initially I use v0, iterate, document, then feed the information to Figma Make to explore on the interaction and brand layer as I have found it to be particularly effective for visual and multi-sensorial design while v0 convinced me more on the functional part.
Stage 2.1: Structural Prototyping with v0
What it’s for: Building the first working version of the product — layouts, components, and data structure.
After refining the concept in ChatGPT, I move into v0 (Vercel’s AI-powered frontend builder). This is where ideas start to take the form of a functioning app. Instead of drawing pretty screens, I want to see if the structure works: components, responsiveness, and database logic.
How I use it:
- Skeleton first: Generate React components with TypeScript and state management
- Database scaffolding: Let v0 draft schemas, relations, and CRUD endpoints
- Responsive defaults: Ensure layouts adapt to different screen sizes early
- Reusable architecture: Start modular so the code can scale
- Documentation: When features and components are done, ask for proper documentation of the application ("Create readme.md, document all components in components/readme.md") - this will both help later in Stage 3 when transferring to production code.
The advantage: v0 creates output that’s close to production-ready, with proper component structure, TypeScript, and even data handling. It accelerates that “blank page” phase and gives me something testable.
The limitation: The generated code still needs rework. Architecture, naming, and logic aren’t always clean, but the point is speed — getting a real app skeleton I can iterate on.
Stage 2.2: Brand & Interaction Layer with Figma Make
What it’s for: Adding polish, immersion, and interaction design to the working skeleton.
Once I have a functional baseline from v0, I move into Figma Make to shape the experience. This is where the app starts to feel like a brand, not just a code scaffold.
My approach:
- Context-rich prompting: Feed the v0 skeleton, documentation and ChatGPT brief into Figma Make
- Component-driven exploration: Refine single UI elements, designed high-fidelity in Figma and scale them into flows
- Playful immersion: Use Make’s generative power to explore wild concepts (mini-games, landing pages, tone-of-voice explorations)
- Visual realism: Replaces lorem ipsum with believable copy and data
The reality check: Figma Make creates fast, fun prototypes, but it’s not production code. Its strength is exploration, not robustness. That’s why using it after v0 makes sense — it layers polish, identity, and interaction design onto a working structure.
Stage 3: Production Refinement with VS Code + AI Tools
From prototype to production: where expertise matters most.
Once the app skeleton and brand layer are in place, it’s time for real engineering. This is where I move into VS Code, using GitHub Copilot or Cursor to refine, optimize, and deploy production-ready code.
What happens here:
- Migration: Move the v0 codebase to the target stack (NextJS, Nuxt, etc.)
- Refactoring: Break big components into focused modules
- Performance: Add lazy loading, caching, and speed tweaks
- Accessibility: Implement ARIA labels, keyboard navigation, and focus management
- Error handling: Build robust error states and edge case coverage
- Testing: Generate unit and integration tests
- DevOps: Set up CI/CD and deployment
As mentioned earlier, this stage demands judgment and experience. AI can accelerate the work, but only if you know what “good” looks like. The difference between a flashy demo and robust software is all in the details: architecture, performance, security, and maintainability.
At 14, I attended a student job fair. A recruiter told me:
“If you don’t excel at maths in high school, maybe you can vacuum-clean our office.”
That single line — along with other encounters with people who thought only in binary terms — discouraged me from programming for years. It made the whole field feel like a toxic, hyper-competitive environment rather than an open space for creativity.
Later I discovered voices like Douglas Rushkoff, who argue that technology isn’t meant to be a gatekeeping arena for math prodigies, but a cultural medium shaped by human values. That perspective helped me reframe programming not as a contest of who’s the smartest and fastest in the room (which felt that way in high school), but as a tool for making ideas real — and accessible.
As I grew, I realized the “developer pantheon” — Ada Lovelace, Linus Torvalds, Grace Hopper — weren’t superhuman. They’re skilled, but also just people — juggling families, deadlines, and messy workflows. The silos between designer and developer are dissolving, and AI is accelerating that shift.
"The hottest new programming language is English."
— Andrej Karpathy
"Use AI to accelerate, not replace, your judgment."
— Addy Osmani & Gergely Orosz
Used wisely, AI doesn’t just help us work faster — it helps us work smarter, with more focus on what truly matters: people, problems, and experiences worth building.
The Human Element: When AI Helps vs. When It Hurts
After extensive use of these tools, I've identified clear patterns about when AI accelerates my work versus when it becomes a hindrance:
AI Excels At:
- Rapid iteration on known patterns: When I understand what I want to build, AI can implement it quickly
- Boilerplate generation: CRUD operations, component scaffolding, basic styling
- Exploration and brainstorming: Generating alternatives and surfacing considerations I might miss
- Content generation: Realistic data, copy variations, documentation
AI Struggles With:
- Novel user experience patterns: Truly innovative interactions require human creativity and "Creative AI Direction"
- Complex state management: Multi-step flows with edge cases and error states
- Performance optimization: Understanding when and how to optimize requires systems thinking
- Accessibility: AI often generates div-heavy markup that fails accessibility standards
- Strategic product decisions: Understanding user needs and business constraints
The "Knowledge Paradox"
The most counterintuitive discovery: AI tools help experienced practitioners more than beginners. This creates what I call the "knowledge paradox":
- Experienced designers/developers use AI to accelerate what they already know how to do
- Beginners try to use AI to learn what to do
- The results differ dramatically
When I use AI coding tools, I'm constantly evaluating suggestions, refactoring generated code, and applying architectural principles. Beginners often accept AI output without the context to evaluate its quality, leading to technical debt and maintenance nightmares.
Practical Lessons Learned
Start Small and Stay Modular
Break every project into small, focused components. AI tools work best with narrow, well-defined tasks. Large, complex prompts often produce impressive demos that fall apart under real-world pressure.
Maintain the "Trust but Verify" Principle
Always review AI-generated output with a critical eye. I treat AI suggestions like code reviews from a junior developer—fast and creative, but requiring careful evaluation.
Focus on the 30%
The final 30%—the difference between a working demo and production software—is where human expertise shines. This includes:
- Edge case handling
- Error message design
- Performance under load
- Accessibility compliance
- Security considerations
- Maintainable code architecture
Preserve Design Craft
As AI makes basic implementation faster, the differentiator becomes craft—attention to details, understanding user needs, and creating experiences that feel thoughtful and polished.
Looking Forward: The Rise of Agentic Design Tools
The next wave of AI tools will likely be more autonomous—able to plan, execute, and iterate with less human guidance. We're already seeing early signs with tools like Anthropic's computer use capabilities and more sophisticated AI agents.
But this evolution reinforces rather than replaces the need for human expertise. As these tools become more powerful, the ability to guide them effectively—to set appropriate constraints, evaluate outputs, and maintain quality standards—becomes even more valuable.
The Bottom Line
AI hasn't made me a better designer or developer by replacing my skills—it's made me more productive by amplifying them. I still do multiple iterations on things that come to my mind along the journey (be it organic user feedback or shower thoughts) - but the threshold of building is flattening.
The workflow I've described isn't about letting AI do the work; it's about using AI to focus on the work that matters most: understanding users, solving real problems, and creating experiences that truly serve people's needs.
The teams and individuals who will thrive in this AI-augmented future are those who master both the tools and the fundamental principles of good design and development. AI can help us build faster, but it's still up to us to know what's worth building.
The goal isn't to write more code faster or generate more designs quickly. It's to build better software and create better experiences. Used wisely, AI can help
AI Tools I use on a daily basis
- Ollama (Local, privacy-focussed brainstorming)
- ChatGPT (Ideas, Scripts, Brainstorming, ...)
- Visual Studio Code (Code Editing, Debugging, ...)
- v0 (Iterative Prototyping with exportable code, bringing ideas to life)
- Figma Make (Rapid prototyping - excels with with well-developed briefings)
- Obsidian Web Clipper (tailored web article summaries)
- ...