skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

design-system

Generate presentations from primitive, semantic, and component tokens with JSON and CSS styling.

Updated Jun 23, 2026
Search Tags:#design system#brand compliance#presentation generation#token architecture#component specifications
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill design-system-guideops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/guideops/agentic-shared/tree/main/skills/ui-ux-pro-max/plugin-skills/design-system
Command: npx skills add https://github.com/guideops/agentic-shared --skill design-system-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the design process by providing a token architecture for creating components and generating presentations systematically.

Core Features & Use Cases

  • Token Architecture: Defines and manages design tokens for color, spacing, typography, etc.
  • Component Specifications: Detailed specifications for design components with states and variants.
  • Slide Generation: Automatically creates presentations using design tokens and components.
  • Use Case: You can use this Skill to build a brand-compliant presentation with a consistent design language, including tokens and component-based styling.

Quick Start

Use the design-system skill to generate a presentation slide for 'ClaudeKit Marketing' with the title 'Our Vision' and the sub-title 'The future of marketing is here.'.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I generate brand-compliant presentations using a design token architecture?▼

Design tokens are structured variables representing core visual properties like color, spacing, and typography. This Skill defines them using JSON and CSS to maintain brand compliance and ensure a consistent design language across automatically generated presentation slides.

What is the best way to structure component specifications for automated slide generation?▼

Defining component specifications with detailed states and variants requires prerequisite knowledge of JSON and CSS manipulation. You must structure these specifications to map directly to the semantic token layer for successful automated presentation generation.

Can I use my existing brand guidelines to create a systematic design system for slides?▼

Yes, you can integrate existing brand guidelines to create a systematic design system for slides. The Skill relies on brand and ui-styling dependencies to map your visual rules into a structured token architecture for consistent presentation generation.

Do I need to manipulate JSON and CSS to build a three-layer token architecture for presentations?▼

Yes, JSON and CSS manipulation is required to define tokens and apply presentation styling. You need this technical knowledge to establish the primitive, semantic, and component layers that automate systematic design and slide generation.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

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
aaltaayaaltaay

ckm:design

Coordinate end-to-end design across brand identity, tokens, UI styling, CIP mockups, and presentation assets.

Community
Advanced
sonle0311sonle0311

ckm:design-system

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

Community
Advanced