skills.rest
Ben1821
Ben1821COMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate design tokens and component specifications from JSON configurations.

Updated Jul 4, 2026
Search Tags:#design system#UI development#slide generation#token architecture#component specifications
One-click install
npx skills add https://github.com/Ben1821/AIGC_APP --skill design-system-ben1821
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Ben1821/AIGC_APP/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/Ben1821/AIGC_APP --skill design-system-ben1821

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps in creating a consistent design system for UI development, enabling the generation of slides with tokens and component specifications.

Core Features & Use Cases

  • Token Architecture: Offers a three-layered token structure for consistent design.
  • Component Specifications: Provides detailed specifications for UI components.
  • Slide Generation: Automatically generates slides using design tokens and component specifications.
  • Use Case: Imagine you are working on a new project and need to establish a design system and create presentations that comply with that system. This Skill can help by generating the required tokens, component specifications, and slides.

Quick Start

Use the design-system skill to generate design tokens from the JSON configuration file 'tokens.json'.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate design tokens from a JSON configuration for UI development?▼

Design tokens are generated from a 'tokens.json' file to establish a structured, three-layered token architecture, ensuring consistent UI design and presentation generation via CSS variables and JSON configurations.

What is a three-layered token architecture and how does it work for UI components?▼

A three-layered token architecture structures design tokens hierarchically using CSS variables and JSON configurations, providing detailed component specifications to maintain visual consistency across UI development and slide generation.

Can I use this design system approach with Tailwind CSS for UI development?▼

Yes, the design system approach requires Tailwind CSS as a dependency, allowing you to utilize CSS variables and JSON configurations to generate tokens and component specifications within a Tailwind-based workflow.

How to automatically generate slides using design tokens and component specifications?▼

Slides are automatically generated by applying defined design tokens and component specifications to your presentation layout, ensuring that visual outputs comply directly with the established UI design system.

Do I need prior knowledge of design systems to use these token and component specifications?▼

Yes, utilizing this design system requires knowledge of design systems and UI development principles to effectively manage the JSON configurations, token architecture, and component specifications.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design-system

Generate CSS variables from JSON token definitions for brand compliance.

Community
Advanced
sonle0311sonle0311

ckm:design-system

Manage design token architecture and generate CSS variables from JSON files.

Community
Advanced
jorgeasaurusjorgeasaurus
12

ckm:ui-styling

Create accessible React interfaces with Radix UI components and Tailwind CSS.

Community
Advanced
ll1llkll1llk

design-system

Manage token-based UI design and generate slides with design tokens.

Community
Advanced