FrontendDesign

Generates premium frontend UI code by routing requests to specialized design sub-skills.

Updated Jul 10, 2026
One-click install
npx skills add https://github.com/Kaleb-Rupe/aurora --skill frontenddesign-kaleb-rupe
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: FrontendDesign
Source: https://github.com/Kaleb-Rupe/aurora/tree/main/claude/skills/FrontendDesign
Command: npx skills add https://github.com/Kaleb-Rupe/aurora --skill frontenddesign-kaleb-rupe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? LLM-generated interfaces default to generic, template-grade patterns — Inter fonts, purple gradients, three-card feature rows, and centered hero sections. This Skill overrides those biases with strict typography rules, calibrated color systems, asymmetric layouts, and motion choreography across six specialized design directions. ## Core Features & Use Cases - Sub-Skill Routing: Automatically routes requests to the right design system — Awwwards-tier agency design, industrial brutalism, minimalist editorial, redesign audits, baseline design taste, or Google Stitch DESIGN.md generation. - Anti-Slop Enforcement: Bans common AI design fingerprints including Inter font, pure black, neon glows, generic placeholder names, and AI copywriting cliches. - Redesign Audits: Diagnoses existing codebases for generic patterns and applies targeted upgrades without breaking functionality or migrating frameworks. - Use Case: Ask to redesign a SaaS landing page that looks like a generic template, and the Skill audits typography, color, layout, and interaction states, then rebuilds it with asymmetric bento grids, spring-physics motion, and a calibrated single-accent palette. ## Quick Start Redesign my landing page to look like a premium agency built it, with asymmetric layouts and no generic AI design patterns.

Frequently Asked Questions about FrontendDesign

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated websites look less generic?

Apply strict anti-pattern rules that ban Inter font, pure black, purple gradients, three-column card layouts, and centered heroes. Replace them with distinctive fonts like Geist or Satoshi, a single desaturated accent color, asymmetric grids, and spring-based motion.

How to redesign an existing website without breaking functionality?

Run a design audit covering typography, color, layout, interaction states, and content, then apply targeted fixes in priority order: font swap first, then color cleanup, hover states, layout spacing, and component replacement. Work within the existing stack without migrating frameworks.

What fonts should I use instead of Inter for premium UI design?

Use Geist, Outfit, Cabinet Grotesk, or Satoshi for sans-serif contexts. For editorial projects, use distinctive modern serifs like Fraunces or Instrument Serif. Serif fonts are banned in dashboards and software UIs.

Does this design system work with Tailwind CSS?

Yes, it targets Tailwind v3 and v4 with version-specific guards, plus React and Next.js with Server Component safety rules. It also works with vanilla CSS and shadcn/ui, provided default radii, colors, and shadows are customized.

Why do AI-generated dashboards look cheap and how to fix them?

They rely on generic cards, default shadows, and static states. Fix by removing card boxes in favor of border dividers at high density, using monospace for numbers, adding skeleton loaders and empty states, and applying tactile press feedback on interactive elements.

When should I use brutalist versus minimalist UI design?

Use industrial brutalism for data-heavy dashboards, portfolios, or editorial sites needing rigid grids, extreme type scale, and terminal aesthetics. Use minimalist editorial style for clean workspace-like products needing warm monochrome palettes, flat bento grids, and muted pastel accents.