wip-frames · diff
v0.1.0 to v0.2.0
29 added, 29 removed. Audit A to A.
---
name: wip-frames
license: MIT
metadata:
- version: "0.1.0"
+ version: "0.2.0"
status: draft
description: >-
- Use this when sharing WIP screens for approval. Off-white dotted board.
- Mobile status info is the official Figma iOS kit Status Bar at 50% opacity,
- vertically centered on a mat-colored pill. Titles use SF if available,
- otherwise Arial. Desktop uses Apple overlay scrollbars.
+ Use when sharing in-progress UI, product, or social screens for approval.
+ Composes 1 desktop or 1–3 mobiles onto a dotted mat. Not for marketing
+ heroes, App Store shots, final production, or raw Figma dumps.
---
Full method: [METHODOLOGY.md](../../shared/METHODOLOGY.md).
+ Chat: [RESPONSE.md](../../shared/RESPONSE.md).
+ Examples: [EXAMPLES.md](../../shared/EXAMPLES.md).
Compositor: [compose.py](../../scripts/compose.py).
# WIP frames
- The board is the share format. Raw screenshots, Figma page dumps, and browser chrome are not.
-
- Do not bake in a product, channel, or person.
+ **These are requirements, not preferences.** A raw screenshot, Figma dump, or browser chrome is not the share.
- ## Board
+ ## Operating order
- - Background `#F5F5F5`, 1px dots `#D2D2D2` on a 24px grid
- - **80px** pad (floor 64). **32px** gap (floor 24)
- - No ribbons, watermarks, emoji, or fake device bezels
- - Punch Figma phone chrome. Desktop 16px radius. Mobile ~47pt corners
- - PNG, long edge ≤ 2400px
+ 1. Collect the real screens only. Crop browser chrome and Figma page junk first.
+ 2. Classify: width ≤ 500 or width/height < 0.72 is mobile. Do not mix desktop and mobile.
+ 3. One desktop per board. Mobiles: 1–3 in a row, same scale. A fourth screen is a second board.
+ 4. Titles: page names, left-aligned. `--titles "Today,Pipeline,Deal"` or derive from the filename. Never Inter.
+ 5. Load theme if the project has one (`wip-frames.theme.json` or `.wip-frames.json`). Otherwise use defaults. Do not invent chrome outside the token list.
+ 6. Run `scripts/compose.py`. Attach the PNG. One line of titles. Stop.
- ## Titles
+ ```
+ python3 scripts/compose.py --out /tmp/wip.png --titles "Today,Pipeline,Deal detail" -- a.png b.png c.png
+ ```
- Left-aligned above each frame. **20px**, `#6B6B6B`. SF Pro / SF NS, else Arial, else Liberation Sans. Never Inter.
+ ## Locked
- ## Mobile status bar
+ Official iOS 18 kit status bar only. Kit icons at theme opacity (default 50%), centered on the pill. Punch Figma phone chrome. Apple overlay scrollbars. PNG, long edge ≤ 2400. No ribbons, watermarks, emoji, or fake bezels.
- Official Apple iOS 18 `Status Bar - iPhone` only. Cached at `scripts/assets/ios18-statusbar-alpha.png`.
+ ## Theme
- - Kit icons and time at **50% opacity**
- - Pill matches the mat (`#F5F5F5`)
- - Vertically center kit content on the pill
- - Do not redraw time, cellular, wifi, or battery
+ A project may tint the mat. Allowed keys: `mat`, `dot`, `title`, `title_size`, `pad`, `gap`, `status_opacity`, `pill`, `desktop_radius`.
- ## Desktop scrollbars
+ Defaults: mat `#F5F5F5`, dots `#D2D2D2`, titles 20px `#6B6B6B`, pad 80, gap 32, status 0.5, pill `mat`.
- Paint out OS gutters. Apple overlay thumb: 6px capsule, ~35% black, 3px inset, no track.
+ Load order: `--theme path` → `wip-frames.theme.json` → `.wip-frames.json` → defaults. CLI flags win last.
- ## Layout
+ Unknown keys are ignored. Do not add fonts, bezels, or custom status icons via theme.
- One desktop per board. Mobiles: 1–3 in a row, scaled together.
+ ## Never
- ```
- python3 scripts/compose.py --out /tmp/wip.png --titles "Today,Pipeline,Deal detail" -- a.png b.png c.png
- ```
+ - Inter or a display face on titles
+ - Custom status icons, or icons at full opacity
+ - Mixing desktop and mobile
+ - Inventing a look that is not in the theme file