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

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill mercury-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

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.