project-design-system

Name: project-design-system
Availability: InStock
Author: Telum

Develop design tokens, UI components, and interaction patterns for projects.

2|Updated Dec 21, 2025

Search Tags:#design system #component library #design tokens #frontend development #ui components #ux strategy

Ready to run

npx skills add https://github.com/telum-ai/speck --skill project-design-system

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: project-design-system
Source: https://github.com/telum-ai/speck/tree/main/.cursor/skills/project-design-system
Command: npx skills add https://github.com/telum-ai/speck --skill project-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of maintaining visual and functional consistency across a project by establishing a comprehensive design system.

Core Features & Use Cases

Design Token Definition: Creates systematic tokens for colors, typography, spacing, and effects.
Component Architecture: Defines core UI components and their variations.
Pattern Library: Documents interaction and layout patterns for consistent user experiences.
Brownfield/Greenfield Modes: Adapts to existing codebases or creates new systems from scratch.
Use Case: A new web application needs a unified look and feel. This Skill will help define its color palette, typography, button styles, and form elements, ensuring all future development adheres to these standards.

Quick Start

Use the project-design-system skill to create a new design system for the 'speck' project.

Frequently Asked Questions about project-design-system

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

FAQPage Schema

How do I build a consistent design system for a new web application?▼

To build a design system, this Skill extracts or creates systematic design tokens for colors, typography, and spacing, while architecting core UI components and defining interaction patterns to ensure visual and functional consistency across your project.

Can I extract design tokens from an existing codebase?▼

Yes, you can extract design tokens from an existing codebase. The Skill operates in brownfield extraction mode to analyze your current frontend code and systematically document existing styles into a unified design token structure.

What is the best way to document UI components and interaction patterns?▼

The best way to document UI components is to define their core architecture and variations alongside a pattern library. This ensures consistent user experiences by standardizing layout and interaction behaviors across the application.

Does this approach support greenfield UX strategy creation?▼

Yes, this approach supports greenfield UX strategy creation. It can develop a comprehensive design system from scratch based on your UX strategy, defining color palettes, typography, and form elements before frontend development begins.

When do I need a formal component library for frontend development?▼

You need a formal component library for frontend development when visual and functional consistency becomes challenging to maintain. Establishing systematic design tokens and pattern libraries ensures all future development adheres to unified standards.