design-guide

Name: design-guide
Availability: InStock
Author: logikwise

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

Ready to run

npx skills add https://github.com/logikwise/GR8 --skill design-guide-logikwise

💬 Prompt for ChatGPT / Claude Chat▼

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.