Building Design System: Designer's Journey into Code
A production-ready design system built with beacon-ui and beacon-icons, using AI-assisted development tools.
Hero Image Placeholder - Beacon design system overview
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
OVERVIEW
What Beacon is
Beacon is a production-ready design system built entirely by a UI/UX designer using AI-assisted development tools. The system includes 9 React components, a complete design token architecture, and comprehensive documentation, all packaged and published to npm.
This case study documents how a designer with 10+ years of experience in Figma, Sketch, and Adobe Suite, but limited coding background, leveraged Cursor and Figma MCP to bridge the gap between design and implementation.
BACKGROUND
Why build it
As a UI/UX designer with a Computer Science & Engineering degree, I understood code conceptually, but hands-on development was always a barrier. The emergence of AI coding assistants like Cursor, Claude Code, and Model Context Protocol (MCP) presented an opportunity to push beyond traditional design deliverables and actually ship working code.
The goal was ambitious: build a complete design system that could be used in production. This meant creating real React components, establishing a token pipeline from Figma to code, building a documentation site, and packaging everything for distribution via npm.
The Process
Tokens
DTCG structure
CSS vars
Types
Components
Variants
States
A11y
Packaging
Exports
Peers
Build
Docs
Examples
Props
Playground
Workflow
Rules
Iteration
Review
Figma MCP
Variables
Context
Screens
Stage 1: Foundations - Design Tokens
The foundation of any design system is its token architecture. Starting in Figma, I defined a comprehensive token structure following the Design Tokens Community Group (DTCG) format: primitives (colors, spacing, typography), semantic tokens (primary, success, warning), brand tokens (light and dark themes), and responsive tokens (breakpoint-aware values).
The challenge was translating Figma JSON exports into CSS custom properties and TypeScript types. Using Cursor, we built a token build script that resolves references and outputs organized CSS and type definitions.
Image Placeholder - Token hierarchy in Figma
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Image Placeholder - Token build output (CSS variables)
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Stage 2: Component System
With tokens established, I built the component library. Each component mapped to its Figma definition, supported variants and states, and stayed consistent through token usage.
A Cursor rule file enforced key constraints: Figma is the source of truth, style values reference tokens, components map to Figma. Accessibility was treated as a baseline with ARIA attributes, keyboard navigation, and focus management.
Image Placeholder - Cursor rules file
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Image Placeholder - Component anatomy breakdown
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Stage 3: Packaging for Distribution
Beacon was split into two npm packages: `beacon-ui` for components and tokens, and `beacon-icons` for icon components.
Packaging required careful exports, peer dependency setup, and build processes to support React and TypeScript while keeping tokens importable as CSS.
Image Placeholder - NPM package structure
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Stage 4: Documentation Site
A Next.js documentation site serves as both reference and playground. Each component page includes examples, copyable snippets, prop documentation, and usage guidelines.
Theme switching demonstrates light and dark modes plus multiple hue variants.
Demo Placeholder - Documentation site walkthrough
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Demo Placeholder - Theme switching demonstration
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Stage 5: Designer Workflow in Cursor
Working as a designer in Cursor required learning to communicate design intent effectively. The workflow followed: describe requirements, generate code, review output, refine.
TypeScript support and agent iteration made it possible to ship production-quality components with strict alignment to Figma.
Stage 6: Figma MCP Bridge
The Figma MCP connection reduced manual exporting and screenshots by enabling Variable Extraction, Design Context, and Screenshots directly from Figma.
This kept design and code in sync while reducing back-and-forth.
Image Placeholder - Figma MCP workflow diagram
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Challenges and solutions
Outcome
Beacon is available on npm as `beacon-ui` (components and tokens) and `beacon-icons` (icon components). It includes production-ready components, complete tokens, and TypeScript support.
Documentation is published at `beacon.uxraza.com` with live examples, prop docs, and theming demos.
Image Placeholder - NPM package pages
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Image Placeholder - Production usage examples
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Image Placeholder - Roadmap visualization
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Image Placeholder - Final Beacon showcase
Replace this block with an image when ready.
Suggested: add a file under `public/images/case-studies/beacon/` and swap this placeholder for an `img` tag.
Conclusion
Beacon demonstrates what is possible when designers leverage AI-assisted development tools. By combining design expertise with Cursor's coding capabilities and Figma MCP integration, a single designer can build a production-ready design system that supports real products.
The barrier between design and code is becoming more permeable. With the right workflow, designers can extend impact beyond static files and ship reusable systems with consistent tokens, components, and docs.