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
- 1Gemini API Prompter: Specialized parser converting descriptions ('retro terminal' or 'warm modern') into tokens.
- 2Contrast Auditor: Live WCAG AA/AAA scoring checker that automatically adjusts color values to meet contrast standards.
- 3Figma Sync Exporter: Exports ready-to-import JSON theme tokens that integrate directly with Figma Variables API.
- 4Dynamic 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