Why the Designer Built an App Instead of a Mockup (opens in new tab)
AI is changing design by letting designers create working prototypes rather than only static mockups. While building Toss’s “underlay” component, the author used SwiftUI, AI, and Metal shaders to design interactions directly on an iPhone. The experience reduced the translation gap between design and development and showed that a functional code prototype can become a more accurate specification than a traditional design document. ## Turning End Screens into New Starting Points - Toss identified screens that appear after users finish tasks, such as completing a transfer or payment. - These “dead ends” usually signal the end of an experience and encourage users to leave the app. - The project aimed to turn them into starting points for new experiences through a reusable component that could work throughout the app. ## The Idea Behind Underlay - Existing notification patterns—bottom sheets, toasts, push notifications, and overlays—attract attention but can interrupt what users are doing. - The author found inspiration in removing a shipping label from a moving box and revealing text that had already existed underneath. - This led to the concept of an **underlay**: instead of placing new information on top of the current screen, the component reveals something beneath it. - The component needed to be recognizable as a feature, preserve the existing experience, and remain reusable across the app. ## Designing Interaction with AI and Code - Figma prototypes showed that underlay’s movement mattered more than its static appearance. - Without experience in Protopie or Framer, the author built an iOS playground in SwiftUI using Xcode and AI. - The designer’s role was to: - Describe the intended experience - Select the best options proposed by AI - Evaluate the result on a real device - The process became a cycle of designing, choosing, testing, and refining. ## Building and Refining the Prototype - The author first created a personal playground for quickly experimenting with layouts, buttons, and text. - Each change was tested through actual device interaction rather than static previews. - The prototype was revised hundreds of times because imagined motion often felt different once implemented. - A scanning-light interaction was created to suggest that AI was reading the screen and finding relevant information. - The visual effect used a Metal shader to control pixel-level properties such as: - Light diffusion - Tint and width - Movement speed - Background darkening - The author gradually began adjusting shader values directly, despite having no prior shader or interaction-tool experience. ## Replacing Interaction Guidelines with a Repository - Instead of preparing a detailed document specifying timing, easing curves, and delays, the author gave developers the working prototype repository. - The developers reproduced the core structure almost immediately because they could inspect and run the implementation directly. - During refinement, the designer adjusted values and interactions directly on the developer’s laptop with AI. - A working reference made communication more precise than phrases such as “the motion feels wrong.” - Both the AI and developers could respond to the same concrete behavior rather than interpreting abstract descriptions. ## Designing the Implementation Structure - The production iOS code ended up closely resembling the prototype’s structure. - This happened because the author had built the prototype for rapid user testing and iteration, not specifically for production. - A well-structured prototype allowed design changes to be communicated through code and reused during implementation. - The article argues that a good design is not only visually convincing; its underlying construction should also be viable. - When a prototype is built in a development-ready way, it can function as the specification rather than disposable code. ## Applying the Approach - Start with the best possible experience instead of limiting ideas to what a familiar design tool can express. - Use AI and code to create a working artifact, since real devices reveal details and textures static tools may hide. - When handing off complex interactions, provide executable code or a repository instead of relying solely on written guidelines. - As AI handles more of the “how,” designers increasingly differentiate themselves through what they choose to imagine and build.
