메뉴
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.
| name | high-end-visual-design |
| description | 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. |
Role: ALIAS. This skill is an archetype-selector config inside impeccable — do NOT fire standalone.
The Awwwards-tier archetypes below (Ethereal Glass / Editorial Luxury / Soft Structuralism, plus Bento / Z-Axis Cascade / Editorial Split layouts) are applied AS CONFIG INSIDE impeccable when the user requests a specific vibe or archetype. Before acting, confirm the right entry point:
/impeccable craft — the impeccable skill reads these archetypes as parameters. Do NOT fire soft-skill standalone./redesign-existing-projects. Do NOT fire soft-skill here — archetypes are for generating new output./emil-design-eng. Do NOT fire soft-skill — it is generative, not advisory.This file exists so the archetypes are discoverable and documented. Standalone invocation produces contradictory output with impeccable (different banned-font lists: soft-skill bans Helvetica, impeccable bans Geist-family).
Full decision table: .planning/phases/65-agent-ecosystem-optimization/DESIGN-CONSOLIDATION.md
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 contentThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system.
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
Use when the user wants to create any technical diagram - architecture, data flow, flowchart, sequence, agent/memory, or concept map - and export as SVG+PNG. Trigger on: "画图" "帮我画" "生成图" "做个图" "架构图" "流程图" "可视化一下" "出图" "generate diagram" "draw diagram" "visualize" or any system/flow description the user wants illustrated.
Generate NFL content packages for NotebookLM — weekly rankings summaries from projection data. Produces markdown files suitable for upload to Google NotebookLM for audio overview generation. Use when the user wants to create podcast content, rankings summaries, or content packages from projection data.