Design From App
Rebuild the look of an app the user likes as a native SwiftUI design kit, by measuring...
Install
npx skills add daveebbelaar/bama --skill design-from-app -g -a claude-code -y- Repository
- daveebbelaar/bama1.3k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Lightabout 1,042 tokens
- Runs scripts
- No, instructions only
What it does
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".
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. In short:
