SuperAPI AI 工具集

url-to-code

前端与建站

查看项目

更新于 10-16 03:05

技能介绍

用途:将指定的目标 URL 克隆为一个真实可交互、纯前端的本地应用或网站,使其外观与交互尽量贴近源站。仅当用户明确调用该技能,且要求克隆或重建当前站点时继续;若用户提出“类似、更好、重新设计、改进”等需求,则返回 $index。

主要能力:按流程打开源 URL 并校验页面正确性;从页面顶部开始小步滚动,逐步截取可见内容,记录新出现的区块、控件、粘性元素、动画与懒加载资源,滚回顶部复查变化,并在 390 x 844 移动端重复。借助浏览器 DOM 工具采集元素、组件、文本、链接、按钮与控件、状态、图片、图标、字体、视频、SVG、样式表、颜色、间距、布局尺寸与响应式行为。逐个测试导航、按钮、链接、输入、菜单、抽屉、弹窗、标签页、轮播、悬停状态等交互,每次测试后回到初始状态并保存状态变化。复制页面实际使用的图片、Logo、图标、字体、视频、SVG、精灵图、遮罩、光标与背景图到本地;无法复制时用 ImageGen 依据原截图生成替代,字体用最接近的开源字体,图标用最接近的开源图标集,并简要说明替换原因。

使用方式:先加载 $user-context 并在有本地 shell 时运行其预检脚本,按需参考已保存的产品 URL、Figma、截图、代码库路径、Storybook、设计令牌、设计系统、品牌资产等。用 local-prototype-preflight 创建本地应用,只依据采集到的内容构建。本地验证需在云浏览器打开 http://terminal.local:4173/ 检查渲染、测试主要交互、查看控制台错误并通过设计 QA;依赖需安装,项目须有 npm dev 脚本,sites-preview 会运行 npm run dev -- --host 0.0.0.0 --port 4173 --strictPort,Vite 或 Vinext 项目使用 "dev": "vite",并配置 server.host: "0.0.0.0" 与 server.allowedHosts: ["terminal.local"],随后从站点根目录运行 sites-preview start "$PWD"。以 design-qa 作为阻塞式构建门禁,报告保存为项目根目录 design-qa.md,修复 P0/P1/P2 直至 final result: passed;P3 仅作后续迭代记录。交付时保持原型本地运行,Codex Desktop 提供可点击本地 URL,ChatGPT Work Mode 用 @Sites 部署检查点并只提供部署 URL,绝不输出 terminal.local。

适用场景:用户拥有或已获授权重建的网站与应用的前端克隆。

限制:开始前必须警告用户遵守目标网站条款;页面若为错误页、被拦截页、登录页、推广页、加载页、错误页、应用安装页或无关跳转则不得继续,换浏览器重试,全部失败则停止并说明所见。必须先完成桌面与移动端采集、关键状态及全部所需资产、图标、控件标记与字体,才能搭建代码或启动服务器;不得凭记忆、仅截图、猜测 CSS、通用资产或历史对话构建;不得热链源站资产;不得用临时 CSS 图标、文字字形、emoji、占位块或手绘 SVG 代替;若无法获得有效源站与原型证据,应停止并报告 design-qa 阻塞。官方文本未提供,其他收费、平台与效果信息暂未提供。