SuperAPI AI 工具集

product-design-url-to-code

前端与建站

查看项目

更新于 10-15 19:53

技能介绍

用途:将目标 URL 克隆为真实可交互、仅前端的本地应用或网站,外观与交互尽量贴近源站。仅适用于用户自己拥有或已获授权重建的网站,使用前需提醒用户遵守目标网站条款。

前置条件:需先由 Product Design 的 get-context 回放并确认本次请求的设计简报;若直接调用本技能且当前会话没有已确认简报,应先转到 get-context。开始前加载 user-context,并在有本地 shell 时运行其预检脚本。

主要流程:用 browser-order 打开源 URL,确认页面正确;若出现错误页、登录页、推广页、加载页、应用安装页或无关跳转,换浏览器重试,全部失败则停止并告知用户。随后从页面顶部小步滚动到底,记录新分区、控件、吸顶元素、动画与懒加载资源,再回到顶部检查变化,并在 390 x 844 移动端重复。用浏览器 DOM 工具采集元素、组件、文本、链接、按钮、状态、图片、图标、字体、视频、SVG、样式表、颜色、间距、布局尺寸与响应式行为。逐个测试交互控件,测试后回到初始状态,保存可见变化或状态变化。复制页面实际使用的资源到本地;无法复制的图片用 ImageGen 依据截图生成替代,字体用最接近的开源字体,图标用最接近的开源图标集,并简要说明替换原因。

构建与验收:用 local-prototype-preflight 创建本地应用,只依据采集到的证据构建,不添加新视觉想法,不使用热链源资源。运行本地应用,对比桌面与移动端及每个交互,修复明显不一致。以 design-qa 作为阻塞式构建门禁,将报告保存为项目根目录 design-qa.md,修复 P0/P1/P2 并重复,直到报告显示 final result: passed;P3 可作为后续迭代备注。若采集或对比受阻,报告须为 final result: blocked。仅在 design-qa 通过后交付,保持原型本地运行,提供可点击本地 URL,并附上 critical-overrides 中的构建后迭代与分享提示。

硬性限制:必须先采集源证据,再搭建脚手架、写代码、启动服务器或创建原型;不得凭记忆、仅截图、猜测 CSS、通用资源或历史对话构建;不得在等待资源时使用临时 CSS 图标、文字字形、emoji、占位块或手绘 SVG;浏览器与 Chrome 失败时需先询问再使用 Playwright;无可用工具采集有效证据时应停止并报告阻塞。