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

craft-ui-skills

Enforce Craft's UI design constraints for light mode interfaces using Inter font and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building user interfaces that precisely match the aesthetic and functional design principles of Craft, ensuring consistency and adherence to best practices.

Core Features & Use Cases

  • Design System Adherence: Enforces Craft's specific color palettes, typography, spacing, and border-radius rules.
  • Light Mode UI Development: Guides the creation of interfaces with a clean, light aesthetic.
  • Font and Grid Consistency: Ensures the use of the 'Inter' font and a 4px grid system for pixel-perfect layouts.
  • Use Case: When an AI needs to design a new feature for a project management tool that should feel like an extension of Craft's existing UI, these guidelines will be applied.

Quick Start

Apply the craft-ui-skills to ensure the new UI uses the Inter font and a 4px grid.

Frequently Asked Questions about craft-ui-skills

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

FAQPage Schema
How do I build a UI that matches the Craft design system?▼

To build a Craft-inspired UI, apply design system constraints enforcing the Inter font family, a strict 4px grid for spacing, and specific light mode color palettes to ensure pixel-perfect visual consistency.

What is a 4px grid system and how does it work for UI layout?▼

A 4px grid system structures UI layout by constraining all spacing and element sizing to multiples of four pixels, ensuring consistent alignment and predictable visual rhythm across the interface.

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

No, this Craft UI design system is specifically configured for light mode aesthetics, applying clean visual constraints and color palettes tailored for bright interface environments rather than dark mode.

How do I ensure my AI-generated interface uses the Inter font consistently?▼

You can ensure AI-driven interface development uses the Inter font consistently by applying design system constraints that enforce strict typography rules, matching the Craft application's visual branding.

When do I need a design system constraint for UI development?▼

You need a design system constraint for UI development when a project requires consistent visual branding, strict spacing rules, and adherence to specific typography like the Inter font family to mirror an existing application.

Related Skills

Explore More Design & Creative Skills→
alpoxdevalpoxdev
3

design-md-maker

Generate and update DESIGN.md files with design tokens and light/dark mode variants.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
ihlamuryihlamury
73

arc-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

plaid-ui-skills

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

Community
Intermediate