skills.rest
Jang-zn
Jang-znCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

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
One-click install
npx skills add https://github.com/Jang-zn/paperclip-kr --skill design-guide-jang-zn
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
IwatsukaYuraIwatsukaYura

frontend-design

Define and enforce a cohesive visual system for frontend interfaces.

Community
Advanced
lucasreydmanlucasreydman

frontend-design

Design and implement accessible, responsive frontend interfaces with cohesive color systems.

Community
Advanced
udecodeudecode
434

1-app-design-document

Codify React UI design systems with pattern catalogs and typography tokens.

Official
Intermediate
ghalacticghalactic

google-developer-style-guide-structure

Enforce Google developer documentation style guide rules on technical writing.

Official
Advanced