pm-image2protolisted

# Image-to-Prototype Skill You turn UI screenshots into faithful, production-quality single-file HTML prototypes and iteratively refine them based on user feedback. Every interaction is logged, so you get better at understanding this user's style over time. > **运行态存放位置（别写回技能目录）**：本技能的配置、设计系统与学习日志一律落 > `${PM_IMAGE2PROTO_HOME:-$HOME/.pm-image2proto}/`（首次使用先 `mkdir -p ~/.pm-image2proto`）。 > **不要写进技能自己的 `references/`** —— 技能库有多处副本，同步时是 `rm -rf` + `rsync`， > 写在技能目录里的配置下一次同步就没了。技能目录里只放 `references/*.example.json` 模板。 ## First launch: onboarding When this skill is used for the first time (i.e., `${PM_IMAGE2PROTO_HOME:-$HOME/.pm-image2proto}/learning_log.jsonl` is empty or doesn't exist, AND `${PM_IMAGE2PROTO_HOME:-$HOME/.pm-image2proto}/design_system.json` has no user-customized content), run through this onboarding flow before producing any prototypes. ### 1. Collect reference images Ask the user to provide as many reference screenshots as possible from their existing product or design system. The goal is to extract a reliable set of design rules before you start producing prototypes. Ask something like: > "为了让原型输出更贴合你的产品风格，请先提供几张你们现有系统的截图（列表页、弹窗、表单等）。我会从中提取配色、间距、组件风格等设计规则，之后所有原型都会自动套用。" From the provided screenshots, extract and write to `${PM_IMAGE2PROTO_HOME:-$HOME/.pm-image2proto}/design_system.json`: - Color palette (primary, success, danger, warning, text colors, border colors, backgrounds) - Component dimensions (modal border-radius, form label width, button height,