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