{"title":"Why I Design in Code","slug":"why-i-design-in-code","type":"post","excerpt":"Designing in code eliminates the handoff between mockups and engineering, turning the design phase into the foundation of a production-ready app.","content":"For decades, the software industry has been divided into distinct professions, two of which are designers and developers. Designers would draw pictures of what an app should look like and define the structure and interactions, and engineers translate those pictures into real code.\r\n\r\nIf you are a startup founder looking to launch a digital product today, there is a better way. The traditional process of wireframing and mockups is slow, prone to translation errors, and ultimately produces a dead-end asset.\r\n\r\nI spent decades drawing and designing web applications, and now I design directly in code.\r\n\r\nHere is why the old way is dying, how the industry is shifting, and why designing in code is a strong leverage point for a fast-moving startup.\r\n\r\n## A Brief History of Web Design\r\n\r\nIf you’ve been in the enterprise web space as long as I have, you’ve lived through every era of this evolution. We used to do things the hard way because it was the only way:\r\n\r\n- **The Mockup and Wireframe Era:** We drew low-fidelity boxes to focus business stakeholders on function and form without the distraction of colors and typography. We spent days, sometimes weeks, crafting pixel-perfect Photoshop files to sell the \"look and feel.\"\r\n\r\n- **The Early Prototype Era:** To do early usability testing, we sliced up those mockups in Macromedia Fireworks, stitching them together with image maps just to simulate a button click. We used these as demonstrations and for usability testing with real users.\r\n\r\n- **The Golden Age of Prototypes:** Tools like Sketch and InVision finally gave us a smoother way to link screens together. Eventually, Figma arrived and replaced them all, becoming the king of the modern design-to-development handoff. But even at its peak, Figma was still a sophisticated tool for drawing pictures.\r\n\r\n## The Paradigm Shift: Why Code is the Best Canvas\r\n\r\nToday, AI code tools allow me to bypass the picture-drawing phase entirely. When a founder gives me a concept, I can picture the solution in my head and immediately start building it in the browser.\r\n\r\nHere is why designing in code is a competitive advantage:\r\n\r\n- **Speed to Market:** We aren't waiting two weeks for a design file to be approved before engineering can start. The design *is* the engineering.\r\n\r\n- **Higher Fidelity and Quality:** A picture of a dropdown menu is a poor illusion. A coded dropdown menu handles screen resizing, hover states, and accessibility standards immediately. You see exactly what the user will see, and the same coded interactions you see in the final product can be created during the design phase, saving time.\r\n\r\n- **Compound Leverage:** When you design in drawing tools, the output is an image. When you design in code, the output is the foundational architecture of your full-stack app. The React or Svelte components generated during the \"design\" phase are the same components we will wire up to the database to launch the MVP.\r\n\r\n- **Infinitely Editable:** AI code tools write code fast, and with the right orchestration and validation, we can produce high-quality front-end code and edit it within minutes. We can design the code in components and separate the theme from the functionality, a step beyond merely changing styles; we can apply entirely new skins and switch themes on the fly.\r\n\r\n- **Back-end Prototyping:** Once the design is solid, the backend can be prototyped, API endpoints added, database schemas explored, and API connections made. The code itself can be transformed into a structure that is extensible and production-ready by simply taking the prototype a step further.\r\n\r\nWhen I began my tech career 30 years ago, I taught myself HTML and CSS by designing in code. I had a small website design and web hosting business in the late 1990s. I had all the drawing tools, but I chose to design in code, so I didn't accidentally draw something I couldn't deliver myself. Today I've come full circle, now delivering designs in the native medium of web applications.\r\n\r\n## The Elephant in the Room: What About Figma?\r\n\r\nI know Figma has a large, loyal following. They are not blind to this industry shift, and they are adapting.\r\n\r\nRight now, Figma is rolling out AI features to survive the transition. They’ve introduced tools like First Draft (text-to-UI generation) and Figma Make, which attempt to blur the line by allowing designers to modify production code directly from the Figma canvas. They are pushing developer-centric features like Code Connect and native Dev Mode to keep engineers inside their ecosystem.\r\n\r\nBut here is my prediction: Figma will eventually lose this battle.\r\n\r\nThe gravity of native code is strong. As AI coding assistants and visual code-generation tools become more deeply integrated into engineering environments, the need for a separate \"canvas\" intermediary will evaporate. Ultimately, I believe Figma will either be slowly marginalized by pure AI code tools or acquired by a larger developer-tooling company, not for its drawing canvas, but purely to acquire its user base of product builders.\r\n\r\n## What This Means for Founders\r\n\r\nWhen you hire a fractional CTO/CPO, or when you are interviewing potential partners like agencies or freelancers, you aren't just hiring people to manage a project; you are hiring a philosophy of execution.\r\n\r\nAs a founder, you should be aware of these trends because they directly impact your time and money. When you receive bids from potential partners, look closely at their proposed engagement models. If a team is pitching a lengthy, traditional phase of wireframing and static mockups before any code is written, take note. It is a clear indicator to consider whether that model maximizes your runway or relies on an outdated, slow-moving handoff tradition.\r\n\r\nBy designing in code, I eliminate handoff friction, prevent \"lost in translation\" errors between design and engineering, and build functional, testable software from day one. I don't waste your runway drawing pictures of an app. I spend it building the app itself.","publishedAt":"2026-06-04T17:29:14.144Z","updatedAt":"2026-06-04T17:29:14.146Z","author":{"name":"Michael Janzen"},"categories":[{"name":"Web Design","slug":"web-design"}],"tags":[{"name":"ai-first","slug":"ai-first"},{"name":"ai-adoption","slug":"ai-adoption"},{"name":"product-strategy","slug":"product-strategy"},{"name":"ux design","slug":"ux-design"}],"featuredImageUrl":"https://xqbrqyp8c9smsddf.public.blob.vercel-storage.com/uploads/1780593612057-why-i-design-in-code.jpg","aeo":{"summary":"This post argues that designing directly in code, enabled by modern AI coding tools, is faster and more effective than traditional wireframing and mockup workflows using tools like Figma. It outlines the historical evolution of web design, the advantages of code-first design (speed, fidelity, compound leverage, editability, backend prototyping), and predicts Figma will be marginalized as AI code tools mature. The target audience is startup founders evaluating fractional CTOs, agencies, or freelancers for digital product development.","questions":[{"q":"What does it mean to design in code?","a":"Designing in code means building the user interface directly in a working programming language like React or Svelte during the design phase, rather than drawing static pictures or mockups in a tool like Figma, so the design output is the actual functional foundation of the application."},{"q":"What are the advantages of designing in code versus using Figma?","a":"Designing in code offers faster speed to market by eliminating design-to-engineering handoff, higher fidelity since coded components handle real interactions and accessibility, compound leverage because the output becomes production code, infinite editability through AI tools, and the ability to extend directly into backend prototyping."},{"q":"Will AI replace Figma for product design?","a":"The author predicts Figma will eventually lose ground to AI code tools and either be marginalized or acquired by a developer-tooling company, because as AI coding assistants integrate deeper into engineering environments, the need for a separate drawing canvas intermediary will disappear."},{"q":"How should startup founders evaluate design and development partners?","a":"Founders should scrutinize proposed engagement models and be cautious of teams pitching lengthy traditional wireframing and static mockup phases before any code is written, since that approach may waste runway compared to a code-first workflow that produces functional, testable software from day one."},{"q":"What is Figma Make and First Draft?","a":"First Draft is a Figma AI feature that generates UI from text prompts, and Figma Make allows designers to modify production code directly from the Figma canvas, both introduced as part of Figma's effort to adapt to AI-driven design and development workflows."}],"entities":[{"type":"SoftwareApplication","name":"Figma","description":"A collaborative web-based interface design tool widely used for wireframing, mockups, and design-to-development handoff.","sameAs":"https://en.wikipedia.org/wiki/Figma"},{"type":"SoftwareApplication","name":"Sketch","description":"A macOS-based vector graphics design tool historically used for UI and prototype design.","sameAs":"https://en.wikipedia.org/wiki/Sketch_(software)"},{"type":"SoftwareApplication","name":"InVision","description":"A digital product design platform used to link static screens into clickable prototypes."},{"type":"SoftwareApplication","name":"Macromedia Fireworks","description":"A discontinued bitmap and vector graphics editor used in the early web era for slicing mockups and creating prototypes.","sameAs":"https://en.wikipedia.org/wiki/Adobe_Fireworks"},{"type":"SoftwareApplication","name":"React","description":"A JavaScript library for building user interfaces using a component-based architecture.","sameAs":"https://en.wikipedia.org/wiki/React_(software)"},{"type":"SoftwareApplication","name":"Svelte","description":"A JavaScript framework that compiles components into efficient vanilla JavaScript at build time.","sameAs":"https://en.wikipedia.org/wiki/Svelte"},{"type":"Product","name":"Figma Make","description":"A Figma feature allowing designers to modify production code directly from the Figma canvas."},{"type":"Product","name":"First Draft","description":"A Figma AI tool that generates UI designs from text prompts."},{"type":"Product","name":"Figma Dev Mode","description":"A native Figma feature designed to help engineers inspect and translate designs into code."}],"keywords":["design in code","AI code tools","Figma alternative","startup MVP development","fractional CTO","design to development handoff","rapid prototyping","React components","wireframing and mockups","full-stack app design"]},"site":{"name":"Janzen Works LLC","url":"https://janzenworks.com/"},"_links":{"canonical":"https://janzenworks.com//post/why-i-design-in-code","markdown":"https://janzenworks.com//post/why-i-design-in-code/llm.txt","json":"https://janzenworks.com//post/why-i-design-in-code/data.json"}}