Look at an app, measure it, and rebuild its design system in WinUI 3. 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.ps1: sizes, positions, text heights, and colors from a screenshot.scripts/compare.ps1: a side-by-side, a diff, and the share of pixels that differ.
Run them with & "${CLAUDE_SKILL_DIR}/scripts/measure.ps1" .... They run
in Windows PowerShell 5.1 and in pwsh 7. All coordinates are epx: pixels
divided by the display scale. -Scale sets it (1.25 at 125%). A BAWA
snapshot writes its scale into <page>-<mode>-layout.json, and both
scripts read it from there when you leave -Scale out.
1. Get the screenshots
Ask for screenshots, or take them with the clone skill. You need:
- The window only, no desktop, taken on this PC so it has the same
display scale as your snapshots. Snipping Tool (Win+Shift+S) in Window
mode captures one window. Save them as PNG in
design/reference/. - One screen with the most parts on it (a sidebar, a list, a command bar), plus close-ups of menus, dialogs, and dark mode if they matter.
- The window size:
measure.ps1 info shot.png -Scale <display scale>.
Check: info prints the window size in epx, and every screenshot uses
the same scale.
2. List the parts
Look at each screenshot and name every distinct part: title bar, 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 Windows apps use the system font: Segoe UI Variable on Windows 11, Segoe UI before it. Web and Electron apps often bring their own. Start with the system font. 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 Segoe Fluent Icons first; draw the
ones that do not match as
PathIconshapes (design-kitparts.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
title bar, 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 (tools/snap.ps1 -Pages <page>) has the
same size in pixels as the reference.
6. Compare until it matches
& "${CLAUDE_SKILL_DIR}/scripts/compare.ps1" design/reference/main.png "$env:TEMP\<App>-shots\<page>-light.png" "$env:TEMP\<App>-compare"
& "${CLAUDE_SKILL_DIR}/scripts/compare.ps1" ... "$env:TEMP\<App>-compare-sidebar" 0 0 320 300
Open 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 epx 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.