mcpField
U
url-to-code

url-to-code

github.com/openai设计与 UI56069 次安装4 周前更新
代码仓库

关于 url-to-code

URL To Code 用于将用户拥有或获准复刻的网站重建为本地交互式前端。它要求先采集桌面和移动端页面、资源及交互证据，并在交付前完成设计 QA。

主要功能

  1. 01采集桌面和移动端页面
  2. 02记录界面状态与交互
  3. 03收集并本地使用资源
  4. 04构建本地交互原型
  5. 05对照源站验证并执行设计 QA

适用场景

  1. 01将获准复刻的网站做成本地原型
  2. 02采集响应式布局和交互状态
  3. 03交付前对照源站检查原型

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/openai/role-specific-plugins --skill url-to-code

安装后在 Claude Code 中输入/url-to-code确认已加载。

附带文件agents/openai.yaml

详细介绍

URL 转代码

如果用户明确调用此技能，请继续。

仅当用户要求克隆或重建当前网站时才继续。

如果用户说 like、better、redesign 或 improve，请返回 $index。

将 <target-url> 克隆为真实、可交互、仅前端的本地应用或网站。克隆版本的外观和交互应与源站一致。

关键覆盖规则

用户上下文

开始前，加载 $user-context，并在本地 shell 可用时运行其预检脚本。

在相关情况下，使用保存的产品 URL、Figma 文件、截图、参考图片、代码库路径、Storybook、设计令牌、设计系统、品牌素材、组件参考、浏览器偏好设置和分享目标作为依据。

不要检查所有已保存的参考资料。只检查当前任务所需的内容。

工作流程

  1. 关键步骤：告知用户，操作前必须遵守目标网站的条款。此工作流程仅适用于用户拥有或获准重建的应用和网站。

  2. 使用 $index 中的浏览器选择规则打开源 URL。

  3. 确认页面正确。

  • 如果显示的是错误页面、被拦截的页面、登录页面、促销页面、加载画面、错误页面、应用安装页面或无关的重定向，请勿继续。
  • 如果页面不正确，请尝试使用其他可用浏览器。
  • 如果所有浏览器显示的页面都不正确，请停止操作并告知用户你看到的内容。
  1. 仔细捕获源页面。
  • 从页面顶部开始。
  • 以小步幅向下滚动。
  • 每一步都捕获当前可见内容。
  • 记录出现的任何新分区、控件、固定元素、动画或延迟加载素材。
  • 持续操作，直到查看完整个页面。
  • 滚回顶部，检查是否有变化。
  • 在移动设备视口 390 x 844 下重复上述操作。
  1. 使用浏览器 DOM 工具收集重建源页面所需的全部信息。
  • 元素
  • 组件
  • 文本
  • 链接
  • 按钮和控件
  • 状态
  • 图片
  • 图标
  • 字体
  • 视频
  • SVG
  • 样式表
  • 颜色
  • 间距
  • 布局尺寸
  • 响应式行为
  1. 查找并测试页面交互。
  • 使用截图和浏览器 DOM 工具查找可见控件。
  • 包括导航、按钮、链接、输入框、菜单、抽屉、模态框、标签页、轮播图、悬停状态、固定元素，以及用户可进行的其他所有交互。
  • 每次只测试一个控件。
  • 测试下一个控件前，恢复到起始状态。
  • 如果页面发生可见变化，或浏览器工具显示状态变化，请保存结果。
  1. 复制源页面中的真实素材。
  • 如果页面加载了某项素材，则视为可用，除非浏览器无法访问或保存它。
  • 如果页面使用了图片、Logo、图标、字体、视频、SVG、精灵图、遮罩、光标或背景图片，请在本地复制。
  • 如果无法复制图片素材，请使用原图的截图，通过 ImageGen 生成替代品。
  • 如果无法复制字体文件，请使用最接近的开源字体。
  • 如果无法复制图标或字形，请使用最接近的开源图标集。除非 Lucide 最为匹配，否则不要默认使用它。
  • 简要说明替换的素材、字体或图标，以及替换原因。

  1. 使用 local-prototype-preflight 创建本地应用。

  2. 仅根据从源页面捕获、复制或收集的信息进行构建。

  • 不要添加新的视觉创意。
  • 不要通过热链接使用源页面素材。
  • 如果有源页面依据，不要猜测。
  1. 运行本地应用。
