https://github.com/d-oit/do-gemini-ui-ux-skill
A production-grade agent skill for upgrading UI/UX requests into precise, token-driven design prompts for apps and games.
https://github.com/d-oit/do-gemini-ui-ux-skill
Last synced: 21 days ago
JSON representation
A production-grade agent skill for upgrading UI/UX requests into precise, token-driven design prompts for apps and games.
- Host: GitHub
- URL: https://github.com/d-oit/do-gemini-ui-ux-skill
- Owner: d-oit
- Created: 2026-04-09T18:31:49.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-09T20:02:43.000Z (2 months ago)
- Last Synced: 2026-04-09T21:33:48.980Z (2 months ago)
- Language: HTML
- Homepage: https://aistudio.google.com/apps/df6c9fed-d58b-4200-9b91-e3f4952de1ff?showPreview=true&showAssistant=true&fullscreenApplet=true
- Size: 1.07 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UI/UX Optimize Skill Builder
A production-grade agent skill for upgrading UI/UX requests into precise, token-driven design prompts for apps and games.
## Overview
This project provides a structured framework for converting ambiguous UI/UX requests (e.g., "make it look modern") into technical design specifications. It uses a semantic design system, multi-mode architecture, and automated validation to ensure high-fidelity results.
## Key Features
- **Multi-Mode Design System**: Support for App, Game, Neural, and Technical themes.
- **Atmospheric Effects**: Advanced glassmorphism, refractive blurs, and liquid shimmers.
- **Semantic Tokens**: Centralized source of truth for all design attributes.
- **Automated Validation**: Scripts to ensure token alignment and design stability.
- **Visual Testing**: Integrated Playwright-based testing for visual regression and screenshot generation.
## Getting Started
1. **Install Dependencies**:
```bash
npm install
```
2. **Run Development Server**:
```bash
npm run dev
```
3. **Initialize Design System**:
Follow the instructions in `docs/design/design-system.md` to customize your tokens.
## Documentation
- [Design System](docs/design/design-system.md)
- [Color Palette](docs/design/color-palette.md)
- [Typography](docs/design/typography.md)
- [Layout & Composition](docs/design/layout.md)
- [Visual Testing & Screenshots](docs/testing.md)
## Testing
We use Playwright for visual regression testing. See [Visual Testing](docs/testing.md) for more details.