skills.rest
marcosgcr3
marcosgcr3COMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate structured design token systems and brand-compliant HTML slide assets.

Updated Jun 26, 2026
Search Tags:#design systems#design tokens#slide generation#tailwind#css variables#brand compliance#component specs
One-click install
npx skills add https://github.com/marcosgcr3/gardencenter2 --skill design-system-marcosgcr3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/marcosgcr3/gardencenter2/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/marcosgcr3/gardencenter2 --skill design-system-marcosgcr3

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps teams create and enforce a structured design system so UI components, design tokens, and presentation assets stay consistent, reusable, and brand-compliant across products and slide decks.

Core Features & Use Cases

  • Three-layer token architecture: Defines primitive, semantic, and component token layers for scalable theming and systematic UI implementation.
  • Component specifications and token mapping: Documents states, sizes, anatomy, and token usage for common interface components such as buttons, inputs, cards, badges, dialogs, and tables.
  • Slide generation and validation: Supports creating brand-aligned HTML presentations with token-based styling, background image selection, and token compliance checks for slides and other visual assets.
  • Use Case: A product design and frontend team can use this Skill to generate a shared token CSS file from JSON, map those tokens into Tailwind or components, and then produce investor or product slides that follow the same brand system automatically.

Quick Start

Ask the AI to use the design-system skill to generate or validate design tokens for a component library or create a brand-compliant slide deck from your presentation goal.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I build a design token system with primitive, semantic, and component layers?▼

To build a design token system, define a three-layer architecture starting with primitive tokens, map them to semantic aliases, and apply them to specific component states to ensure scalable theming and systematic UI implementation.

How do I map design tokens into Tailwind theme configuration and CSS variables?▼

You can map design tokens into Tailwind by generating a shared CSS variable file from JSON token definitions, allowing direct integration into your Tailwind theme setup or component styling for frontend handoff.

Can I generate brand-compliant HTML slides using design tokens?▼

Yes, you can generate brand-compliant HTML slides by applying token-based styling, selecting background images, and running automated validation checks to ensure token compliance across presentation assets.

What is the best way to document component anatomy and state variations for a UI design system?▼

The best way to document component specifications is to map token usage, states, sizes, and anatomy for common interface components like buttons, inputs, cards, and dialogs to maintain brand compliance.

Does this approach validate token usage in generated visual assets?▼

Yes, the approach validates token usage by performing automated compliance checks on generated slides and visual assets to ensure they strictly follow the established design system structure.

What do I need to create a structured design system for frontend handoff?▼

To create a structured design system for frontend handoff, you need a defined token architecture, component state documentation, and CSS variable outputs to keep UI components consistent and reusable across products.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
dmedina-devdmedina-dev
1

ckm:design-system

Generate brand-compliant token systems, Tailwind-ready CSS variables, component specs, and HTML slides from JSON/CSS inputs.

Community
Advanced
ydnikolaevydnikolaev
8

ux-designer

Build cohesive design systems and token libraries for web and mobile projects.

Community
Intermediate