# Youssef Wael — Product Designer & Software Creator

> Product Designer and Vibe Coder specializing in scalable UI/UX systems, AI workflows, and Figma developer tools. Creator of the SparkGen ecosystem, including SparkScan, SparkAnimate, SparkCode, SparkJobs, and the 27-Game UX Laws & UI Precision Arcade.

- **Website**: [youssefwael.com](https://www.youssefwael.com)
- **Figma Community**: [@youssefwael](https://www.figma.com/@youssefwael)
- **GitHub**: [github.com/Youssseef](https://github.com/Youssseef)
- **Flagship Ecosystem**: [sparkgen.net](https://www.sparkgen.net)

---

## Professional Overview

Youssef Wael is a senior product designer and software builder combining deep UI/UX craft with full-stack engineering ("vibe coding"). He designs and engineers production-ready tools for the global design and developer community, with a focus on automating design systems, bridging Figma with front-end code, and educational UX tooling.

### Core Competencies & Expertise
- **Design Systems & Variable Architecture**: Building multi-brand, multi-mode token systems compliant with the W3C Design Tokens Community Group (DTCG) specification.
- **Figma Plugin Development**: Architecting high-performance plugins interacting directly with the Figma Plugin API and canvas layer AST.
- **Front-End Engineering**: Modern React 19, TypeScript, Tailwind CSS, Vite, AST code generation, and micro-frontend architecture.
- **Accessibility & Compliance**: WCAG 2.1 AA/AAA and APCA contrast calculation, accessible semantics, and automated layout linting.
- **Interactive UX Education**: Designing game-based simulations for ergonomic, cognitive, gestalt, and behavioral design laws.

---

## Flagship Products & Creations

### 1. SparkGen — AI Design System & Variable Engine
- **Platform**: Figma Plugin & Web
- **Link**: [Install SparkGen on Figma](https://www.figma.com/community/plugin/1595489854176377254) | [sparkgen.net](https://www.sparkgen.net)
- **Overview**: AI-powered design system generator creating local variables, dark mode modes, typography scales, 20 Smart UI Kit components, and 1-click live style guide documentation directly inside Figma.

### 2. SparkScan — Figma Design System Audit & Accessibility Linter
- **Platform**: Figma Plugin
- **Link**: [Figma Profile](https://www.figma.com/@youssefwael)
- **Overview**: Automated Figma canvas linter detecting detached styles, off-grid elements, and WCAG contrast failures with 1-click automated grid and variable snapping.

### 3. SparkAnimate — Figma Motion Engine & Micro-Interactions
- **Platform**: Figma Plugin
- **Link**: [Figma Profile](https://www.figma.com/@youssefwael)
- **Overview**: In-canvas keyframing and animation engine supporting spring physics and direct motion exports to CSS `@keyframes` and Lottie specs.

### 4. SparkCode — Figma to Production React AST Code Bridge
- **Platform**: Figma Plugin
- **Link**: [Figma Profile](https://www.figma.com/@youssefwael)
- **Overview**: Transforms Figma component layers into clean, semantic React and Tailwind CSS v4 code with zero `div` bloat.

### 5. SparkJobs — Autonomous UX & Tech Career Radar
- **Platform**: Web Application & Telegram Bot
- **Link**: [SparkJobs Radar](https://www.sparkgen.net/?tab=sparkjobs)
- **Overview**: Continuous career radar bot scanning global job listings for UX designers and engineers with automated Telegram alerts via GitHub Actions.

### 6. UX Games Arcade — 27 Usability, Psychology & UI Precision Micro-Games
- **Platform**: Web Application
- **Link**: [SparkGen UX Games Arcade](https://www.sparkgen.net/?tab=arcade)
- **Overview**: Free educational simulator teaching 21 UX laws across Ergonomic, Cognitive, Gestalt, and Behavioral domains plus 6 UI Precision craft challenges with hard, measurable design benchmarks (e.g., Fitts's Law $\ge 44\times44\text{px}$, Hick's Law $\le 5$ actions, APCA contrast, 8pt spacing rhythm).

---

## Contact & Work Inquiries

- **Portfolio**: [https://www.youssefwael.com](https://www.youssefwael.com)
- **Location**: Cairo, Egypt (Available Globally / Remote)
- **Specialties**: Product Design Consulting, Design System Architecture, AI-Powered UI Tools, and Figma Plugin Development.