design-guide

Codify frontend UI design standards for tokens, typography, and components.

Updated Apr 12, 2026
One-click install
npx skills add https://github.com/elijahbowie/ArchonOS --skill design-guide-elijahbowie
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/elijahbowie/ArchonOS/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/elijahbowie/ArchonOS --skill design-guide-elijahbowie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paperclip UI design guide addresses the challenge of inconsistent frontend UI across a product, providing a centralized source of truth for design tokens, typography, and component patterns.

Core Features & Use Cases

  • Design tokens and color system guidelines to ensure visual harmony across pages.
  • Typography rules, spacing, and component patterns for scalable UI.
  • A showcase page (/design-guide) illustrating components and usage for quick reference.

Quick Start

Follow this guide to align new UI work with the Paperclip design system.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I standardize frontend UI design with a living design guide?

Standardize frontend UI design by codifying a comprehensive design guide that defines requirements for design tokens, typography rules, status and priority systems, and composition patterns. This provides a centralized source of truth to ensure visual harmony across pages.

What are design tokens and how do they ensure visual harmony in a UI design system?

Design tokens are centralized variables that codify visual style choices like color and spacing within a UI design system. Applying these tokens ensures visual harmony and consistency across different pages and components throughout the frontend.

Can I use this design guide to showcase UI components and patterns for quick reference?

Yes, you can use this design guide to showcase UI components and patterns. It defines requirements for a live /design-guide page that illustrates components, typography rules, and composition patterns for quick developer reference.

Do I need frontend-design and web-design-guidelines skills to apply these component patterns?

Yes, you need frontend-design and web-design-guidelines skills. The guide is intended to be used alongside these complementary skills to effectively create, modify, or showcase tokens, typography, and component patterns across the frontend.

What's the best way to align new UI work with an existing frontend design system?

The best way to align new UI work is to follow a standardized design guide that codifies typography rules, spacing, status systems, and composition patterns. This ensures scalable UI and maintains consistency with existing design tokens.

When do I need a centralized source of truth for typography rules and design tokens?

You need a centralized source of truth for typography rules and design tokens when facing the challenge of inconsistent frontend UI across a product. It provides scalable UI component patterns and ensures visual harmony across all pages.