메뉴
Builds high-end, animated websites with a focus on aesthetics, semantic HTML, and accessibility. Use when the user wants to "vibecode", create an "animated website", or use the "Noir Luxe" style workflow.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Create 6-month content calendars, multi-platform SNS strategies, and YouTube optimization plans. Use when the user needs a content strategy or growth plan.
Write platform-specific social media captions that drive engagement and conversions. Use when the user needs compelling written content for social posts.
Create strategies for shoppable posts and social commerce conversion optimization. Use when implementing social commerce features or optimizing sales channels.
Handle social media crises with strategic response and reputation management. Use when the user needs to manage a PR crisis, handle negative feedback storms, or protect brand reputation.
Monitor brand mentions, analyze sentiment, and identify trends across social platforms. Use when the user needs to analyze social data, track brand health, or understand audience sentiment.
Transform content across platforms with platform-specific optimization. Use when converting blog posts, videos, or articles into threads, captions, and posts for various social networks.
| name | vibecoding-animated-websites |
| description | Builds high-end, animated websites with a focus on aesthetics, semantic HTML, and accessibility. Use when the user wants to "vibecode", create an "animated website", or use the "Noir Luxe" style workflow. |
CRITICAL: If the user has NOT provided the following, you MUST ask for them before proceeding:
Action: Study reference images or search for "luxury website design trends" to inform the "vibe".
Apply these rules to all generation steps:
<header>, <main>, <section>, <article>, <footer>.16px, 32px, 64px).@media (prefers-reduced-motion: reduce) must be respected.--color-bg, --color-text, --color-accent) for all colors.Use this template for the first code generation:
Create a landing page for [Business Name]. [Aesthetic] aesthetic.
Colors: [Specific Colors].
Rules: Semantic HTML, 8px grid, CSS vars.
Sections:
- Hero (Headline + CTA)
- Features (Craftsmanship/Details)
- Testimonials
- Final CTA
Typography: [Elegant/Bold/Modern]
State 1 (Static):
[Product/Object] wrapped/still, [Background Color] background, studio lighting, high definition, [Aesthetic] style.
State 2 (Dynamic):
[Product/Object] exploding/unwrapping/in-motion, particles flying, [Background Color] background, dramatic, chaotic, beautiful.
Smooth, cinematic transition showing [Product] changing from [State 1] to [State 2].
<canvas> or cycled via <img> src based on scroll position.dark-mode class on <body>.