About
graphic
resume
Contact
Apple 2000s Aqua
How I leveraged Antigravity, Git, and modern Design Tokens to build a code-first retro design system without starting in Figma.
Role: Design Engineer / Systems Designer • Stack: HTML5, CSS Variables, Git, npm, Vercel, Antigravity, Skills.sh
Handoff & Tooling: HTML-to-Figma Pipeline, Figma Tokens & Variables
THE SPARK
Skeuomorphic Nostalgia Meets Modern Systems Thinking: Inspired by 98.css and how they recreated the nostalgic charm of Windows 98 with semantic HTML/CSS.
The Vision: Recreating the golden era of early-2000s Apple Aqua UI—glossy jelly buttons, brushed metal textures, pin-striped backgrounds, and layered drop shadows—while adhering to modern, scalable design system architectures.
Code-First Workflow: Tested an AI-augmented design engineering workflow, generating atomic components directly from reference screenshots without drawing vectors in Figma first.
THE WORKFLOW
Developer-Grade Tooling: Navigated npm, managed dependencies, configured local environments, and practiced Git version control with branching, staged commits, and CI/CD on Vercel.
Agentic Coding with Antigravity & Skills.sh: Orchestrated AI agents to execute precise styling constraints, atomic design patterns, and cross-browser CSS rules.
Scalable Design Tokens: Extracted color ramps (Aqua blues, Graphite neutrals, translucent gels), specular highlights, and dimensional gradients as CSS custom properties.
Responsive Layouts & WCAG Compliance: Adapted legacy desktop-centric designs to fluidly scale across modern viewports while maintaining accessible contrast.
CODE TO FIGMA
Reversing Traditional Handoff: Product design usually flows from Figma down to engineering handoff—often leaving a discrepancy between design intent and production reality.
Source of Truth in Code: Engineered real browser rendering, subpixel anti-aliasing, and hover/active pseudo-states directly in CSS.
Imported via HTML-to-Figma: Brought rendered DOM components directly back into Figma as clean auto-layout frames.
Bound Design Variables: Mapped CSS tokens directly to Figma Variables to maintain 1:1 synchronization between code and canvas.
KEY TAKEAWAYS
• Zero-Figma Kickstarts: Generated a production-ready foundation purely through reference analysis, design tokens, and agentic workflows.
• Closing the Fidelity Gap: Eliminates back-and-forth friction between design inspection and front-end implementation.
• Accelerated Iteration Cycles: Building tokens and atoms in code first allows adjustments to radiuses, shadow elevations, and glass filters to update across all components instantly.
Connect on LinkedIn: Jiwon Lee
Apple 2000s Aqua
How I leveraged Antigravity, Git, and modern Design Tokens to build a code-first retro design system without starting in Figma.
Role: Design Engineer / Systems Designer • Stack: HTML5, Modern CSS Variables, Git, npm, Vercel, Antigravity, Skills.sh
Handoff & Tooling: HTML-to-Figma Pipeline, Figma Tokens & Variables
OVERVIEW
Rather than spending days drawing static vectors in Figma, I tested a code-first, AI-augmented design engineering workflow—translating early-2000s Apple Aqua aesthetics into production-grade design tokens and syncing them back to Figma Variables.
THE SPARK
Skeuomorphic Nostalgia Meets Modern Systems Thinking: Inspired by 98.css and how they recreated the nostalgic charm of Windows 98 with semantic HTML/CSS.
The Vision: Recreating the golden era of early-2000s Apple Aqua UI—glossy jelly buttons, brushed metal textures, pin-striped backgrounds, and layered drop shadows—while adhering to modern, scalable design system architectures.
Code-First Workflow: Tested an AI-augmented design engineering workflow, generating atomic components directly from reference screenshots without drawing vectors in Figma first.
THE WORKFLOW
Developer-Grade Tooling: Navigated npm, managed dependencies, configured local environments, and practiced Git version control with branching, staged commits, and CI/CD on Vercel.
Agentic Coding with Antigravity & Skills.sh: Orchestrated AI agents to execute precise styling constraints, atomic design patterns, and cross-browser CSS rules.
Scalable Design Tokens: Extracted color ramps (Aqua blues, Graphite neutrals, translucent gels), specular highlights, and dimensional gradients as CSS custom properties.
Responsive Layouts & WCAG Compliance: Adapted legacy desktop-centric designs to fluidly scale across modern viewports while maintaining accessible contrast.
CODE TO FIGMA
Reversing Traditional Handoff: Product design usually flows from Figma down to engineering handoff—often leaving a discrepancy between design intent and production reality.
Source of Truth in Code: Engineered real browser rendering, subpixel anti-aliasing, and hover/active pseudo-states directly in CSS.
Imported via HTML-to-Figma: Brought rendered DOM components directly back into Figma as clean auto-layout frames.
Bound Design Variables: Mapped CSS tokens directly to Figma Variables to maintain 1:1 synchronization between code and canvas.
KEY TAKEAWAYS
• Zero-Figma Kickstarts: Generated a production-ready foundation purely through reference analysis, design tokens, and agentic workflows.
• Closing the Fidelity Gap: Eliminates back-and-forth friction between design inspection and front-end implementation.
• Accelerated Iteration Cycles: Building tokens and atoms in code first allows adjustments to radiuses, shadow elevations, and glass filters to update across all components instantly.
Connect on LinkedIn: Jiwon Lee
HOME
About
graphic
resume
contact
MADE WITH <3
Apple 2000s Aqua
How I leveraged Antigravity, Git, and modern Design Tokens to build a code-first retro design system without starting in Figma.
Role: Design Engineer / Systems Designer • Stack: HTML5, Modern CSS Variables, Git, npm, Vercel, Antigravity, Skills.sh
Handoff & Tooling: HTML-to-Figma Pipeline, Figma Tokens & Variables
OVERVIEW
Rather than spending days drawing static vectors in Figma, I tested a code-first, AI-augmented design engineering workflow—translating early-2000s Apple Aqua aesthetics into production-grade design tokens and syncing them back to Figma Variables.
THE SPARK
Skeuomorphic Nostalgia Meets Modern Systems Thinking: Inspired by 98.css and how they recreated the nostalgic charm of Windows 98 with semantic HTML/CSS.
The Vision: Recreating the golden era of early-2000s Apple Aqua UI—glossy jelly buttons, brushed metal textures, pin-striped backgrounds, and layered drop shadows—while adhering to modern, scalable design system architectures.
Code-First Workflow: Tested an AI-augmented design engineering workflow, generating atomic components directly from reference screenshots without drawing vectors in Figma first.
THE WORKFLOW
Developer-Grade Tooling: Navigated npm, managed dependencies, configured local environments, and practiced Git version control with branching, staged commits, and CI/CD on Vercel.
Agentic Coding with Antigravity & Skills.sh: Orchestrated AI agents to execute precise styling constraints, atomic design patterns, and cross-browser CSS rules.
Scalable Design Tokens: Extracted color ramps (Aqua blues, Graphite neutrals, translucent gels), specular highlights, and dimensional gradients as CSS custom properties.
Responsive Layouts & WCAG Compliance: Adapted legacy desktop-centric designs to fluidly scale across modern viewports while maintaining accessible contrast.
CODE TO FIGMA
Reversing Traditional Handoff: Product design usually flows from Figma down to engineering handoff—often leaving a discrepancy between design intent and production reality.
Source of Truth in Code: Engineered real browser rendering, subpixel anti-aliasing, and hover/active pseudo-states directly in CSS.
Imported via HTML-to-Figma: Brought rendered DOM components directly back into Figma as clean auto-layout frames.
Bound Design Variables: Mapped CSS tokens directly to Figma Variables to maintain 1:1 synchronization between code and canvas.
KEY TAKEAWAYS
• Zero-Figma Kickstarts: Generated a production-ready foundation purely through reference analysis, design tokens, and agentic workflows.
• Closing the Fidelity Gap: Eliminates back-and-forth friction between design inspection and front-end implementation.
• Accelerated Iteration Cycles: Building tokens and atoms in code first allows adjustments to radiuses, shadow elevations, and glass filters to update across all components instantly.
Connect on LinkedIn: Jiwon Lee
HOME
About
graphic
resume
contact
MADE WITH <3
