J.REED /DEV
Back to Works
Generative AIDesign SystemAccessibility

SpectraAI Design Assistant

RoleLead Frontend Engineer
Duration3 Months
Tech Stack
Next.jsGemini APITailwind CSSTypeScriptFramer Motion

// 01. CORE PURPOSE

An AI-powered design tool that converts natural language design descriptions into structured JSON design tokens. Offers integrated WCAG color contrast auditing, instant theme swapping, and code package generation.

// 02. ARCHITECTURAL FEATURES

  • 1
    Gemini API Prompter: Specialized parser converting descriptions ('retro terminal' or 'warm modern') into tokens.
  • 2
    Contrast Auditor: Live WCAG AA/AAA scoring checker that automatically adjusts color values to meet contrast standards.
  • 3
    Figma Sync Exporter: Exports ready-to-import JSON theme tokens that integrate directly with Figma Variables API.
  • 4
    Dynamic Sandbox: Sandbox environment demonstrating generated styling changes in real-time on various dashboard layouts.
https://spectra-ai.dev/simulator
// ACCESSIBLE TOKENS GENERATORTHEMES
Sample Banner Widget

The generator verifies typography readability. Contrast check against WCAG standard:

WCAG AA COMPLIANCEPASS (7.4:1)
SYSTEM_STATUS: OKSANDBOX v1.0