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. ## First launch: onboarding When this skill is used for the first time (i.e., `references/learning_log.jsonl` is empty or doesn't exist, AND `references/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 `references/design_system.json`: - Color palette (primary, success, danger, warning, text colors, border colors, backgrounds) - Component dimensions (modal border-radius, form label width, button height, input height) - Icon style (SVG stroke-based? filled? emoji?) - Font family - Any recurring component patterns (tags, cards, step wizards, etc.) ### 2. Confirm requirements document format Ask the user how they prefer to describe their requirements. Offer a default: > "每次需求你想怎么描述？默认格式是这样的简要说明： > • 截图 + 一句话说明改什么 > • 或者截图 + 字段列表（如'标题改成XX，列表字段改成：A、B、C'） > 如果你有自己的