skills.rest
telum-ai
telum-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

project-design-system

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
One-click install
npx skills add https://github.com/telum-ai/speck --skill project-design-system
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
CassiiopeiaCassiiopeia
7

pro-design-analyze

Analyze and plan system designs including architecture, APIs, databases, and UI/UX.

Community
Advanced
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
0xRayAI0xRayAI

architect-tools

Provides tools for system design, architecture planning, and decision documentation.

Official
Intermediate
ehtbantonehtbanton

solid-component-generator

Generate SolidJS components with TypeScript and reactive primitives.

Community
Basic