skills.rest
kochangbok
kochangbokCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Guide consistent UI component design with Paperclip's design system.

1|Updated Mar 29, 2026
Search Tags:#typography#design system#ui design#component creation#status system
One-click install
npx skills add https://github.com/kochangbok/paperclip-ko --skill design-guide-kochangbok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/kochangbok/paperclip-ko/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/kochangbok/paperclip-ko --skill design-guide-kochangbok

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide for designing and building consistent, reusable UI components using Paperclip's design system, ensuring a cohesive user experience across your application.

Core Features & Use Cases

  • Design System Guide: Offers detailed instructions for creating UI components, using design tokens, typography, and status/priority systems.
  • Component Creation: Provides guidelines for creating new components and extending existing ones.
  • Use Case: When developing a new feature or modifying an existing one, this Skill helps maintain consistency in UI design and functionality.

Quick Start

Use the design-guide skill to review the design principles and component hierarchy of Paperclip's UI system.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I create consistent UI components using a design system?▼

To create consistent UI components, use design tokens, typography rules, and status systems as foundational guidelines, ensuring cohesive composition and reusability across your application's frontend.

What are design tokens and how do they work in UI design?▼

Design tokens are standardized variables that store visual style decisions like color and typography, ensuring consistent UI component creation and maintainable design system architecture across features.

How do I set up a status and priority system for UI components?▼

A status and priority system for UI components is set up by defining standardized visual states and hierarchy levels within your design system, ensuring consistent user experience across all application features.

Do I need prior knowledge of Paperclip's UI system to use this design guide?▼

Yes, using this design guide requires existing knowledge of Paperclip's UI system, as it provides specific best practices for component creation, design tokens, and typography within that framework.

What's the best way to extend existing UI components in a design system?▼

The best way to extend existing UI components is to follow design system composition guidelines, reusing established design tokens and typography rules to maintain UI consistency without breaking core functionality.

When should I use design system guidelines for frontend development?▼

Use design system guidelines during frontend development whenever creating new features or modifying existing ones, ensuring UI consistency, proper component composition, and functional reusability across your application.

Related Skills

Explore More Design & Creative Skills→
khoabdkhoabd

design-guide

Align Paperclip frontend UI components with the established design system.

Community
Intermediate
Project-N-E-K-OProject-N-E-K-O
2.4k

🎨 UI 设计规范

Codifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.

Official
Basic
IncomeStreamSurferIncomeStreamSurfer
71

design-guide

Guide Paperclip UI component creation with design tokens, typography, and status systems.

Community
Intermediate
ATD04ATD04

design-guide

Guide frontend developers in building Paperclip UI components with design tokens and patterns.

Community
Intermediate