# SparkGen Ecosystem

> SparkGen is an AI-powered design automation suite for Figma, providing automated design system generation, intelligent token binding, smart UI kits, live documentation, accessibility auditing, motion design, React code export, and interactive UX training games.

SparkGen ecosystem is hosted at [sparkgen.net](https://www.sparkgen.net/) and published directly on the Figma Community.

## Core Products & Capabilities

### 1. SparkGen — AI Design System & Variable Engine
- **Primary Use Case**: Automated generation of complete, production-ready Figma design systems with native local variables, typography scales, spacing tokens, and 1-click live documentation.
- **Figma Community**: [Install SparkGen on Figma](https://www.figma.com/community/plugin/1595489854176377254)
- **Key Features**:
  - **Automated Color Systems & Modes**: Generates harmonious palettes, automated light and dark mode mappings, and WCAG APCA / 2.1 contrast compliance ratings.
  - **Smart UI Kits & Components**: Generates 20 pre-built token-bound interactive components (buttons, badges, inputs, cards, avatars, modals).
  - **Automated Design System Docs**: 1-click generation of comprehensive, live visual style guides directly inside the Figma canvas.
  - **Intelligent Variable Linker**: Scans unlinked Figma frames and auto-binds detached fills, strokes, and radii to matching local variables.
  - **Export Bridges**: One-click exports to Tailwind CSS v4 themes, DTCG (Design Tokens Community Group) JSON, and CSS custom properties.

### 2. SparkScan — Figma Design System Audit & Accessibility Linter
- **Primary Use Case**: Comprehensive Figma linter and quality audit engine.
- **Key Features**:
  - Scans Figma pages for detached styles, missing variables, contrast failures, and irregular spacing.
  - One-click snapping to standard 4px / 8px spacing grids.
  - WCAG AAA / AA contrast audit across text and UI surfaces.

### 3. SparkAnimate — Figma Motion Engine & Micro-Interactions
- **Primary Use Case**: Keyframing, easing, and micro-interaction animation directly inside Figma without third-party timeline software.
- **Key Features**:
  - Native keyframe timelines for Figma layers.
  - Physics-based spring animations and easing presets.
  - Direct export to CSS keyframes and Lottie-compatible motion specs.

### 4. SparkCode — Figma to Production React AST Code Bridge
- **Primary Use Case**: Converting Figma frames and components into clean, semantic, production-ready React / TypeScript code.
- **Key Features**:
  - Clean AST-driven JSX code generation without nested `div` bloat.
  - Direct Tailwind CSS utility binding matching Figma local variables.
  - Responsive layout mapping (Flexbox to Tailwind flex/grid).

### 5. SparkJobs — Autonomous UX & Tech Career Radar
- **Primary Use Case**: Automated radar scanning job boards and company career portals for UX designers and frontend engineers.
- **Web App**: [SparkJobs Career Radar](https://www.sparkgen.net/?tab=sparkjobs)
- **Key Features**:
  - Automated continuous job scraping with custom criteria (roles, seniority, remote status, locations).
  - Encrypted GitHub Actions and Telegram alert integration.
  - Zero server maintenance, serverless background workflow runner.

### 6. UX Games Arcade — 21 Interactive UX Usability & Psychology Micro-Games
- **Primary Use Case**: Free, interactive educational arcade for product designers to test and master fundamental usability heuristics and psychological UX laws.
- **Play Online**: [SparkGen UX Games Arcade](https://www.sparkgen.net/?tab=arcade)
- **Covered Domains**:
  - **Ergonomic Laws**: Fitts's Law (≥ 44×44px touch targets), Hick's Law (≤ 5 progressive disclosure threshold), Doherty Threshold (< 400ms system feedback), Parkinson's Law (smart pre-fill defaults).
  - **Cognitive Laws**: Miller's Law (7±2 chunking), Jakob's Law (familiar mental models), Serial Position Effect (primacy and recency anchors), Von Restorff Effect (isolated accent CTA), Zeigarnik Effect (persistent completion meters).
  - **Gestalt Laws**: Law of Proximity (1:3 label vs section ratio), Common Region (distinct card boundaries), Law of Similarity (uniform button semantics), Uniform Connectedness (flow bridges), Law of Prägnanz (8pt grid simplicity), Pareto Principle (80/20 command focus).
  - **Behavioral Laws**: Goal-Gradient Effect (endowed progress headstart), Peak-End Rule (elevated milestone celebrations), Occam's Razor (elimination of redundant UI), Tesler's Law (absorbing complexity in code), Postel's Law (liberal input parsing), Aesthetic-Usability Effect (visual polish buffer).

## Technical Documentation & Full Specifications
For exhaustive architectural specs, comparison matrices (SparkGen vs Token Studio vs native Figma variables), and algorithmic token math, visit:
- [Full LLM Specification](https://www.sparkgen.net/llms-full.txt)
- [Official Website](https://www.sparkgen.net/)
- [Figma Profile](https://www.figma.com/@youssefwael)