Designing in the Material: Why Designers Must Understand Code
Leverage AI to design directly in code rather than static image-based files.
1The Architect's Material Lesson
Howard Roark’s philosophy in The Fountainhead emphasizes that the material determines the final shape of any structure. Digital designers often treat design files as the primary source of truth, ignoring the actual material: code. Just as architects study stone, designers must understand the inherent capabilities and limitations of the browser environment.
2Limitations of Static Files
Design files represent a single state at one specific width with static data. Real-world product usage involves dynamic variables like translation length, empty lists, network failures, and varying device widths. When designers rely solely on static drawings, they leave critical edge cases to be decided by engineers without proper design oversight.
3Code as the Source
Transitioning to code-based design allows for precise control over interactions. While a design file treats a button as a vague adjective like tactile, code defines it through specific numerical values for stiffness and timing. Building in code ensures the design file acts as a mirror, reflecting the actual product state accurately.
4AI Removes Syntax Barriers
The historical argument that designers must learn to write complex HTML or JavaScript is now obsolete. AI models can generate code based on descriptive prompts, allowing designers to focus on the screen's behavior. Designers now correct the output by evaluating the result, similar to an architect inspecting a construction site.
5The Role of Code Review
While AI tools are improving, they are not yet perfect. In a 2025 developer survey, 66 percent of developers cited nearly-correct AI answers as a major frustration. Engineers remain the primary owners of system integrity, but designers no longer need to manually write syntax to ensure their vision is implemented correctly.
6Judging Output Over Syntax
Designers should evaluate their work by testing the product directly rather than reading code. This involves checking responsiveness at 320 pixels, testing long data strings, and simulating offline states. These tests require no programming knowledge, only a deep understanding of how the digital material behaves under various real-world constraints.
7Essential Skills for Designers
Instead of syntax, designers should master layout flow, data structures, and server-side costs. Understanding what a screen reader announces or how a field behaves when empty is crucial. By learning how to run products locally and asking AI to explain changes, designers gain control over the final user experience.
8Redefining the Design Process
The core principle remains that the purpose and material determine the shape of the product. Designers do not need to hold the chisel to understand what the material can cut. By embracing AI as a bridge, designers can finally align their creative intent with the functional reality of the code.