skills.rest
fisto-tech
fisto-techOFFICIAL
Explore all skills by this author →
GitHub

design-system

Manage design tokens and generate presentations from configuration files.

Updated Apr 25, 2026
Search Tags:#design tokens#brand compliance#presentation generation#component specifications#systematic design
One-click install
npx skills add https://github.com/fisto-tech/akira-service-tool-2 --skill design-system-fisto-tech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/fisto-tech/akira-service-tool-2/tree/main/.agents/skills/design-system
Command: npx skills add https://github.com/fisto-tech/akira-service-tool-2 --skill design-system-fisto-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires brand, ui-styling, ui-ux-designer, frontend-developer, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the creation and management of design tokens, and automates the generation of brand-compliant presentations, reducing the manual work involved in design systems.

Core Features & Use Cases

  • Token Architecture: Offers a three-layer structure (Primitive, Semantic, Component) for systematic design token creation.
  • Component Specifications: Provides detailed specifications for various UI components.
  • Slide Generation: Automatically generates presentations using design tokens, CSS variables, and contextual decision systems.
  • Use Case: Ideal for companies needing to maintain consistent branding across various design elements and presentations.

Quick Start

Use the design-system skill to generate tokens from a configuration file and create a slide deck for a presentation.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I manage design tokens for a consistent brand presentation?▼

You can manage design tokens by utilizing a three-layer architecture consisting of Primitive, Semantic, and Component layers. This structure streamlines token creation and ensures brand compliance across presentation generation workflows.

Can I generate presentation slides using CSS variable systems?▼

Yes, you can generate brand-compliant presentations automatically using CSS variable systems. The system applies design tokens and contextual decision systems to create slide decks without manual styling work.

What is the best way to structure component specifications for a design system?▼

The best way to structure component specifications is through a systematic three-layer token architecture. This approach separates primitive values, semantic meanings, and component-specific rules to maintain consistency across UI elements.

Do I need specific dependencies to automate presentation generation from design tokens?▼

Yes, you need brand, ui-styling, ui-ux-designer, and frontend-developer dependencies to integrate presentation generation. These components provide the necessary context for applying design tokens correctly.

How does token architecture handle brand compliance across different design elements?▼

Token architecture handles brand compliance by managing design tokens through structured JSON and CSS files. This ensures that generated components and presentations automatically adhere to defined brand standards and visual rules.

Related Skills

Explore More Product & Management Skills→
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
marcosgcr3marcosgcr3

design-system

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

Community
Advanced
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
sumrae412sumrae412
2

courierflow-ui

Enforce layered CSS architecture and design token standards for web applications.

Community
Intermediate