design-system

Name: design-system
Availability: InStock
Author: ben1821

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

Ready to run

npx skills add https://github.com/Ben1821/AIGC_APP --skill design-system-ben1821

💬 Prompt for ChatGPT / Claude Chat▼

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.