design-guide

Document Paperclip's UI design system for consistent frontend development.

Updated Apr 14, 2026

Search Tags:#typography #frontend #ui-design #design-system #design-tokens #component-patterns #design-guide

Ready to run

npx skills add https://github.com/lucasadcapital-beep/ancora-auto --skill design-guide-lucasadcapital-beep

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/lucasadcapital-beep/ancora-auto/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/lucasadcapital-beep/ancora-auto --skill design-guide-lucasadcapital-beep

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip's UI design system guide ensures a cohesive, scalable frontend by providing a centralized reference for components, tokens, typography, and conventions. It helps teams build consistent interfaces and reduce design drift across features.

Core Features & Use Cases

Design principles, tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page.
Use when creating new UI components, modifying existing ones, styling UI elements, or understanding Paperclip's design language and conventions.
Aligns with frontend-design and web-design-guidelines to maintain visual quality and web best practices.

Quick Start

Review the design guide to align all frontend components with Paperclip's UI design system.

Frequently Asked Questions about design-guide

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

FAQPage Schema

What is a UI design system guide and why do I need it for frontend development?▼

A UI design system guide standardizes design principles, tokens, and typography to ensure consistent frontend development. You need it to reduce visual drift and maintain cohesive interfaces across multiple features and components.

How do I create new UI components that match existing design conventions?▼

To create new UI components that match existing design conventions, reference the centralized design guide for approved composition patterns, status systems, and typography. This ensures your UI elements align with the established design language.

What are design tokens and how do they standardize UI styling?▼

Design tokens are predefined variables that standardize UI styling by maintaining consistent visual properties across components. They centralize design decisions like colors and spacing, ensuring scalable frontend development and reducing design drift.

When should I use component composition patterns from a design guide?▼

Use component composition patterns from a design guide when modifying existing UI elements or building complex interfaces. These patterns provide standardized structural conventions that ensure visual quality and maintain alignment with web design best practices.

Does the Paperclip design guide work with frontend-design and web-design-guidelines?▼

Yes, the Paperclip design guide aligns with frontend-design and web-design-guidelines to maintain visual quality and web best practices. It serves as a centralized reference that complements these tools to ensure cohesive and scalable frontend development.