Design Engineering and AI Prototyping Strategies
Maggie Appleton explores the convergence of design and engineering in the AI era. Learn how to leverage agentic coding for rapid prototyping, why physical sketching remains critical for spatial reasoning, and how to define product nouns for complex AI tools.
The Convergence of Design and Engineering
The role of the design engineer is evolving from a hybrid skill set into a critical strategic function, particularly within AI-driven product development. Maggie Appleton, a design engineer at GitHub Next, argues that product design is fundamentally problem-solving with different materials. While engineers work with code and data flow, designers work with space, weight, and motion. However, in complex domains like developer tools and AI, the boundary between these disciplines dissolves. Designers must understand backend constraints to create viable interfaces, and engineers must grasp visual hierarchy to build usable products. This convergence is not merely about aesthetics but about defining the "nouns and verbs" of a product. In abstract fields like AI, where concepts like "agents" and "MCPs" lack physical analogs, creating a coherent set of user-facing primitives is a primary design challenge. Success depends on reducing complexity to a canonical set of terms that users can predict and manipulate.
The Limits of Agentic Design
Despite the rapid advancement of AI coding agents, they remain poor substitutes for human design intuition. Appleton highlights a critical mismatch: agents are optimized for text output, which is an ideal format for machines but a poor input for human decision-making. When agents present long lists of choices or text-heavy explanations, they overwhelm users, leading to decision fatigue and poor outcomes. Furthermore, agents lack spatial reasoning. They cannot "see" a layout, resulting in common errors like overlapping text or incorrect spacing. Consequently, the most effective workflow involves a hybrid approach. Designers use physical media, such as pen and paper, to explore spatial relationships and visual composition. This manual step is irreplaceable because it allows for rapid, low-fidelity iteration that agents cannot replicate. Once the visual shape is defined, agents can be used to implement the code, but the initial conceptual work remains a human domain.
Strategic Implications for Product Teams
For product teams, the shift toward agentic development creates a new bottleneck: alignment. While individual productivity increases with AI, team alignment decreases because agent sessions are often private and local. This "one developer, two dozen agents, zero alignment" problem requires new collaborative tools that allow teams to share context, review decisions, and agree on specs before implementation. Additionally, teams must resist the urge to reinvent basic UI patterns. User research consistently shows that familiar interfaces, such as tables for data extraction, reduce cognitive load and increase trust. Innovation should focus on enhancing these familiar primitives rather than replacing them with novel, confusing paradigms. Finally, organizations must account for "capability gaslighting," where AI models inconsistently perform tasks. Teams should build verification steps into their workflows rather than trusting the model's self-reported success, ensuring that quality standards are maintained despite the stochastic nature of large language models.
Key insights
-
Agents lack spatial reasoning and visual context, making them ineffective for initial design ideation. Physical sketching remains superior for exploring layout, composition, and visual hierarchy before coding begins.
Impact: Teams that integrate manual sketching into their AI workflows will produce more coherent and visually accurate prototypes, reducing rework during implementation.
-
The primary challenge in designing AI tools is defining clear nouns and verbs for abstract concepts. Without a canonical set of terms, users cannot form a mental model of the system's capabilities.
Impact: Clear semantic definitions reduce user confusion and support, leading to higher adoption rates for complex AI-powered products.
-
Agentic coding tools are currently individualistic, creating a gap in team alignment. There is a critical need for multiplayer interfaces that allow teams to share agent context and decisions.
Impact: Developing collaborative agent interfaces will unlock the full potential of AI-assisted development by ensuring team-wide consistency and shared context.
-
Users prefer familiar UI patterns like tables and sidebars over novel paradigms, even in AI applications. Novelty often increases cognitive load without providing proportional value.
Impact: Leveraging established UI patterns accelerates user onboarding and reduces the learning curve for new AI features.
-
AI models exhibit "capability gaslighting," where performance is inconsistent across similar tasks. Teams cannot rely on a single successful interaction to predict future model behavior.
Impact: Implementing robust verification and testing protocols is essential to mitigate the risks of inconsistent AI performance in production environments.
Action items
-
Institute a mandatory sketching phase for all new feature designs before engaging AI coding agents. Use physical media to explore spatial relationships and visual composition.
Impact: This ensures that the visual intent is clearly defined before implementation, reducing the likelihood of AI-generated layouts that fail to meet design standards.
-
Create a glossary of product nouns and verbs for your AI tool. Define how users will interact with abstract concepts like agents, sessions, and skills.
Impact: A clear semantic framework improves user understanding and reduces support tickets related to confusion about system capabilities.
-
Build interactive prototypes with adjustable sliders for key design variables such as color, animation speed, and layout spacing. Use these "jigs" to refine the user experience in real-time.
Impact: Dynamic prototyping allows for faster iteration and more precise tuning of user experience parameters compared to static mockups.
-
Evaluate your current team's alignment process for AI-assisted development. Identify gaps in how decisions and context are shared among team members using agents.
Impact: Addressing alignment gaps will improve team efficiency and ensure that AI-generated code aligns with broader product goals and architectural standards.
-
Implement verification steps in your AI workflow to check for common design errors such as overlapping text, incorrect spacing, and broken layouts. Do not rely solely on the agent's self-assessment.
Impact: Proactive verification mitigates the risks of "capability gaslighting" and ensures that AI-generated interfaces meet quality standards before release.
Quotes
“I still use paper and pen for like initial brainstorming. You have your notebooks here. Yeah, I brought some along because notebooks aren't dead. I don't think they're going to be dead forever.”
“The hard bit of product design is designing a coherent system that takes all this complexity that could exist, especially in something like DevTools, and reducing it to the simplest possible form you can.”
“I think it's completely fine for developers without access to one to like use models as much as they can. But when models do designs for me, I, of course, just look at them and think that is terrible quality.”