Anti-Generic UI Builder with Layout and Motion Dials
Builds UIs from a chosen design personality with 1-10 dials for layout experimentation and animation, so pages stop looking AI-generic.
Before & after
Same prompt, same agent — the only difference is the skill.
I can generate a landing page for you. It will have a hero section, feature highlights, testimonials, and a call-to-action button. The layout will be clean and modern, and I'll make sure it looks good on mobile devices. If you want to adjust the colors or layout, we can iterate on it together. Most landing pages follow similar patterns, which makes them effective, but there's definitely room to make it feel more unique to your brand. Let me know what direction appeals to you and I'll build something for you.
LANDING PAGE DESIGN PLAN DESIGN LANGUAGE INFERENCE • Audience: dev/technical buyers (B2B SaaS) • Vibe: trustworthy + approachable (not corporate cold) • Precedent: Vercel, Linear, Posthog (minimalist, data-forward) → Selected personality: "Notion-style minimalist with accent pops" CUSTOMIZATION DIALS (1-10 scale, user controls) • EXPERIMENTATION DIAL: 7/10 (risky layout, unconventional flow) Layout choices: - Hero: asymmetric text-left, image-right staggered (not centered) - Features: masonry grid instead of horizontal rows - Social proof: feature chart (not quotes) shows data, not opinions - CTA placement: sticky-after-scroll (not top nav) • ANIMATION INTENSITY: 7/10 (scroll-triggered motion, not landing) Motion details: - Hero text: staggered word-by-word fade-in (200ms spacing) - Feature grid: cards slide-in on scroll (parallax depth) - Chart: animated bar progression when scrolled into view - CTA button: pulse glow on hover (draws attention) RESTRUCTURED OUTPUT VS GENERIC ✗ GENERIC: centered hero, feature rows, testimonial carousel, footer ✓ TASTY: left-aligned hero + staggered animations, masonry grid, data chart, pulse CTA DESIGN ASSET PREVIEW • Color: inherit your brand (or use white/charcoal default) • Typography: Inter (tech-forward) + serif accent (trustworthy) • Components: 8 unique building blocks (hero, 2-col, masonry, chart, CTA, etc.) RENDER READY Generated with experimentation=7, animation=7 for your brand. Download HTML + CSS.
About this skill
Every AI-built landing page looks the same: centered hero, purple gradient, three icon cards, Inter everywhere. Asking for something "more unique" usually just swaps the gradient color. This skill picks a design language that fits your product, then lets you set exactly how experimental the layout gets and how much it moves, each on its own 1-10 dial.
What it does
- Writes a short design brief before any code: audience, category conventions, one personality, and one signature move the page is built around
- Maps each personality (calm/luxurious, editorial, minimal-utility, bold/brutal, playful, technical) to concrete tokens: font pairing, type scale ratio, radius, spacing rhythm, color strategy, and motion character
- Gives the layout dial (1-10) and the animation dial (1-10) defined behavior at every level, so a 4 and a 7 produce different structures
- Checks the result for common AI-template tells and replaces them before you see the page
- Keeps the parts that earn money conventional at any dial: CTAs, pricing, forms, and navigation stay usable, contrast passes, and reduced-motion is respected
- Reviews an existing generic page and tells you which dial changes and token swaps would fix it
What you get
A compact design brief (personality, dial settings, tokens, signature move), then working code for your stack, then a short note on what to change for a more or less adventurous version.
Best for
Indie hackers, frontend developers, and small product teams who ship marketing pages and app UIs with Claude and are tired of output that looks like everyone else's.
SKILL.md preview
---
name: anti-generic-ui-builder-with-dials
description: Builds landing pages and UIs that do not look AI-generated. First it infers a design language and commits to one personality with concrete tokens. Then it builds to two independent 1-10 dials, one for layout experimentation and one for animation intensity, and finishes by scanning for template tells. Use when the user says "build a landing page that doesn't look AI-generated", "make this less generic", "every page Claude makes looks the same", "give it a calm luxury feel", "crank the animation up", "layout experimentation 7", "my site looks like a template", or "redesign this hero so it has some personality".
---
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.