# Design Kit

Custom design system for a macOS SwiftUI app with its own parts, not Apple's, covering...

- Repository: https://github.com/daveebbelaar/bama (1284 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add daveebbelaar/bama --skill design-kit -g -a claude-code -y`
Codex: `npx skills add daveebbelaar/bama --skill design-kit -g -a codex -y`
Cursor: `npx skills add daveebbelaar/bama --skill design-kit -g -a cursor -y`
Gemini CLI: `npx skills add daveebbelaar/bama --skill design-kit -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add daveebbelaar/bama`

## Description

Custom design system for a macOS SwiftUI app with its own parts, not Apple's, covering three token layers, type, an icon set, every part in every state, custom window chrome, a parts gallery, and checks. Use when the user wants the app to have its own look and feel, a brand, or custom buttons, rows, and sidebars, when design-from-app has measured a reference app, or when the user asks for a design system or component library.

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

# Design kit

A native look comes from Apple's parts. A custom look comes from your own
parts: your sidebar row, your button, your checkbox, your icons. SwiftUI
draws all of them. A kit is those parts, the numbers behind them, and one
page that shows every part in every state.

Most apps keep Apple's parts and only pick an accent color (`design-system`
skill). Build a kit when the parts themselves must change. To copy the look of an existing app,
call the Skill tool with `design-from-app` first: it measures the app and
then comes back here.

Everything lives in `Sources/<App>/DesignKit/`. Code for every step:
[parts.md](parts.md).

## 1. Write the spec

Write `design/KIT.md` from [kit-spec.md](kit-spec.md): three words for the
feel, the tokens, the type scale, the icon rules, and one section per part
with its sizes and states. Agents build from this page and review against it.

Check: every part the app's screens need has a section with its sizes and
its states.

## 2. Tokens in three layers

`DesignKit/Tokens.swift`:

1. **Palette**: raw colors, named by hue and step (`gray50`, `blue600`).
   Only this file reads it.
2. **Meaning**: `Ink.text`, `Ink.accent`, `Ink.selection`, `Ink.divider`,
   with a light and a dark value each. Parts read only this layer.
3. **Scales**: `KitType` (type roles), `Metric` (sizes), `Motion`
   (named intents like `hover` and `check`).

A rebrand changes the palette. A dark mode fix changes the meaning layer.
Neither touches a part.

Check: `grep -rn 'Palette\.' Sources/ | grep -v Tokens.swift` finds nothing.

## 3. Type

Name styles by role (`title`, `body`, `label`, `section`, `meta`), never
by size. Use the system font unless the brand needs its own; a bundled
font goes in `Resources/Fonts/` with `ATSApplicationFontsPath` in
`Info.plist.in`. Half-point sizes are fine when a reference needs them.

Check: views set fonts only through `.kitType(...)`.

## 4. Icons

The rest: https://github.com/daveebbelaar/bama/blob/HEAD/skills/design/design-kit/SKILL.md