YankielDBC2 Premium Frontend UI Design v3
Goal
Create modern, compact, brand-specific interfaces that feel intentionally designed instead of generated from common AI landing-page patterns.
When to use
Use for new pages, redesigns, component sections, landing pages, multipage websites, ecommerce/product pages, dashboards, onboarding, Studio/editor screens, and frontend polish work.
Workflow
- Inspect the existing stack, styling system, design tokens, components, and responsive patterns before editing.
- Write a short Design Read: page type, audience, brand mood, visual language, density, and motion level.
- Set design dials: DESIGN_VARIANCE, VISUAL_DENSITY, MOTION_INTENSITY, and explain the choice briefly.
- Remove generic AI patterns: giant centered hero text, excessive vertical whitespace, repeated 3-card grids, random purple gradients, and identical cards.
- Build visual hierarchy with compact sections, strong alignment, varied rhythm, useful content density, and brand-specific motifs.
- Prefer reusable React/Next.js/TypeScript components and existing project conventions over one-off markup.
- Use GSAP, ScrollTrigger, or advanced motion only when it supports the story or interaction and the project already supports it or the user approved adding it.
- Check mobile, tablet, and desktop layouts before finalizing.
Quality bar
- Run typecheck, lint, tests, build, or the closest available validation command.
- Manually inspect at mobile, tablet, and desktop widths when possible.
- Confirm loading, empty, error, and success states when the page includes data or actions.
Validation
- Headings are proportional to the layout and not oversized by default.
- Sections are compact but readable; spacing is intentional, not template-like.
- Mobile is not automatically one column when two-column density is better.
- Cards, backgrounds, image masks, typography, and hover states have distinct brand personality.
- UI does not look like a generic AI SaaS template.
Final response
- Summarize design direction, files changed, validation run, and any responsive states not manually checked.