Designer Cole Derochie used Astra and a Figma reference to build 11 interactive styles, then corrected the chronology in public.
By [Ryan Merket](https://runtimewire.com/author/ryan-merket)
· Published
Primary source: [X](https://x.com/colderoshay/status/2101679582734872751)
Why it matters #
Derochie's project shows how AI coding can turn design research into working software quickly, while its public corrections expose the verification work that generated code does not remove.
Cole Derochie (@colderoshay) published an interactive history of the Mac button on September 20th, compressing interface styles from 1984 through 2026 into a control that changes as users move along a timeline.
https://x.com/colderoshay/status/2101679582734872751 The project, called Buttons, in time, turns a familiar interface component into a compact design archive. Users can click or drag across the timeline to move between years and press the displayed button to see its active state. The page contains 11 styles and supports arrow keys, Home and End navigation, and Space to start or the animation.
Derochie built the experience with Astra, OpenAI's current flagship model, and a Mac button history file published by designer Zulal. When asked how the project was made, Derochie replied that it was "definitely vibe coded" and said he spent additional time correcting the output before publishing the finished version.
That workflow fits Derochie's broader practice. He founded the Today in Design newsletter and has repeatedly used small interface studies to examine how software components change over time. In 2023, he recreated Shopify's updated Polaris buttons as a Figma community resource. He later spent roughly a year and a half at Shopify before joining restaurant software company Owner as a designer working across design and AI, according to his public profile.
One button, 11 design regimes
The timeline begins with the hard black borders and inverted pressed state associated with the original Macintosh interface. Moving forward introduces dimensional gray controls, stronger bevels, glossy Aqua-era surfaces, flatter treatments and the rounded geometry of recent macOS releases.
The page keeps the label and basic interaction consistent while changing the visual treatment around them. That constraint makes the shifts easy to compare. Shadows move from functional indicators of depth to softer decoration. Borders fade, return and fade again. Corners become progressively rounder. Color moves in and out of the primary action.
The implementation also treats interaction as part of the historical record. Each button can be pressed, showing how its designers communicated that the system had received an input. Apple's interface guidance has long treated this feedback as essential: early Mac buttons inverted when pressed, while newer controls use combinations of material, tint, motion and depth.
Derochie's reconstruction should be read as a visual essay rather than a definitive Apple archive. He said the order of the 1984 and 1986 designs was technically reversed because the chosen sequence produced a smoother transition. After other designers challenged details elsewhere in the timeline, he updated the live page to make several entries more accurate.
That public correction loop matters because AI-generated interface work can produce a convincing sequence before it produces a defensible one. Astra supplied implementation speed. Zulal's reference supplied the initial visual record. Derochie still had to decide which examples counted, locate discrepancies and revise the result after publication.
Liquid Glass complicates the ending
The final years also expose a harder classification problem. Several people asked why the timeline did not culminate in a translucent Liquid Glass primary button. Derochie said he could not find a current macOS example of a glassy primary call-to-action, even though he agreed that glass was the dominant wider design trend.
Apple introduced glass button styles with its 2025 design system, including controls intended to float above content. Its own guidance recommends using the material selectively. A platform can therefore support a visual treatment without making that treatment the standard answer for every primary action.
Derochie's timeline captures that ambiguity instead of forcing a cleaner historical arc. Interface history rarely advances through complete replacements. Old patterns survive in dialogs, toolbars and applications compiled against earlier frameworks, while new materials arrive unevenly according to context.
The result is a small but useful example of what AI-assisted prototyping does well. A designer can turn a static community reference into a responsive, keyboard-accessible artifact in an evening. The historical judgment, sourcing and corrections remain manual. The code is becoming the inexpensive part.