From superpowers
Builds dark-themed AI SaaS landing pages with the Phoenix design system: glassmorphism, gradient aesthetics, and premium UI components.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:phoenix-design-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build premium AI SaaS landing pages with the Phoenix design aesthetic - a dark, futuristic look with vibrant gradients and glassmorphism.
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 */ }
npx claudepluginhub lunartech-x/superpowers --plugin superpowersGenerates award-winning, designer-quality web frontends that avoid generic AI patterns. Focuses on visual hierarchy, typography, intentional color palettes, and purposeful motion.
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.
Creates production-grade frontend interfaces emphasizing product design, UX discipline, and visual polish for web components, pages, or applications.