Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code 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.
Create web pages with coordinated typography, spacing, colors, card structures, and animation. Choose a visual direction: dark glass, a paper-textured editorial style, or a soft treatment built around white. Combine it with cards of different sizes or a split layout. The skill translates nested outer and inner card frames, floating navigation, and links that appear in stages into React, Tailwind, or HTML code.
Use it for a calm landing page, a SaaS introduction with a consistent presentation, or a portfolio. It helps when you want specific rules for fonts and shadows, button responses, and layouts that change with the screen width.
A design system is required, and the specified fonts are assumed to be available. The rules also specify fonts, icons, shadows, and motion to avoid. Mobile adjustments include removing overlaps and rotations below 768px.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI rated this skill on four points using only the contents of its SKILL.md. Stars and popularity are not taken into account.
The total counts each point as A = 25, B = 15, C = 5. Rated by AI (OpenAI Codex) as of Oct 20, 2026. Treat it as a guide and read the original before installing.
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.
Create a three-scene video composition in a retro pixel style using a Hyperframes HTML template. Customize titles, labels, and colors while preserving scene transitions, short scene durations, and repeatable animation timing.
Create and revise headlines, descriptions, and main text for paid social and search ads. Use it to develop ad copy options and refine wording through repeated rounds of revision.
Create a three-page editorial motion sequence with dark backgrounds, serif typography, staged text reveals, and chapter transitions. The result is a single HTML file suited to fashion-inspired storytelling and short visual presentations.
Inspect and test web pages through a browser automation command-line tool. Navigate, click, enter text, capture screenshots, and extract page details, with a focus on checking local OpenDesign previews and reviewing web app quality.
Plan an AI music album from its concept through lyric drafts, track order, and export. Intended for independent album experiments and brand soundtracks, with the full production workflow provided through a separately installed upstream bundle.
Create generative art, or images made with programmed rules, using p5.js. Fixed random seeds make each rendering reproducible, supporting procedural posters, still images that suggest motion, and studies of artistic frame composition.