# GPUI Kit Design Guides

Sets the design rules for GPUI desktop screens, layout, colour and interaction states.

- Repository: https://github.com/longbridge/gpui-kit (18859 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -g -a claude-code -y`
Codex: `npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -g -a codex -y`
Cursor: `npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -g -a cursor -y`
Gemini CLI: `npx skills add longbridge/gpui-kit --skill gpui-kit-design-guides -g -a gemini-cli -y`

## Description

The normative Design Guides for GPUI Kit desktop applications. Read in full before designing or changing any screen, layout, spacing, visual hierarchy, color, density, component choice, interaction state, overlay, motion, data-heavy view, or interface copy in a GPUI Kit (gpui-kit / gpui-component) application, and before reviewing UI work for design quality. Also use when asked what the design rules are, or whether a UI decision follows them.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# GPUI Kit Design Guides

The guide is [references/design-guides.md](references/design-guides.md). It is
a requirement, not inspiration. Read the guide file itself before doing UI
work. Do not answer from this page, from an existing screen in the codebase, or
from training data.

If the file is missing, fetch `https://gpui-kit.com/docs/design-guides.md`.
The guide is a verbatim copy of that page, so its link to `./coding-guides.md`
means the Coding Guides in the `gpui-kit` skill (or `https://gpui-kit.com/docs/coding-guides.md`).

## How to read it

Read the whole guide for a new screen or a redesign. For a narrow change, read
"Design thesis" and "Start from the task" first, then the section for the
change. Sections, in order (`grep -n '^## ' references/design-guides.md`):

The rest: https://github.com/longbridge/gpui-kit/blob/HEAD/skills/gpui-kit-design-guides/SKILL.md