design-system

Name: design-system
Availability: InStock
Author: ll1llk

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

Updated Jul 6, 2026

Search Tags:#design tokens #slide generation #brand compliance #component specifications #systematic design

Ready to run

npx skills add https://github.com/ll1llk/portfilo --skill design-system-ll1llk

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/ll1llk/portfilo/tree/main/v0_memories/user/skills/design-system
Command: npx skills add https://github.com/ll1llk/portfilo --skill design-system-ll1llk

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 simplifies the creation of brand-compliant presentations, manages design tokens, and specifies component behavior, reducing the complexity of systematic design and token-based UI development.

Core Features & Use Cases

Token Architecture: Manage and use three-layer tokens (primitive→semantic→component) for design consistency.
Component Specifications: Define and document component states and variants.
Slide Generation: Generate slides with design tokens and contextual decision-making.
Use Case: You can utilize this Skill to define design tokens for your product's UI, generate a set of slides with components, and maintain a consistent look and feel across your brand's communication.

Quick Start

Use the design-system skill to generate slide tokens for a new presentation on 'ClaudeKit Marketing'.

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 slides using design tokens?▼

To generate brand-compliant slides, this Skill applies a token-based architecture and a contextual decision system to your presentation layouts. It utilizes primitive, semantic, and component tokens to ensure visual consistency across all generated slides and UI components.

What is a three-layer token architecture for systematic design?▼

A three-layer token architecture structures design tokens into primitive, semantic, and component levels. This Skill manages this hierarchy to map raw values to meaningful UI states, ensuring consistent component specifications and brand compliance across your product.

Do I need knowledge of CSS variables and component state management to use design tokens?▼

Yes, understanding token architecture, CSS variables, and component state management is required. This prerequisite knowledge allows you to accurately define component specifications, manage variants, and implement the contextual decision system for slide generation.

Can I define component specifications and variants with this token-based UI system?▼

Yes, you can define and document component states and variants using token-based UI architecture. The Skill manages these component specifications by binding semantic design tokens to specific UI behaviors, ensuring systematic design consistency.

What's the best way to maintain brand consistency across UI components and presentations?▼

The best way to maintain brand consistency is to manage a centralized design token architecture for both UI components and slide generation. This Skill enforces brand compliance by applying primitive, semantic, and component tokens across all visual outputs.