Create website interfaces with defined typography, spacing, layered cards, and animation rules. The skill guides React, Tailwind, and HTML output, combining asymmetric layouts with mobile adaptations and performance constraints for a consistent visual direction.
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
Review the instructions the agent will receive before you install.
Vanguard_UI_ArchitectIf your generated code includes ANY of the following, the design instantly fails:
Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans are available).shadow-md, rgba(0,0,0,0.3)).linear or ease-in-out transitions. Instant state changes without interpolation.Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
#050505), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy backdrop-blur-2xl and pure white/10 hairlines. Wide geometric Grotesk typography.#FDFBF7), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (opacity-[0.03]) for a physical paper feel.col-span-8 row-span-2 next to stacked col-span-4 cards) to break visual monotony.
grid-cols-1) with generous vertical gaps (gap-6). All col-span overrides reset to col-span-1.-2deg or 3deg rotation to break the digital grid.
768px. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.w-1/2), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
w-full). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.Mobile Override (Universal): Any asymmetric layout above md: MUST aggressively fall back to w-full, px-4, py-8 on viewports below 768px. Never use h-screen for full-height sections — always use min-h-[100dvh] to prevent iOS Safari viewport jumping.
Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
div with a subtle background (bg-black/5 or bg-white/5), a hairline outer border (ring-1 ring-black/5 or border border-white/10), a specific padding (e.g., p-1.5 or p-2), and a large outer radius (rounded-[2rem]).shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a mathematically calculated smaller radius (e.g., rounded-[calc(2rem-0.375rem)]) for concentric curves.rounded-full) with generous padding (px-6 py-3).↗), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) placed completely flush with the main button's right inner padding.py-24 to py-40 for sections. Allow the design to breathe heavily.rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium).Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]).
mt-6, mx-auto, w-max, rounded-full).rotate-45 and -rotate-45 with absolute positioning), not just disappear.backdrop-blur-3xl bg-black/80 or bg-white/80).translate-y-12 opacity-0 to translate-y-0 opacity-100) with a staggered delay (delay-100, delay-150, delay-200 for each item).group utility. On hover, do not just change the background color.active:scale-[0.98]) to simulate physical pressing.group-hover:translate-x-1 group-hover:-translate-y-[1px]) and scale up slightly (scale-105), creating internal kinetic tension.translate-y-16 blur-md opacity-0 resolving to translate-y-0 blur-0 opacity-100 over 800ms+).IntersectionObserver or Framer Motion's whileInView. Never use window.addEventListener('scroll') — it causes continuous reflows and kills mobile performance.top, left, width, or height. Animate exclusively via transform and opacity. Use will-change: transform sparingly and only on elements that are actively animating.backdrop-blur only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.pointer-events-none pseudo-elements (position: fixed; inset: 0; z-index: 50). Never attach them to scrolling containers.z-50 or z-[9999]. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.When generating UI code, follow this exact sequence:
rounded-[2rem]).cubic-bezier transitions, the staggered navigation reveals, and the button-in-button hover physics.Evaluate your code against this matrix before delivering. This is the last filter.
py-24 — the layout breathes heavilylinear or ease-in-out768px to single-column with w-full and px-4transform and opacity — no layout-triggering propertiesbackdrop-blur is only applied to fixed/sticky elements, never to scrolling contentNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Generate a brand overview image that brings together logos, colors, typography, imagery, and application mockups. Develop a new visual identity or extend supplied brand assets into a coherent presentation board guided by the brand’s purpose and audience.
Design, build, or refine public websites using researched layouts, typography, palettes, and imagery. It develops a concept from the subject, checks the page in a real browser at three widths, and guides revisions through screenshot reviews.
Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.
An older experimental skill for designing landing pages, portfolios, and redesigns around a brief and audience. Adjust layout variation, motion, and information density while applying contextual design rules, consistent styling, and accessible interaction states.
Guide an agent to deliver complete code and written outputs without placeholders or skipped sections. It checks requested deliverables against the response and defines clear stopping points and continuation markers when an answer approaches the token limit.
Build expressive web pages with wide headings, tightly filled grids, and GSAP animations that follow scrolling. Organize content from attention through action, vary layouts through a defined selection process, and provide static states for reduced-motion preferences.