uxui-AI-Prompt

The AI skill that builds premium SaaS interfaces — so you don't have to.

Dark-mode first · Animation-driven · Gemini-powered visuals

Get Started · Features · Install · Contributing

---

⚡ What is this?

A plug-and-play AI skill that turns any coding agent into a senior frontend engineer with the eye of a creative director.

Drop it into Claude Code, Cursor, VS Code Copilot, or any compatible tool — and start building interfaces inspired by Vercel, Linear, Stripe, and Raycast in seconds.

Skill mode (uxui-designer/) — modular, lazy-loaded, optimized for Claude Code & compatible agents. Prompt mode (prompt.md) — single-file system prompt for ChatGPT, Windsurf, Aider, or anything else.

🎯 What it does

🎨 Design System Zinc/Slate dark-mode palette — never pure black Geist, Satoshi, Cabinet Grotesk typography Shimmer Buttons, Bento Grids, Liquid Glass Cards WCAG AAA contrast (7:1 normal, 4.5:1 large) Strict anti-patterns enforced automatically	🎛️ 3 Design Dials DESIGN_VARIANCE = 8 (symmetry → chaos) MOTION_INTENSITY = 6 (static → cinematic) VISUAL_DENSITY = 4 (gallery → cockpit) Change a dial in chat → the entire output adapts.
🎬 6 Motion Patterns Ghost Cursor SVG cursor clicks real UI Type-Delete-Retype Code rewrites itself Algorithm Viz Data structure animates Live Editor Code → preview morphs live Auto Dashboard KPIs cycle with spring physics Morphing Metric Stats scramble & cross-fade	🖼️ Gemini Image Generation Runs automatically at the end of every build: Audits all image zones in the page Crafts cinematic prompts per zone Generates via REST API or Python SDK Integrates with overlays & alt attrs Falls back gracefully if no API key Models: gemini-3.1-flash-image-preview (default) · gemini-3-pro-image-preview (complex scenes)

📁 Architecture

uxui-AI-Prompt/
│
├── prompt.md                      ← Standalone prompt (any AI tool)
│
└── uxui-designer/                 ← Skill (Claude Code & compatible agents)
    ├── SKILL.md                   ← Entry point — loads references on demand
    └── references/
        ├── design-system.md       ← Colors · Typography · Layout · Components
        ├── motion-patterns.md     ← Framer Motion · GSAP · 6 autonomous demos
        ├── copywriting.md         ← Copy rules · CTAs · Anti-patterns
        ├── page-structure.md      ← 8 mandatory sections with specs
        └── image-generator.md     ← Gemini API pipeline (REST + SDK)

 User prompt → SKILL.md → lazy-load references → build page → image-generator → done

🚀 Quick Start

Claude Code — one command:

git clone https://github.com/GlamgarOnDiscord/uxui-AI-Prompt.git
cp -r uxui-AI-Prompt/uxui-designer ~/.claude/skills/uxui-designer

Then just ask Claude to build any UI:

Build a landing page for a developer analytics SaaS.
Next.js + Tailwind. Dark mode. Emphasize the real-time dashboard.

The skill handles everything: onboarding questions → design dials → layout → animations → Gemini visuals.

Optional — Enable Gemini image generation

Get a free API key at aistudio.google.com/apikey, then:

export GEMINI_API_KEY="your-key-here"     # Linux / macOS
$env:GEMINI_API_KEY = "your-key-here"     # PowerShell

Zero dependencies (REST API) — works with just curl. No Python needed. Or with Python SDK — pip install google-genai Pillow for batch generation.

🔌 Install Anywhere

Claude Code

Scope	Command
Personal (all projects)	cp -r uxui-designer ~/.claude/skills/uxui-designer
Project (team-shared)	mkdir -p .claude/skills && cp -r uxui-designer .claude/skills/uxui-designer
Session (temporary)	claude --add-dir /path/to/uxui-designer

Cursor · VS Code Copilot · Amp · Junie · Goose

Copy the uxui-designer/ folder into your tool's skill directory:

Tool	Path
Cursor	.cursor/skills/uxui-designer/
VS Code Copilot	.github/skills/uxui-designer/
Amp	.amp/skills/uxui-designer/
Junie (JetBrains)	.junie/skills/uxui-designer/
Goose	.goose/skills/uxui-designer/

Follows the open Agent Skills standard — any compatible tool auto-discovers SKILL.md.

Windsurf · Aider · ChatGPT · Others

These tools don't support skills — use the standalone prompt instead:

Tool	How
Windsurf	Paste prompt.md contents into .windsurfrules
Aider	aider --read prompt.md
ChatGPT / Other	Paste prompt.md as system prompt

📦 Tech Stack

Framework	React · Next.js App Router (preferred) · Static HTML
Styling	Tailwind CSS
Animation	Framer Motion · GSAP / ScrollTrigger · Tailwind Animate
Icons	Phosphor Icons (preferred) · Lucide · HugeIcons
Components	Magic UI · Aceternity UI · ShadCN · Reactbits
Images	Gemini gemini-3.1-flash-image-preview / gemini-3-pro-image-preview

🤝 Contributing

PRs, ideas, and issues welcome. You can improve the design system, add motion patterns, or refine the Gemini prompting logic.

fork → git checkout -b my-feature → PR

📜 License

Open License — use, modify, and share freely with credit to GlamgarOnDiscord/uxui-AI-Prompt.

---

_{Build interfaces that feel alive — with the precision of a senior engineer and the eye of a creative director.}