产品：「Penny」，给刚工作几年的年轻人用的记账和预算 App：自动识别银行卡消费、按类别做月度预算、提醒快超支的类别。
品类里风格鲜明的产品有很多，先想清楚它们各自靠什么被认出来，再做出你自己的一套。
设计 3 个关键屏：本月概览（还能花多少、各类别预算进度）、一笔消费的详情与分类修改、月度回顾。记忆点放在一个用户动作或一个数字的呈现上。
App 屏幕按 390×844 设计，交付 `index.html` 和把三屏并排的 `screens.html`。
共用要求
# 作品墙共用说明
这批作品会放进开源 Skill「oil-ui」的 README 首图作品墙，展示同一套设计方法能做出风格完全不同、而且能直接上线的产品界面。
## 标准：落地、有风格、一线水准
- **是真实的产品界面，不是概念海报。** 每件作品都是一个具体产品真正会用到的页面或 App 屏幕：有真实的功能、真实的数据和操作，放进 App Store 或产品官网不违和。不做抽象艺术、不做展览、不做中国风。
- **风格鲜明到一眼认得出。** 完成度对标国际一线产品：Linear、Vercel、Duolingo、Nothing、Whoop、Spotify 这类产品各有一套一眼就认得出的视觉语言。你的作品也要有自己的一套：字体、颜色、形状、图标、动效从同一个方向里长出来，贯穿每个细节。不要做成“好看但哪都能用”的通用模板。
- **细节决定高级感。** 间距有节奏、对齐严格、状态完整（默认、悬停、选中、完成）、数字真实不整齐、图标统一。一处粗糙就会拉低整体。
## 必须遵守
1. **先读方法。** 完整读 `~/.codex/skills/oil-ui-pro/SKILL.md`，再按需读它 `references/` 里的文件，至少读 `design-direction.md`、`visual-language.md`，用到动效、配图、特效时读 `motion.md`、`imagery.md`、`ornament.md`。按这套方法做：定调性、选生成引擎、先定骨架、定记忆点、做减法、看实际画面。
2. **只做一个方向，做深。** 本任务不做风格对比页、不等待用户挑选。你自己定一个方向，写进本目录的 `DIRECTION.md`（北极星、调性、生成引擎、骨架、字体、色彩、主视觉、记忆点、放弃什么），然后把它做到最好。
3. **只改自己的目录。** 所有文件放在分配给你的目录里，不动其他目录，不用 git。
4. **能离线打开。** 交付 `index.html`，资源放 `assets/`，用相对路径。不引用 CDN 和外部字体服务；需要字体时用系统字体，或把开源字体文件（例如 Inter、Geist、Nunito 等 OFL 字体）下载放进 `assets/`。
5. **内容像真的。** 界面文案用自然的中文，产品名、数据、人名、时间都写得像真实产品，数字不整齐。界面上不出现“示例”“待核实”“示意图”“概念稿”这类制作说明，这些写进 `NOTES.md`。
6. **图形用代码画或可用工具生成。** 插画、吉祥物、产品渲染图、图标，优先用 SVG、CSS、Canvas 或 WebGL 画；有图片生成工具时也可以生成。不用有版权的图片和别家的品牌标志，不画假的设备外壳、浏览器窗口和 9:41 状态栏。
7. **避开模型默认。** 不做“左边大标题、右边一张图”的首屏，不用紫蓝渐变团、到处一样的圆角卡片、左侧彩色竖条、满屏小字说明。画廊里已经用得很多的配色也避开：酸柠黄、荧光黄绿、米白加灰绿、暖白加信号红、深色加青蓝。
8. **动效要稳。** 有动画时尊重 `prefers-reduced-motion`；截图时画面要处在好看的一帧。
## 检查与截图
用 `../tools/shot.mjs` 截图（用法：`DPR=2 node ../tools/shot.mjs <url> <out.png> <宽> <高>`；加 `FULL=1` 截整页）。先用 `python3 -m http.server <端口> --directory <你的目录>` 起本地服务，端口用 8900–8999 之间的随机数，截完关掉。
- 网页：截 `shots/desktop.png`（1440×900，DPR=2）和 `shots/full.png`（1440 宽整页），再截 `shots/mobile.png`（390×844）。
- 桌面应用：截 `shots/desktop.png`（1440×900，DPR=2），另截一两个关键状态，命名 `shots/state-1.png` 这样排下去。
- App：截 `shots/app.png`（390×844，DPR=3），另截两到三个关键屏或状态，命名 `shots/app-2.png` 这样排下去；再截 `shots/screens.png`，把三屏并排（用 `screens.html`，宽 1440 左右）。
- 模块：在一块干净的展示画布上（1440×900，DPR=2）截 `shots/desktop.png` 展示主状态，另截两三个关键状态，命名 `shots/state-1.png` 这样排下去；画布本身不抢戏。
- 记忆点：截开始、中间、结束三帧，命名 `shots/moment-1.png`、`moment-2.png`、`moment-3.png`，让只看静态图的人也能看懂这一刻发生了什么。
- 实际打开每张截图检查：文字重叠、裁切、太小、对比不够、对不齐，都回去改，直到你自己满意。至少改两轮。
## 多轮打磨
按 SKILL.md 的步骤 3–5 做，至少三轮“截图、检查、修改”。每轮的截图另存到 `shots/round-1/`、`shots/round-2/` 这样的目录，最终版放在 `shots/` 根目录。最后一轮按视觉语言的“克制”和“细节”两节，逐区块做一次减法和细节检查。
## 给画廊的说明文件
在本目录写 `META.json`，画廊会读取它：
```json
{
"id": "目录名",
"title": "产品名",
"product": "一句话说清这是什么产品、给谁用",
"form": "web 或 app 或 desktop 或 module",
"category": "品类，例如 组件库官网、记账 App",
"direction": "方向一句话",
"moment": "记忆点一句话",
"cover": "最能代表这件作品的一张截图路径",
"screens": ["按展示顺序排列的截图路径"],
"live": "index.html",
"rounds": 打磨轮数
}
```
## 最后回报
用中文简短说明：做了什么方向、记忆点是什么、交付了哪些文件、截图看过哪些、还有什么没做好。
OilUI画廊