Premium UI Design & Aesthetics Suite
A design framework dedicated to creating bespoke, distinctive, and accessible web interfaces while eliminating generic AI-generated clichés.
When styling, designing, or auditing UI components, locate the corresponding topic in references/<category>/<topic>/SKILL.md.
Catalog & Quick Navigation
1. Anti-AI Slop & Visual Craft (references/anti-slop-and-craft/)
| Topic | Subpath | Description |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | Passive quality gate preventing generic AI defaults: purple gradients, centered floating cards, and cookie-cutter layouts. |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | Diagnostic audit identifying AI visual defects, inconsistent elements, and removal-first cleanup plans. |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Awwwards-tier craft: strong art direction, editorial typography, GSAP motion, and authentic imagery. |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | Professional frontend design playbook: typography scale, intentional whitespace, and micro-interactions. |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | Spec-driven aesthetic and interaction design prompting before writing frontend code. |
2. Styling, Tokens & Brands (references/styling-and-tokens/)
| Topic | Subpath | Description |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | Enforcing typography rules, voice and tone, logo usage, color compliance, and spacing standards. |
| theme-factory | styling-and-tokens/theme-factory | Curated visual theme generator, design tokens, font pairings, and CSS variables. |
| tailwindcss | styling-and-tokens/tailwindcss | Tailwind CSS component recipes, layout grids, typography utilities, and responsive patterns. |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | Sourcing high-quality authentic photography assets, portraits, and backgrounds. |
3. Surfaces & Page Archetypes (references/surfaces-and-pages/)
| Topic | Subpath | Description |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | Frosted glassmorphism dark-mode panels, pseudo-element gradient borders, and readable contrast. |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | Tactile physical styling: layered gradients, stacked inner/outer shadows, and embossed details. |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | Precision hairline grid boundaries, L-shaped corner brackets, and structured editorial sections. |
| landing-page | surfaces-and-pages/landing-page | High-converting single-offer SaaS landing page structure, narrative arc, and copywriting. |
| pricing-page | surfaces-and-pages/pricing-page | High-converting pricing tables, plan comparison matrices, feature checklists, and FAQs. |