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

mercury-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that are visually consistent with Mercury's distinct aesthetic, ensuring brand alignment and a cohesive user experience.

Core Features & Use Cases

  • Aesthetic Consistency: Enforces Mercury's light mode, Inter font, and 4px grid system.
  • Design System Adherence: Guides AI agents in creating interfaces that match Mercury's specific design language.
  • Use Case: When developing a new feature for Mercury, use this Skill to ensure all UI elements, from buttons to typography, adhere to the established design guidelines.

Quick Start

Apply Mercury's UI design system to build a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about mercury-ui-skills

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

FAQPage Schema
How do I enforce a light mode UI design system using Inter font and a 4px grid?▼

To enforce a light mode UI design system using Inter font and a 4px grid, apply this Skill to guide AI agents in adhering to specific brand aesthetics, visual consistency, and defined color palettes.

What is the best way to align AI-generated UI components with Mercury's design language?▼

The best way to align AI-generated UI components with Mercury's design language is to apply this Skill, which provides opinionated constraints for brand alignment and cohesive user experiences.

How does a 4px grid system improve visual consistency in UI development?▼

A 4px grid system improves visual consistency by providing strict spatial constraints, ensuring that typography and UI elements maintain a cohesive structure and adhere to established brand guidelines.

Can I use this design system Skill for interfaces requiring dark mode?▼

No, you cannot use this Skill for dark mode interfaces. It specifically enforces Mercury's light mode aesthetic and applies defined color palettes tailored for light-mode digital product design.

When do I need to apply a design system constraint for AI UI generation?▼

You need to apply a design system constraint when developing new features that require strict adherence to brand guidelines, ensuring all UI elements from buttons to typography match the established visual language.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
ihlamuryihlamury
73

raycast-ui-skills

Enforce Raycast's light-mode UI design system with Inter font and a 4px grid.

Community
Intermediate
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

luxury

Provide design-system guidelines for implementing a dark aesthetic in Roblox UI development.

Community
Intermediate