Token-driven design and engineering system built to accelerate product delivery at scale.
6–8 months
Duration
Automotive SaaS
Industry
Web CMS & Tools
Platform
98% Faster
Impact
AE FRAME is an end-to-end design system and CMS builder that transformed custom website delivery from a 7-day manual chaos into a 2-hour automated process. It combines Figma design systems, a modular website builder, AI-assisted code generation, and an internal component library into one scalable ecosystem.
Built for automotive dealers, AE FRAME enables dealers to create fully custom, production-ready websites without sacrificing speed or quality. The system powers global scalability while maintaining absolute design consistency across all variations.
"98% faster delivery—from custom request to live website in 2 hours."
Before AE FRAME, the custom website workflow was chaotic, fragmented, and unable to scale. Every dealer request meant starting from zero.
The Problem – Spaghetti Diagram of Old Workflow
Designers spent 2–3 days on custom Figma work per dealer with no reusable components
Developers added 2–4 days to implement, with manual code translation and no automation
Zero consistency; every dealer website had different branding and components
Growth was limited; each dealer required manual intervention from scratch
My Role & Approach – Systems Transformation Flowchart
As Lead Product Architect & Systems Engineer, I orchestrated the complete transformation—auditing workflows, building a scalable design system, automating code generation, and creating an architecture that handles infinite variations.
Mapped existing workflows, identified bottlenecks, and designed scalable solutions
Built complete design system: foundations, 50+ components, atoms, molecules, global variables
Integrated Claude & Cursor to auto-generate React components from Figma tokens
Built coded component library with 10,000+ variations supporting all dealer needs
Created Figma-to-live editor enabling dealers to build sites without code
Guided 5-person team across product, design, engineering, and quality
I built a four-pillar ecosystem: a comprehensive Figma design system, a modular website builder, an AI-assisted code generation pipeline, and an internal component library supporting 10,000+ variations.
Figma Design System – Atoms, Molecules, Templates Gallery
GIF of Global Variable Update / Theme Switch
I created a complete modular design system as the single source of truth for all dealer websites:
Typography, Colors, Spacing, Layout, Shadows, Icons
Buttons, Inputs, Cards, Badges, Pagination, Vehicle Cards, Team Cards
Section patterns, templates, pre-built website blocks
Primitives, Semantic Tokens, Themes (Light/Dark)
Key Impact: Changing one variable (e.g., primary color) cascades across thousands of components instantly. The system is smart, not just big.
Live Editor Screenshot
Drag & Drop Preview GIF
Dealers can now build fully custom websites in under 2 hours—down from 7 days—using pre-built, configurable blocks:
Result: 98% faster delivery. What took 7 days now takes 2 hours. Fully custom, fully professional.
Screenshot of Claude / Cursor Prompt
Diagram: Figma → AI → React → Library
I integrated AI tools to bridge design → code with zero manual translation:
Impact: Drastically reduced repetitive dev work. Ensures consistent, high-quality code at scale.
Gallery of 20+ Component Variations
Responsive Mode: Desktop / Tablet / Mobile
A fully coded, production-ready library supporting infinite variations:
The Math: 25 atoms × 10 states × 4 sizes × 2 themes = 10,000+ variations from one source of truth.
Infographic: Challenge → Solution → Impact
Managing thousands of variations without losing consistency
Used global variables in Figma so changing one token cascades across all 10,000 variations instantly
Manual handoff from Figma to React introduced errors and delays
Integrated Claude & Cursor to auto-generate React components from Figma tokens with zero manual translation
Small team couldn't manually support unlimited custom dealer requests
Built modular builder and CMS so dealers build their own sites; team now focuses on system, not service delivery
Stat Cards / Bar Chart: 7 days → 2 hours, 10K+ Variations, 100% Brand Consistency
AE FRAME transformed the entire custom website workflow, making scalability and consistency achievable.
"This project redefined our workflow. What used to take over a week is now done in under two hours—and we can scale it to hundreds of dealers without sacrificing quality."Product Lead, Custom Website Division
Wireframes / Concept Screenshots for AI Site Generation
Based on learnings and market opportunity, we're evolving AE FRAME into an even more intelligent system:
Dealers input brief requirements; AI generates complete, customized websites in minutes
Visual builder with AI-powered layout suggestions and auto-component recommendations
System extends to other industries with one design system serving unlimited brands
AI agents test every variation, catch errors, and ensure pixel-perfect implementation
Diagram: Design ↔ Code ↔ AI ↔ Business Interconnected
Next project