Can I use this skill with Tailwind CSS?

Yes, the skill includes specific integration patterns to map your design tokens directly to a Tailwind theme configuration.

What is the three-layer token structure?

It is a methodology that organizes styles from Primitives (raw values like #2563EB) to Semantics (purpose-driven aliases like primary) to Component-specific tokens for maximum maintainability.

How does the slide generation feature work?

It uses a contextual decision system to select layouts, charts, and copy formulas from a library, ensuring every slide imports and uses your project's design tokens.

Does it support data visualization in slides?

Yes, it integrates Chart.js to create professional, token-themed charts instead of using static images or basic CSS bars.

Design System & Presentation Pro

Name: Design System & Presentation Pro
Author: lyxjack

bylyxjack

•

Design Tools

Architects scalable design token systems and generates brand-compliant presentations using a structured, component-driven approach.

This skill empowers developers and designers to build and maintain professional-grade design systems within Claude Code. It implements a robust three-layer token architecture (Primitive, Semantic, Component) to ensure design consistency from raw values to specific UI elements. Beyond CSS and Tailwind integration, it features a sophisticated slide generation engine that creates investor-ready presentations using design tokens, Chart.js visualizations, and strategic emotional pacing, ensuring your marketing materials and product UI share the same single source of truth.

Key Features

01Strategic slide creation based on the Duarte Sparkline emotional arc

02Token-compliant presentation engine with Chart.js integration

03Tailwind CSS theme integration and component state mapping

04Automated CSS variable generation and hardcoded value validation

051 GitHub stars

06Three-layer token architecture for scalable and maintainable UI styles

Use Cases

01Migrating legacy CSS to a modern, systematic token-based architecture

02Generating brand-compliant pitch decks and technical presentations directly from code

03Establishing a design-to-code handoff workflow with standardized tokens

Key Features

01Strategic slide creation based on the Duarte Sparkline emotional arc

02Token-compliant presentation engine with Chart.js integration

03Tailwind CSS theme integration and component state mapping

04Automated CSS variable generation and hardcoded value validation

051 GitHub stars

06Three-layer token architecture for scalable and maintainable UI styles

Use Cases

01Migrating legacy CSS to a modern, systematic token-based architecture

02Generating brand-compliant pitch decks and technical presentations directly from code

03Establishing a design-to-code handoff workflow with standardized tokens