AE FRAME
CMS Builder & Design System Framework: From Custom Requests Chaos to Scalable Website Infrastructure
Project
Overview
Scope
Design System
CMS · Framework
AI Automation
Platform
Web CMS
Dealer Websites
Internal Tools
Impact
7 days → 2 hours
98% Faster
My Role
Lead Product Architect & Systems Engineer
Team Size
5 people
(PM, 2 Devs, Designer, QA)
Impact Metric
10,000+ Variations
Managed Seamlessly
What is
AE FRAME?
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."
The
Challenge
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
Design Bottleneck
Designers spent 2–3 days on custom Figma work per dealer with no reusable components
Slow Dev Handoff
Developers added 2–4 days to implement, with manual code translation and no automation
No Design System
Zero consistency; every dealer website had different branding and components
Unscalable Process
Growth was limited; each dealer required manual intervention from scratch
My Role &
Approach
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.
Process Audit & Strategy
Mapped existing workflows, identified bottlenecks, and designed scalable solutions
Figma Design System
Built complete design system: foundations, 50+ components, atoms, molecules, global variables
AI-Assisted Workflow
Integrated Claude & Cursor to auto-generate React components from Figma tokens
Component Library
Built coded component library with 10,000+ variations supporting all dealer needs
Modular Builder & CMS
Created Figma-to-live editor enabling dealers to build sites without code
Team Leadership
Guided 5-person team across product, design, engineering, and quality
The
Solution
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.
1. Figma Design System: Foundation of Scale
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:
Foundations
Typography, Colors, Spacing, Layout, Shadows, Icons
Components (Atoms)
Buttons, Inputs, Cards, Badges, Pagination, Vehicle Cards, Team Cards
Molecules & Layouts
Section patterns, templates, pre-built website blocks
Global Variables
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.
2. Modular Website Builder & Live Editor
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:
Prebuilt Reusable Blocks & Sections
Hero, CTA, Feature Cards, Testimonials, Vehicle Galleries, Team Sections—all configurable without code
Global Settings & Customization
Logo, Brand Colors, Typography, Light/Dark Mode, Contact Info, Icon Style—all update site-wide instantly
Live Figma-to-Web Preview
Designers edit in Figma, dealers see changes in real-time in the editor before publishing
Result: 98% faster delivery. What took 7 days now takes 2 hours. Fully custom, fully professional.
3. AI-Assisted Workflow: The Secret Sauce
Screenshot of Claude / Cursor Prompt
Diagram: Figma → AI → React → Library
I integrated AI tools to bridge design → code with zero manual translation:
AI-Generated Components from Figma Tokens
Claude & Cursor read Figma tokens, automatically generate production-ready React components with full accessibility
Automated Library Injection
AI agents inject generated components into the internal library, handling versioning and documentation
QA Agents for Accuracy
Automated agents compare Figma design → implementation, flag inconsistencies before production
Impact: Drastically reduced repetitive dev work. Ensures consistent, high-quality code at scale.
4. Internal Component Library
Gallery of 20+ Component Variations
Responsive Mode: Desktop / Tablet / Mobile
A fully coded, production-ready library supporting infinite variations:
10,000+ Component Variations
All combinations of atoms, states, sizes, and themes pre-built and tested
Light/Dark Mode Support
Every component works perfectly in both themes with no additional work
Prebuilt Templates & Patterns
Website sections, layouts, and complete page templates ready for assembly
Responsive by Default
All components work seamlessly across mobile, tablet, and desktop automatically
The Math: 25 atoms × 10 states × 4 sizes × 2 themes = 10,000+ variations from one source of truth.
Challenges &
Solutions
Infographic: Challenge → Solution → Impact
Design System Complexity
Managing thousands of variations without losing consistency
Solution:
Used global variables in Figma so changing one token cascades across all 10,000 variations instantly
Design-to-Code Gap
Manual handoff from Figma to React introduced errors and delays
Solution:
Integrated Claude & Cursor to auto-generate React components from Figma tokens with zero manual translation
Team Scalability
Small team couldn't manually support unlimited custom dealer requests
Solution:
Built modular builder and CMS so dealers build their own sites; team now focuses on system, not service delivery
Results &
Impact
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.
Consistent Brand Identity
Every dealer website follows the same design principles, ensuring global brand recognition
Design & Dev Alignment
No more handoff delays or interpretation gaps. Design tokens flow directly to production code
Reduced Manual Work
AI automates 80% of repetitive dev tasks, freeing engineers for complex features
Zero Rework
QA agents ensure Figma designs match implementations automatically, before production
"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
Future
Vision
Wireframes / Concept Screenshots for AI Site Generation
Based on learnings and market opportunity, we're evolving AE FRAME into an even more intelligent system:
AI Site Generation
Dealers input brief requirements; AI generates complete, customized websites in minutes
Drag-and-Drop Editor
Visual builder with AI-powered layout suggestions and auto-component recommendations
Multi-Brand Support
System extends to other industries with one design system serving unlimited brands
Full QA Automation
AI agents test every variation, catch errors, and ensure pixel-perfect implementation
Why This
Matters
Diagram: Design ↔ Code ↔ AI ↔ Business Interconnected
System Thinking Over Feature Thinking
This project proved that building systems—not products—creates exponential value. One design system powers thousands of websites. One AI agent replaces hundreds of hours of manual work.
Design is Code, Code is Design
Eliminating the designer ↔ developer handoff doesn't mean designing without developers. It means designing systems where code and design are one unified language expressed through tokens.
AI as Force Multiplier, Not Replacement
AI doesn't replace designers or engineers. It amplifies their capabilities. Handling the 80% routine work lets humans focus on the 20% that requires real judgment and creativity.
Business Impact Through Technical Excellence
7 days → 2 hours is not just a speed metric. It means dealers launch websites faster, capture customers faster, and grow faster. Technical systems directly drive business outcomes.
Next Project