design-guide

Centralize Paperclip UI design tokens, typography, and component patterns.

Updated Mar 19, 2026
One-click install
npx skills add https://github.com/Avishai-Tsabari/agents_manager --skill design-guide-avishai-tsabari
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Avishai-Tsabari/agents_manager/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Avishai-Tsabari/agents_manager --skill design-guide-avishai-tsabari

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Centralizes Paperclip UI design guidelines and patterns to ensure consistent frontend quality across projects, teams, and components.

Core Features & Use Cases

  • Design tokens & typography standardization to ensure cohesive visuals across pages.
  • Component patterns and usage rules for buttons, cards, forms, and layouts to accelerate development.
  • Live showcase with the /design-guide page to document decisions, examples, and best practices for frontend engineers and designers.

Quick Start

Open the design-guide page in the Paperclip UI to review components, tokens, and patterns and begin implementing consistent design.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I standardize UI design tokens and typography across frontend projects?

Standardize UI design tokens and typography by centralizing guidelines in a living index that documents visual rules, ensuring cohesive frontend implementation across teams. This approach maintains consistent component styling and page alignment throughout development.

What are the best practices for documenting component patterns and usage rules?

Document component patterns through a live showcase page that details usage rules for buttons, cards, forms, and layouts to accelerate development. This living index records decisions and examples for frontend engineers and designers.

How do I align new frontend components with an existing design language?

Align new frontend components with your design language by referencing centralized guidelines that document tokens, typography, and component patterns. This ensures consistent visual quality and cohesive page alignment across all projects.

Can I use a design guide showcase to standardize UI patterns for both designers and engineers?

Yes, a design guide showcase standardizes UI patterns for both designers and engineers by providing a centralized living index. It documents design tokens, typography rules, and component usage to ensure consistent frontend quality across teams.

When do I need a centralized design guide for frontend development?

You need a centralized design guide when managing multiple frontend projects that require consistent visual quality, standardized typography, and unified component patterns. It ensures teams align with the same design language during development.

Does a living design blueprint help maintain UI consistency across different teams?

A living design blueprint maintains UI consistency across teams by centralizing design tokens, typography, and component guidelines into an accessible index. This ensures all developers and designers reference the same standards.