skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

amplitude-ui-skills

Applies Ampitude's UI design system to web interfaces with specified palettes and layouts.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#color palette#ui design#spacing#amplitude#light mode
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill amplitude-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: amplitude-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/amplitude
Command: npx skills add https://github.com/ihlamury/design-skills --skill amplitude-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Amplitude's design system, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

  • UI Design System Adherence: Enforces Amplitude's specific aesthetic, including color palettes, typography, spacing, and border styles.
  • Light Mode Focus: Optimized for creating interfaces in a light mode theme.
  • Component Styling: Provides guidance on styling common UI elements like buttons.
  • Use Case: When developing a new feature for a product that needs to match the existing Amplitude look and feel, use this Skill to ensure consistency in colors, fonts, and spacing.

Quick Start

Apply the Amplitude UI design system to the new dashboard interface.

Frequently Asked Questions about amplitude-ui-skills

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

FAQPage Schema
How do I apply Amplitude's UI design system to a light mode interface?▼

The Amplitude UI design system specifies text styles with precise font sizes and weights using the Inter font, structured along a 4px spacing grid for light mode interfaces.

What spacing and typography rules do I follow for an Amplitude-style design system?▼

The Amplitude UI design system specifies text styles with precise font sizes and weights using the Inter font, structured along a 4px spacing grid for light mode interfaces.

Can I use semantic color tokens for light mode UI design?▼

The system provides layout constraints tailored for a 1920px viewport, along with detailed border-radius application guidelines and spacing scales to structure your interface correctly.

How do I handle interactive states and layout constraints for a 1920px viewport?▼

The system provides layout constraints tailored for a 1920px viewport, along with detailed border-radius application guidelines and spacing scales to structure your interface correctly.

Does the Amplitude UI design system include guidelines for hover, focus, and disabled elements?▼

Yes, it includes interactive state definitions for focus, hover, and disabled elements, along with specific animation and performance guidelines to ensure high-quality user experiences.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

weights-biases-ui-skills

Enforce Weights Biases UI design with light mode, Inter font, and 4px grid.

Community
Intermediate
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
Anuj23105Anuj23105
1

dark-mode-implementation

Implement dark mode with theme switching, persistence, and system preference detection in React and Tailwind.

Community
Advanced
ihlamuryihlamury
73

shopify-ui-skills

Enforce Shopify's UI design system with light mode, Inter font, and 4px grid.

Community
Intermediate