메뉴
Guides premium Korean landing page aesthetics for agency-grade output. Defines exact fonts, spacing, shadows, card structures, animations, and Korean typography standards while blocking common defaults that make AI designs look cheap or generic.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Overrides default LLM truncation behavior. Enforces complete HTML generation with zero placeholder patterns. Every landing page must be delivered as a complete, production-ready file. No shortcuts, no skeletons, no "add more as needed" patterns.
Builds premium, conversion-optimized landing pages as standalone HTML using Tailwind CSS CDN. Overrides generic template bias with metric-based design rules, Korean typography standards, and hardware-accelerated motion.
Upgrades existing HTML/CSS landing pages to premium Korean landing page quality. Audits generic AI design patterns and applies targeted improvements across typography, color, layout, motion, content, and accessibility.
| name | premium-korean-aesthetic |
| description | Guides premium Korean landing page aesthetics for agency-grade output. Defines exact fonts, spacing, shadows, card structures, animations, and Korean typography standards while blocking common defaults that make AI designs look cheap or generic. |
Design_DirectorIf your generated code includes ANY of these, the design instantly fails:
1px solid gray. Harsh dark shadow-md or rgba(0,0,0,0.3).linear or ease-in-out transitions. Instant state changes. window.addEventListener('scroll').Before writing code, select ONE combination from each category:
#050505), subtle radial mesh gradient orbs in background. Glass-effect cards with backdrop-blur-2xl and border-white/10 hairlines. Wide geometric Grotesk English display font + Pretendard Korean.#FDFBF7, #FAF7F0), muted sage or espresso accents. High-contrast serif English headings + Pretendard Korean body. Subtle CSS noise overlay (opacity-[0.03]) for paper texture.shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)]).col-span-8 row-span-2 next to stacked col-span-4). Breaks visual monotony.
grid-cols-1) with gap-4. All col-span resets to col-span-1.transform: rotate(-1deg) or rotate(2deg) for organic depth.
768px. Stack vertically.Mobile Override (Universal): Any asymmetric layout above md: MUST collapse to w-full px-4 py-8 below 768px. Use min-h-[100dvh] not h-screen.
Premium cards are not flat rectangles. They look like machined hardware — a glass plate in an aluminum tray:
bg-white/5 (dark) or bg-black/5 (light), ring-1 ring-white/10 or ring-black/5, p-1.5, rounded-[2rem].shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), calculated smaller radius (rounded-[calc(2rem-0.375rem)]).rounded-full) with generous padding (px-8 py-4).w-8 h-8 rounded-full bg-black/5 flex items-center justify-center flush with button's inner edge.hover:scale-[1.02] + arrow hover:translate-x-1. Active: active:scale-[0.98].shadow-[0_0_30px_rgba(accent,0.2)] on hover.py-24 md:py-32 lg:py-40. Let the design breathe heavily.rounded-full px-3 py-1 text-[11px] uppercase tracking-[0.15em] font-medium bg-accent/10 text-accent.leading-snug for Korean headlines (not leading-none — Korean needs vertical space). break-keep-all on all Korean blocks.All motion must simulate physical mass and spring physics. Never use default easing.
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
Apply this to ALL interactive elements. This is the motion signature.
mt-4 mx-auto w-max rounded-full), glass effect (backdrop-blur-xl bg-white/10 border border-white/10).backdrop-blur-3xl. Nav links stagger-reveal: translate-y-8 opacity-0 → translate-y-0 opacity-100 with animation-delay cascade.Elements never appear statically. On viewport entry:
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(2rem); filter: blur(4px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
Use IntersectionObserver for triggering. Stagger siblings with animation-delay: calc(var(--index) * 80ms).
Background decorative elements should have subtle infinite animations:
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-15px) } } with animation: float 6s ease-in-out infinite.@keyframes gradientRotate { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } for mesh gradient backgrounds.transform and opacity. Never top, left, width, height.backdrop-blur only on fixed/sticky elements. Never on scrolling content.pointer-events-none, z-[60]. Never on scrolling containers.loading="lazy" + decoding="async" on all below-fold images.py-24 — design breathes heavilycubic-bezier(0.16, 1, 0.3, 1) — no linear or ease-in-out768px to single-column with w-full px-4transform and opacitybackdrop-blur only on fixed/sticky elementsbreak-keep-all and leading-snug or leading-tight