phia-design-system
CommunityDefine PhiaUI's visual language and tokens.
Authorcharlenopires
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Design teams need a single source of truth for visual language to maintain consistency across PhiaUI's 829 components and multiple themes, reducing drift and onboarding friction.
Core Features & Use Cases
- Typography tokens, color tokens, spacing scales, radii, shadows, icons, layout, animation, and accessibility guidelines form a cohesive system.
- Accessibility and dark mode baked-in, with responsive tokens for dashboards, docs, and marketing pages.
- Use cases include branding a SaaS admin panel, marketing landing pages, and developer UI components that ship as a design system.
Quick Start
Review the design system assets and apply the tokens to a new PhiaUI component following the guidelines described in this skill.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: phia-design-system Download link: https://github.com/charlenopires/PhiaUI/archive/main.zip#phia-design-system Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.