ochotzas

Graphite — Design skill for Claude Code

Design community

Graphite — a monotone, Apple-simple design system packaged as an agent skill.

How to install Graphite

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ochotzas/graphite and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Graphite does

Graphite — a monotone, Apple-simple design system packaged as an agent skill. By Olger Chotza (ochotzas.com)

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Od Contribute — Open a first-contribution PR (or bug issue) on nexu-io/open-design — works for non-coders too 91.8k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★

README

Graphite

A monotone, calm, Apple-simple design system, packaged as an agent skill. By Olger Chotza — [ochotzas.com](https://ochotzas.com)

One cool graphite hue. Light islands on a soft grey table, dark ink for everything that matters, Figtree set big and tight, and one spring for all motion. There is no accent color: **ink is the accent.**

Coding agents load `SKILL.md` automatically for any UI work, follow its rules and tokens, and run its checklist before they call the work done. It covers web, Tailwind, React, React Native/Expo, SwiftUI, emails and slides.

Install

Claude Code (plugin)

Inside Claude Code:

/plugin install graphite --marketplace ochotzas/graphite

On versions before 2.1.275, run `/plugin marketplace add ochotzas/graphite` first, then `/plugin install graphite@ochotzas`. Updates arrive through `/plugin`.

Claude Code (plain skill)

git clone https://github.com/ochotzas/graphite ~/.claude/skills/graphite

The skill is picked up on the next session. To update: `git -C ~/.claude/skills/graphite pull`.

To make it mandatory in a project, add this to the project's `CLAUDE.md`:

For all UI work, use the graphite skill and run its checklist before finishing.

Other agents

`SKILL.md` follows the open [Agent Skills](https://agentskills.io) format. Clone the repo into your agent's skills folder as `graphite`, or, if your agent has no skill support, add this to the project's `AGENTS.md` (or rules file):

For all UI work, read /SKILL.md and follow it, including its checklist.

Just the tokens

Install from GitHub, pinned to a release:

npm install github:ochotzas/graphite#v1.0.0

Then `@import "@ochotzas/graphite/tokens.css";` in CSS, or `import { theme } from "@ochotzas/graphite/tokens";` in TS. Or copy `tokens/tokens.css` / `tokens/tokens.ts` into your project. `stacks.md` shows the setup for each stack.