skills.rest
logikwise
logikwiseCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

Standardize frontend UI design using design tokens, typography, and component patterns.

Updated Apr 3, 2026
Search Tags:#typography#frontend#tokens#design-system#component-patterns#design-guide#ui-guidelines
One-click install
npx skills add https://github.com/logikwise/GR8 --skill design-guide-logikwise
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/logikwise/GR8/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/logikwise/GR8 --skill design-guide-logikwise

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes frontend UI design across Paperclip by providing a living design system with tokens, typography rules, and component patterns that ensure visual consistency and scalable development.

Core Features & Use Cases

  • Design tokens, typography guidelines, and component composition rules to drive consistent UI across pages, components, and showcases.
  • Clear patterns for creating new components, updating pages, and maintaining a cohesive design language across the frontend.
  • Use Case: When designing a new frontend page or adding a component, consult this guide to ensure alignment with tokens and patterns.

Quick Start

Consult this guide when creating or updating UI components to ensure consistency with tokens, typography, and patterns.

Frequently Asked Questions about design-guide

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

FAQPage Schema
How do I enforce design tokens and typography rules for consistent frontend UI?▼

Use this design guide to standardize frontend UI by enforcing a unified design language through design tokens, typography rules, and component patterns, ensuring visual consistency and scalable development across new components and updated pages.

What are design tokens and when do I need them for a frontend design system?▼

Design tokens are standardized variables encoding visual decisions like typography and spacing, needed when building frontend pages or components to maintain visual consistency and scalable development across the design system.

How do I standardize typography and component variants when creating new frontend components?▼

Standardize typography and component variants by consulting this guide's typography guidelines and component composition rules, ensuring every new component aligns with existing design tokens and patterns for consistent rendering.

Can I use this design guide for updating existing frontend pages and refining design tokens?▼

Yes, this design guide applies directly to updating existing frontend pages and refining design tokens, providing component patterns and typography guidelines to maintain a cohesive design language across the frontend workflow.

What is the best way to maintain visual consistency across frontend components and showcases?▼

The best way to maintain visual consistency is to enforce a living design system with design tokens, typography guidelines, and component composition rules, driving scalable and unified UI development across all frontend components and showcases.

Related Skills

Explore More Design & Creative Skills→
BigdropsBigdrops
1

design-system-starter

Coordinate design tokens, atomic components, theming, and accessibility documentation.

Community
Advanced
Avishai-TsabariAvishai-Tsabari

design-guide

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

Community
Advanced
HemanthTennetiHemanthTenneti

normalize

Normalize frontend UI components to match design system standards and tokens.

Community
Intermediate
Fire-ants-never-dieFire-ants-never-die

orchestrator-designer

Generate design tokens and component specifications for the Claude Orchestrator UI.

Official
Intermediate