Website creation involves a web of interdependent decisions around typography, color, layout, accessibility, and responsiveness that typically require design and development expertise. When generated by AI, these decisions must remain flexible enough to create visual variety while being constrained enough to prevent broken layouts or inconsistent quality. The challenge was to define a system that could simplify this complexity into intuitive controls, balance creative freedom with structural rules, and scale reliably across many industries and use cases.
Vzy is an AI-powered website builder that empowers non-technical users to create functional websites by simply describing their business and selecting a category. The platform generates responsive, accessible sites using a robust design system. As the UX designer, I developed two interconnected design systems: one that governs how AI-generated websites are styled and customized and another for the Vzy platform itself. Together, these systems transform complex design decisions into intuitive toggles for users while enabling fast, consistent UI development for a small product team.
This system governs how every AI-generated website is styled and customized. Rather than exposing raw design complexity, it abstracts decisions into simple, meaningful controls that balance flexibility with consistency.
Core system foundations
Token-based color system with predefined palettes and AI themes
Typography tokens for Titles and Body, built on scalable type ramps
Google Fonts integration with curated pairings
Corner tokens defining card and button corner radius
Phosphor Icons optimized for clarity and accessibility
Responsive layout rules baked into components
Built-in accessibility considerations (contrast, hierarchy, readability)
Users can quickly toggle themes, colors, fonts, shapes, and layouts to create visually distinct websites without ever touching design tools. Complex brand and layout decisions are reduced to a small set of composable choices, enabling millions of unique results to be generated from a single underlying system.
The platform's UI, prototyped in Figma, uses a component-based system for consistency and speed. The platform was designed in light mode, then systematically converted to dark mode using a simple variable-based color formula. By mapping semantic color tokens (background, foreground, surfaces, borders) rather than hard values, dark mode became a transformation—not a redesign.. This enabled a small team to build interfaces like the editor, dashboard, panels, cards and other workflows users interact with while building their site.
Platform system highlights
Fully componentized UI built in Figma
Shared spacing, typography, and color tokens with the website system
Consistent card, button, input, and navigation patterns
Lock modes to prevent destructive actions
Clear hierarchy optimized for dense, functional interfaces
These design systems democratized website creation by reducing build time from days to seconds while enabling significant stylistic variation at scale. For the product team, a shared, token-driven foundation accelerated iteration, reduced UI debt, and allowed a small team to ship consistently without fragmentation. By abstracting complexity into reusable systems, this work demonstrates how design systems can act as a force multiplier, aligning AI, product, and users around a single source of truth and scaling both creative freedom and execution velocity in parallel.
