菜单
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>.