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

raycast-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the Raycast application's design system.

Core Features & Use Cases

  • Light Mode Design: Adheres to Raycast's light mode aesthetic.
  • Typography: Enforces the use of the Inter font family with specific sizing and weight rules.
  • Spacing & Grid: Utilizes a 4px grid system for consistent spacing and layout.
  • Color Palette: Defines a limited set of semantic color tokens for UI elements.
  • Use Case: When designing a new feature for a productivity app and aiming for a clean, modern, and familiar user experience similar to Raycast, reference these guidelines.

Quick Start

Apply the raycast-ui-skills to design a new settings panel using Inter font and a 4px grid.

Frequently Asked Questions about raycast-ui-skills

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

FAQPage Schema
How do I build a UI design system that matches Raycast's light mode aesthetic?▼

To build a Raycast-style interface, apply the Inter font family, a 4px grid for spacing, and predefined semantic color tokens to ensure visual consistency and pixel-perfect layout replication.

What typography and spacing rules are needed for Raycast-style UI design?▼

Raycast-style UI design requires the Inter font family with specific sizing and weight rules, combined with a strict 4px grid system for consistent spacing and layout alignment.

Can I use semantic color tokens to replicate Raycast's interface design?▼

Yes, you can use a limited set of predefined semantic color tokens to define UI elements, ensuring your interface maintains the exact look and interaction states of Raycast.

When do I need a 4px grid system for productivity app UI design?▼

A 4px grid system is needed when designing productivity app features to achieve a clean, modern, and familiar user experience that requires pixel-perfect spacing and layout consistency.

Does this UI design system enforce specific border-radius and interaction states?▼

Yes, the design system specifies exact border-radius values and interaction states alongside typography scales and color tokens to guarantee a pixel-perfect replication of the Raycast aesthetic.

How do I design a settings panel that looks consistent with Raycast?▼

Design a settings panel using the Inter font family and a 4px grid layout, applying the provided semantic color tokens and interaction states to match the Raycast aesthetic perfectly.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
JoniSirvioJoniSirvio

polish

Polish frontend UI designs for pixel-perfect alignment and consistent typography.

Community
Advanced
DanielV-94DanielV-94

awwwards-ui-skills

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

Community
Intermediate
ihlamuryihlamury
73

apple-ui-skills

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

Community
Intermediate