design-system

Name: design-system
Availability: InStock
Author: fisto-tech

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

Ready to run

npx skills add https://github.com/fisto-tech/akira-service-tool-2 --skill design-system-fisto-tech

💬 Prompt for ChatGPT / Claude Chat▼

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.