# Design From App

Rebuild the look of an app the user likes as a native SwiftUI design kit, by measuring...

- 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-from-app -g -a claude-code -y`
Codex: `npx skills add daveebbelaar/bama --skill design-from-app -g -a codex -y`
Cursor: `npx skills add daveebbelaar/bama --skill design-from-app -g -a cursor -y`
Gemini CLI: `npx skills add daveebbelaar/bama --skill design-from-app -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add daveebbelaar/bama`

## Description

Rebuild the look of an app the user likes as a native SwiftUI design kit, by measuring its screenshots (sizes, spacing, type, colors, icons), building its parts, and comparing pixel by pixel until they match. Use when the user names an app whose look they want, shares screenshots of one, or says "make it look like X".

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

# Design from app

Look at an app, measure it, and rebuild its design system in SwiftUI. The
result is a design kit (`design-kit` skill) with the reference app's
numbers, and one reference screen that matches the screenshot.

Guessing gets close. Measuring gets it right. Two scripts do the
measuring, next to this skill:

- `scripts/measure.swift`: sizes, positions, text heights, and colors from
  a screenshot.
- `scripts/compare.swift`: a side-by-side, a diff, and the share of pixels
  that differ.

Run them with `swift "${CLAUDE_SKILL_DIR}/scripts/measure.swift" ...`.
All coordinates are points (pixels / 2 for a Retina capture).

## 1. Get the screenshots

Ask for screenshots, or take them with the `clone` skill. You need:

- The window only, at 2x, no desktop. Save them in `design/reference/`.
- One screen with the most parts on it (a sidebar, a list, a toolbar),
  plus close-ups of menus, dialogs, and dark mode if they matter.
- The window size: `measure.swift info shot.png`.

Check: `info` prints the window size in points, and every screenshot uses
the same scale.

## 2. List the parts

Look at each screenshot and name every distinct part: window chrome,
sidebar row, section header, primary action, list row, checkbox, date
chip, icon button, divider. Start `design/KIT.md` from the `design-kit`
skill's kit-spec.md with one section per part.

Check: every visible element on the main screenshot belongs to a part.

## 3. Measure

Fill `design/KIT.md` with numbers, not estimates. The recipes and the
traps are in [measuring.md](measuring.md). In short:

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