사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/daveebbelaar/bama --skill design-from-app시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
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:
| To find | Command |
|---|---|
| Sidebar width, panes | hline shot.png <y in an empty area> |
| Row positions and pitch | rows shot.png <x0> <x1> [y0 y1] |
| Left edges, gaps | cols shot.png <y0> <y1> [x0 x1] |
| Selection pill, dividers | vline and hline through it, --tolerance 4 |
| Text and icon colors | ink shot.png x y w h |
| Surface colors | palette shot.png x y w h |
| A close look | crop shot.png x y w h out.png 4 |
Check: every token and every part size in design/KIT.md has a number from a command.
4. Find the font and the icons
- Most apps on the Mac use the system font, even web apps. Start there.
When the letters differ (a, g, t, digits), name the font and pick it or an open alternative with a license that allows bundling.
- Text sizes come from step 6: build, measure the same word in both
images, scale.
- Icons: note the size, stroke weight, corners, and whether selected rows
switch to a filled form. Match with SF Symbols at a light weight first; draw the ones that do not match as shapes (design-kit parts.md, Icons).
Check: design/KIT.md names the font, the icon source, and the icon size and weight.
5. Build the kit and one screen
Call the Skill tool with design-kit and build the tokens, the parts, the window chrome, and the gallery from design/KIT.md. Then build the main screenshot's screen from kit parts only, with the same data and the same window size.
Check: a snapshot of that screen has the same size in pixels as the reference.
6. Compare until it matches
swift "${CLAUDE_SKILL_DIR}/scripts/compare.swift" design/reference/main.png /tmp/<App>-shots/<page>-light.png /tmp/<App>-compare
swift "${CLAUDE_SKILL_DIR}/scripts/compare.swift" ... /tmp/<App>-compare-sidebar 0 0 220 300Open side-by-side.png and diff.png with the Read tool. Then measure the same rows, edges, and words in both images, and fix the tokens, not the views. Order: window size, text sizes, columns and left edges, row heights, colors, icons.
Check: under 2% of pixels differ on the whole window, and every row and left edge is within 1.5 pt of the reference.
7. Make it yours
Before the app ships to anyone else, replace what belongs to the other company: its name, logo, illustrations, and any font or icon it owns. Keep the structure, the spacing, and the feel. Write the replacements in design/KIT.md.
Done when design/KIT.md has a measured number for every token and part, the kit's gallery shows every part, the reference screen passes step 6, and step 7 lists what was replaced.
