design-system

Apply a three-layer token architecture to standardize design tokens and theming.

2|Updated Jan 9, 2026

Search Tags:#slides #tailwind #design-system #css-variables #design-tokens #brand-guidelines #token-architecture

Ready to run

npx skills add https://github.com/NammDev/Goads-Krea --skill design-system-nammdev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/NammDev/Goads-Krea/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/NammDev/Goads-Krea --skill design-system-nammdev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Token architecture, semantic consistency, and scalable design systems across tokens, components, and slides can be brittle without a structured approach. This Skill provides a three-layer token system and a slide-generation workflow to enforce brand-aligned design artifacts.

Core Features & Use Cases

Three-Layer Token Architecture (Primitive → Semantic → Component) for scalable theming and predictable styles.
Slide system with brand-compliant templates, contextual decision flow, and Chart.js visuals for data storytelling.
References and templates to guide token usage, design-token naming, and per-component mappings across tokens, specs, and assets.
Scripted tooling (scripts/) for token generation, token validation, background fetching, and inline token embedding.

Quick Start

Run the slide generator to produce a brand-consistent deck from the included data.

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a scalable design token architecture for brand slides?▼

A scalable design token architecture uses a three-layer system—primitive, semantic, and component—to standardize styles and enable predictable, brand-consistent theming across tokens, component specs, and slide templates.

What's the best way to standardize design tokens across components and slide templates?▼

Standardizing design tokens across components and slide templates is achieved by applying a three-layer token architecture that provides per-component mappings, contextual decision flows, and scripted tooling for token validation and generation.

Does this design system approach work with Tailwind CSS variables?▼

Yes, the design system approach works with Tailwind CSS variables by applying a structured token architecture that translates primitive and semantic tokens into CSS variables for automated, brand-aligned slide generation.

Can I generate brand-compliant slide decks automatically from design tokens?▼

You can generate brand-compliant slide decks automatically by running the included slide generator, which uses token-driven templates, contextual decision flows, and Chart.js visuals to produce data storytelling artifacts.

Do I need any external dependencies to use this token-driven design system?▼

No external dependencies are required to use this token-driven design system, as it provides self-contained scripts, templates, and references for token generation, validation, background fetching, and inline embedding.

Why does my design token validation fail when generating brand slides?▼

Design token validation fails when tokens do not align with the three-layer architecture, so you must use the provided script tooling to verify token naming, per-component mappings, and metadata before generating slides.