在 ChatGPT Work Mode 中预览原型

启动 sites-preview 并不代表完成验证。验证要求在云端浏览器中打开 http://terminal.local:4173/，检查渲染后的页面、测试主要交互、检查浏览器控制台错误，并通过设计 QA。

不要用 HTTP 健康检查、构建成功、预览服务状态或部署成功来代替浏览器验证。如果无法使用云端浏览器，请报告验证受阻。

在 ChatGPT Work Mode 中验证本地原型：

  1. 如有需要，安装依赖。项目必须有 npm dev 脚本。

  2. sites-preview 会运行 npm run dev -- --host 0.0.0.0 --port 4173 --strictPort。dev 脚本必须接受这些标志。

  3. 对于 Vite 或 Vinext 项目，使用 "dev": "vite"。不要使用 vinext dev。将 Vite 配置为 server.host: "0.0.0.0" 和 server.allowedHosts: ["terminal.local"]。

  4. 在网站根目录运行 sites-preview start "$PWD"。

  5. 在云端浏览器中打开 http://terminal.local:4173/。不要使用 localhost、127.0.0.1、0.0.0.0、HTTPS 或其他端口。

  6. 报告完成之前，先验证渲染后的网站及其主要交互。

  7. 绝不要向用户提及 terminal.local，也不要向用户输出该 URL。使用 @Sites 部署检查点，并且只向用户提供部署后的检查点 URL。

  8. 将本地应用与原始版本进行比较。

  • 检查桌面端。
  • 检查移动端。
  • 检查捕获的每项交互。
  • 在进行最终 QA 之前，修复所有明显差异。
  1. 运行 design-qa，将其作为阻断式构建门槛。
  • 将 QA 报告保存为项目根目录下的 design-qa.md。
  • 修复 P0/P1/P2 问题，重新捕获应用，并重复此流程，直到 QA 报告显示 final result: passed。
  • 不要继续循环打磨 P3 问题。将剩余的 P3 问题列入后续迭代说明。
  • 如果源页面捕获、原型捕获或视觉比较受阻，请停止。design-qa.md 必须写明 final result: blocked。
  • 除非 design-qa.md 已存在且写明 final result: passed，否则不得交付。
  1. 交付应用或网站
  • 只有在 design-qa 通过后才能交付。
  • 保持原型在本地运行。
  • 在 Codex Desktop 中，提供可点击的本地 URL。在 ChatGPT Work Mode 中，使用 @Sites 部署检查点，并且只提供其部署后的 URL；绝不要输出 terminal.local。
  • 在原型链接之后，使用 critical-overrides.md 中的通用构建交付内容。不要添加其他完成消息。
  • 包含 critical-overrides 中的构建后迭代和分享提示。

硬性规则

  • 首先捕获源页面证据。在桌面端捕获、移动端捕获、关键状态以及所有必需的资源、图标、控件标记和字体均已捕获或替换之前，不得搭建项目框架、编写应用代码、启动服务或创建本地原型。
  • 在从目标页面捕获每一项交互和状态之前，不得交付。
  • 不得仅凭记忆、截图、猜测的 CSS、通用资源或以往对话进行构建。
  • 不得在没有源截图以及该状态可用的 DOM/样式/布局证据时，实现已保存状态。
  • 不得在最终应用中使用热链接的源资源。
  • 不得以“等待”解决资源问题为由，创建临时 CSS 图标、文本字形、表情符号标记、占位块或手工制作的 SVG。先解决资源问题，再开始构建。
  • 如果没有获准的浏览器能够捕获有效的源页面和原型证据，请停止并报告 design-qa 阻断问题。

评论

支持 Markdown