Design Dial ⭐ Kurz, einzigartig, direkt am USP IntentUI ⭐

The problem

Standard AI-generated frontends often look like generic templates, featuring repetitive "AI-purple" palettes, cluttered layouts, and hallmark "slop" indicators like em-dashes or fake placeholder data. Developers spend too much time fixing these aesthetic tells instead of shipping high-quality, intentional designs.

What it does

• Analyzes design briefs to extract specific vibe-words, audience profiles, and "quiet constraints" before writing any code.
• Controls layout, movement, and spacing via three explicit "Design Dials": Variance, Motion Intensity, and Visual Density.
• Enforces strict typography and color rules, including an outright ban on "AI-purple," specific overused serif fonts, and generic Inter-only defaults.
• Executes an automated 70-point Pre-Flight Check to catch "AI-tells" like em-dashes, Jane Doe names, and inefficient scroll listeners.

Frameworks & tools

Next.js (RSC), Tailwind CSS v4, Motion (Framer Motion), GSAP, and shadcn/ui.

Why this beats prompting it yourself

Writing a prompt for "a modern website" usually results in a generic hero section and purple gradients. This skill replaces vague instructions with a mechanical system of dials and a massive blacklist of AI-specific design failures that even experienced prompters overlook.

Use cases

• Building high-end portfolios that avoid the "templated AI" look.
• Modernizing legacy landing pages while preserving SEO baselines and brand tokens.
• Generating data-heavy dashboards that maintain readability without visual clutter.
• Rapidly prototyping agency-quality sites with cinematic motion and physics-based interactions.

Known limitations

Specifically bans certain serif fonts like Fraunces and Instrument Serif. Requires Next.js and Tailwind environments for full directive compliance.