From superpowers
Creates premium AI SaaS landing pages in Phoenix design system: dark themes, glassmorphism, vibrant gradients, futuristic aesthetics. Use for AI/tech product showcases.
npx claudepluginhub lunartech-x/superpowers --plugin superpowersThis skill uses the workspace's default tool permissions.
Build premium AI SaaS landing pages with the Phoenix design aesthetic - a dark, futuristic look with vibrant gradients and glassmorphism.
Creates distinctive visual identities for new UIs like landing pages, marketing sites, prototypes, or greenfield frontend projects without design systems. Builds on frontend-design with unique typography, color palettes, and memorable elements.
Designs award-winning web UIs with intentional mood, palette, typography, layout, and purposeful motion to escape generic AI aesthetics. Invoke for creative or designer-quality requests.
Builds premium dark-themed hero sections and landing pages with cinematic video backgrounds, liquid glass morphism, editorial typography, and pixel-perfect specifications. Use for premium dark UI, hero sections, or landing pages.
Share bugs, ideas, or general feedback.
Build premium AI SaaS landing pages with the Phoenix design aesthetic - a dark, futuristic look with vibrant gradients and glassmorphism.
:root {
/* Backgrounds */
--bg-primary: #000000;
--bg-secondary: #0a0a0a;
--bg-card: rgba(15, 15, 15, 0.8);
/* Text */
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
/* Accents */
--accent-purple: #a855f7;
--accent-pink: #ec4899;
--accent-blue: #3b82f6;
--accent-cyan: #06b6d4;
/* Gradients */
--gradient-aurora: linear-gradient(135deg, #a855f7, #ec4899, #3b82f6);
--gradient-glow: radial-gradient(circle, rgba(168,85,247,0.3), transparent);
}
[Logo] [Home] [About] [Features] [Pricing] [Use Cases] [Blog] [Contact] [Login] [Get Started]
Example:
Supercharge Your Productivity with AI
Over 200+ Next-Gen AI Assistants and Coaches to boost
your creativity and productivity – work smarter, not harder.
[Get started] [View pricing]
Learn how [Product] works
Ready to reclaim your time? Here's the rundown.
backdrop-filter: blur(10px)Choose your plan
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.glow {
box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
}
.btn-primary {
background: #ffffff;
color: #000000;
border-radius: 9999px;
padding: 12px 24px;
font-weight: 500;
}
.btn-secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 9999px;
}
| Element | Size | Weight |
|---|---|---|
| H1 (Hero) | 48-64px | 600-700 |
| H2 (Section) | 36-42px | 600 |
| H3 (Card) | 20-24px | 600 |
| Body | 16-18px | 400 |
| Small | 14px | 400 |
/* Mobile first */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }