design-from-app

1# Design from app
2 
3Look at an app, measure it, and rebuild its design system in SwiftUI. The
4result is a design kit (`design-kit` skill) with the reference app's
5numbers, and one reference screen that matches the screenshot.
6 
7Guessing gets close. Measuring gets it right. Two scripts do the
8measuring, next to this skill:
9 
10- `scripts/measure.swift`: sizes, positions, text heights, and colors from
11  a screenshot.
12- `scripts/compare.swift`: a side-by-side, a diff, and the share of pixels
13  that differ.
14 
15Run them with `swift "${CLAUDE_SKILL_DIR}/scripts/measure.swift" ...`.
16All coordinates are points (pixels / 2 for a Retina capture).
17 
18## 1. Get the screenshots
19 
20Ask for screenshots, or take them with the `clone` skill. You need:
21 
22- The window only, at 2x, no desktop. Save them in `design/reference/`.
23- One screen with the most parts on it (a sidebar, a list, a toolbar),
24  plus close-ups of menus, dialogs, and dark mode if they matter.
25- The window size: `measure.swift info shot.png`.
26 
27Check: `info` prints the window size in points, and every screenshot uses
28the same scale.
29 
30## 2. List the parts
31 
32Look at each screenshot and name every distinct part: window chrome,
33sidebar row, section header, primary action, list row, checkbox, date
34chip, icon button, divider. Start `design/KIT.md` from the `design-kit`
35skill's kit-spec.md with one section per part.
36 
37Check: every visible element on the main screenshot belongs to a part.
38 
39## 3. Measure
40…