用途:将 UI 截图、设计稿转成高保真的单文件 HTML 原型,并根据用户反馈迭代修改,同时记录交互历史以逐步学习用户的设计风格。
主要能力:首次使用会先引导用户提供现有系统截图,从中提取配色、组件尺寸、图标风格、字体等设计规则写入 references/design_system.json;确认需求描述格式与原型保存目录,写入 references/config.json。之后每次会话先读取 config.json、design_system.json 和 learning_log.jsonl(最近 20 条),再分析截图中的布局结构、组件清单、配色、字体、间距、图标风格与交互元素,生成原型。
使用方式:原型始终输出为单个 HTML 文件,CSS 写在 style 块、JS 写在 script 块,不依赖外部框架或 CDN(流程图除外,可用 Mermaid)。文件按 MMDD-设计名称.html 命名并保存到 output_root。修改已有文件时优先用 Edit 做定点修改,结构大改时用 Write 替换。每次创建或修改后向 learning_log.jsonl 追加一条 JSON 记录(只追加不覆盖)。用户要求“输出设计说明”时,输出简短的变更列表。
适用场景:把截图快速变成可运行、可交互的原型;需要按既有设计系统保持视觉一致;需要流程图时可用 Mermaid 生成,默认 Notion 风格黑白配色。
限制:资料未提供具体收费、价格、平台支持范围与效果保证;原型为单文件 HTML,除 Mermaid 外不使用外部依赖;设计规则依赖用户提供的参考截图,缺失时需先完成引导流程。