用途：把用户提供的网页截图、设计图，或在明确要求下由 AI 生成的视觉参考，转换成可运行的前端界面，尽量贴近原图，同时保留产品文案、需求、仓库约定与所选风格。
主要能力：先读取项目说明并检查前端技术栈、路由、设计令牌、资源与可复用组件；解析布局、字体、配色、间距、媒体、组件、响应式行为与交互意图；把视觉体系映射到项目已有的基础组件上；实现完整界面，包括加载、空、错误、聚焦、悬停与减弱动效等状态；在代表性视口尺寸下渲染并与参考图对照，优先修复最明显的差异。
使用方式与路由规则：若用户只要求生成设计参考图，应改用 imagegen-frontend-web；若提供的是需要设计数据的 Figma 文件，应走 Figma 实现流程；若无视觉参考，只在用户要求先出图或任务已授权生成图片时才生成。若用户指定了某一种命名风格，应将其作为艺术方向，不要混用其他视觉技能中不兼容的风格要求。复杂参考可参考 references/visual-analysis.md，生成参考图时阅读 references/image-generation.md，还原度迭代见 references/implementation-and-verification.md。
参考图规则：按构图需要生成足够图片，使每个独立版块清晰可辨，而非固定数量；小页面单张总览可能就够，复杂页面可拆分区块或细节图。原图细节不足时，应生成新的细节参考或询问缺失的设计决策，不要把极小裁剪放大后当作原始事实。多张生成图之间应保持字体、调色板、表面处理、组件语言与内容模型一致，但区块构图可以变化，避免页面变成重复的左文右图模板。
限制：结构需来自可见证据，不确定的行为要标注为推断；首屏需在小笔记本上可读，并测试移动端重排；避免参考图或产品未要求的嵌套容器、装饰性胶囊和密集微控件；保留有意的留白与密度；即使参考图只是视觉稿，也要使用真实可访问控件与语义结构；不要用全局隐藏溢出来掩盖布局问题。完成后应说明实现了什么、使用了或生成了哪些参考、如何验证，以及仍属推断的视觉或行为细节。