design-guide

Name: design-guide
Availability: InStock
Author: jang-zn

Document UI design guidelines, tokens, typography, and components for Paperclip frontend development.

Updated Apr 3, 2026

Search Tags:#typography #design #ui #components #guidelines #design-tokens #design-guide

Ready to run

npx skills add https://github.com/Jang-zn/paperclip-kr --skill design-guide-jang-zn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Jang-zn/paperclip-kr/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Jang-zn/paperclip-kr --skill design-guide-jang-zn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip UI design system guidance to ensure a cohesive, scalable frontend design language across components, tokens, and layouts.

Core Features & Use Cases

Design Principles, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page.
Guidelines for creating new UI components, modifying existing ones, and aligning frontend features with the design language.
Real-world workflows include starting a new component, auditing an existing UI, and documenting guidelines for design handoffs.

Quick Start

Review the design guide, then apply the tokens, typography and layout rules when building or updating UI components.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I enforce a cohesive UI design system across multiple frontend components?▼

You can enforce a cohesive UI design system by applying standardized design tokens, typography rules, and composition patterns. This approach ensures consistency across frontend layouts and scalable component creation.

What is the best way to document design tokens and typography guidelines for a frontend project?▼

The best way to document design tokens and typography guidelines is by using a structured Markdown body with YAML frontmatter. This format standardizes design principles and communicates them clearly for design handoffs.

Can I use this approach to audit an existing UI and align it with new design guidelines?▼

Yes, you can audit an existing UI by validating it against established design principles and composition patterns. This process aligns frontend features with the documented design language to resolve visual inconsistencies.

Does this design guide workflow require any external UI component dependencies to get started?▼

No, this design guide workflow requires no external dependencies to get started. It operates independently by defining design tokens, UI component structures, and layout rules directly within its own structural format.

When do I need to define design tokens and composition patterns for frontend development?▼

You need to define design tokens and composition patterns when creating new UI components or modifying existing ones. This standardization process prevents visual fragmentation and maintains a scalable frontend design language.