1

    nex-design-system-leadpulse

    by Nex AI

    A focused dark-first SaaS design system with typography rules, Tailwind tokens, and 12 high-end components.

    Updated Jun 2026
    Security scanned

    $9

    · or 45 credits

    30-day refund guarantee

    Secure checkout via Stripe

    Included in download

    • Generate a professional dark-mode SaaS UI in seconds
    • Replace generic shadcn styling with a high-contrast brand identity
    • Instant install

    Sample input

    I'm starting a new Next.js 14 dashboard. Apply the LeadPulse design system to the project.

    Sample output

    I've generated the design-system/ directory with:

    • tokens.css: Dark-first variables (Mint #4EE8E8, Lavender #B47AFF).
    • tailwind.preset.ts: Custom utility mapping.
    • 12 components in components/ui/.
    • A preview gallery at /design-system. Next step: Add the preset to your config.

    About This Skill

    Modern SaaS Aesthetic Ready to Deploy

    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.

    What it does

    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-mint and shadow-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.

    Supported Tools & Frameworks

    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.

    Why use this skill?

    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.

    Use Cases

    • Generate a professional dark-mode SaaS UI in seconds
    • Replace generic shadcn styling with a high-contrast brand identity
    • Bootstrap a Next.js 14 project with custom Tailwind tokens and fonts
    • Export portable CSS variables for non-Tailwind web environments

    Reviews

    No reviews yet - be the first to share your experience.

    Only users who have downloaded or purchased this skill can leave a review.

    Security Scanned

    Passed automated security review

    Permissions

    Allowed Hosts

    nex-ai.be
    daypicker.dev

    File Scopes

    references/**

    Tags

    tailwind-css
    nextjs
    ui-ux
    saas
    design-system
    frontend

    Creator

    Nex AI

    Founder of Nex AI. I build production-grade Claude Skills from systems that actually run: multi-tenant SaaS, Telegram agents, Raspberry Pi infrastructure, 3D multiplayer rooms. Every skill ships battle-tested patterns, not theory. 33+ open source skills published, commercial catalog growing.

    Frequently Asked Questions

    Learn More About AI Agent Skills

    More Premium Skills

    World-Class Site & App Design

    Every AI-built UI looks generic and templated. This skill teaches your agent to actually match the design to the project, the industry, and the audience.

    $53 installs

    cinematic-sites

    Turn any basic business URL into a high-end cinematic landing page with AI-generated 4K assets and GSAP animations.

    $125 installs

    gtm-engine

    High-conversion sales outreach, SaaS agreements, and marketing collateral for revenue-focused AI agents.

    $62 installs

    designing-hybrid-context-layers

    Architects the right retrieval strategy for every query — teaching your agent when to use RAG, a knowledge graph, or a temporal index instead of defaulting to vector search for everything.

    $1012 installs