lattice-ui-skills

Enforce Lattice UI design constraints for light-mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#typography #design system #ui design #spacing #lattice #light mode

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: lattice-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/lattice
Command: npx skills add https://github.com/ihlamury/design-skills --skill lattice-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that are visually consistent with the Lattice design system, ensuring brand alignment and a polished user experience.

Core Features & Use Cases

Design System Adherence: Enforces Lattice's specific color palette, typography (Inter font), and spacing (4px grid).
Accessibility Compliance: Ensures text contrast ratios meet WCAG AA standards.
Use Case: When developing a new feature for a Lattice product, use this Skill to guide the AI in creating UI components that perfectly match the existing design language, from button styles to form layouts.

Quick Start

Apply the lattice-ui-skills to ensure the new dashboard uses the Lattice design system's light mode, Inter font, and 4px grid.

Frequently Asked Questions about lattice-ui-skills

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

FAQPage Schema

How do I enforce a 4px grid and Inter font for light mode UI design?▼

The Lattice design system specifies semantic color tokens, heading and body typography styles using the Inter font, and spacing rules on a 4px scale to build light-mode interfaces with consistent visual output.

Does this UI design system include accessibility compliance for text contrast?▼

Yes, this UI design system includes accessibility compliance by ensuring text contrast ratios meet WCAG AA standards. This guarantees readable light-mode interfaces while maintaining Lattice brand alignment.

How do I apply Lattice design system constraints to generate consistent UI components?▼

Apply Lattice design system constraints to generate consistent UI components by guiding the AI with specified border-radius applications, layout dimensions, and semantic color tokens for polished user experiences.

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

No, you cannot use this design system Skill for dark mode interfaces. It specifically enforces constraints for building light-mode interfaces using Lattice's semantic color tokens and 4px grid spacing.

What are the limitations of using a 4px grid spacing scale for layout dimensions?▼

The limitations of using a 4px grid spacing scale involve strict adherence requirements for layout dimensions and border-radius application. You must follow these opinionated constraints to maintain visual consistency.