The LeadPulse Design System skill transforms generic web projects into high-end, dark-first SaaS interfaces. Instead of the “default” look shared by thousands of apps, it implements a specific, opinionated aesthetic built on a foundation of precision typography and a curated color palette.
At a high level, this skill automates the generation and integration of a professional design system into your codebase. It produces a complete directory structure including:
- Design Tokens: CSS custom properties for colors, spacing, and elevation.
- Tailwind Integration: A custom preset that maps tokens to utility classes like
bg-mintandshadow-glow. - Component Library: 12 core shadcn-style components (Button, Card, Modal, etc.) pre-styled with LeadPulse logic.
- Interactive Preview: A Storybook-style gallery page to visualize all components and variants instantly.
Developed for modern frontend workflows, it provides native support for Next.js 14+ (App Router), Vite, Preact, and Astro. Whether you are starting a fresh project or migrating away from standard shadcn defaults, this skill handles the heavy lifting of token mapping and font self-hosting setup.
Manually configuring a design system—handling font loading, setting up a consistent 8-point spacing grid, and ensuring WCAG AA contrast compliance—takes hours of tedious work. This skill executes that entire process in seconds, ensuring your UI remains disciplined, cohesive, and visually striking.
Built by Nex AI. More skills and info at nex-ai.be and slopsome.com.