url-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

URL To Code

URL 转代码

If the user explicitly invokes this skill, continue.

Only continue when the user asks to clone or recreate the current site.

If the user says

like

better

redesign

, or

improve

, return to $index.

Clone

<target-url>

as a real interactive, frontend-only local app or website. The clone should look and interact like the source.

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

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

如果用户提到

like

、

better

、

redesign

或

improve

，请返回至$index。

将

<target-url>

克隆为一个真实可交互的纯前端本地应用或网站。克隆版本在外观和交互上应与源站点一致。

Critical Overrides

关键覆盖规则

Refer to the Plugin router $index before proceeding.
Follow $critical-overrides.

继续操作前，请参考插件路由$index。
遵循$critical-overrides。

User Context

用户上下文

Before starting, load $user-context and run its preflight script when local shell access is available.

Use saved product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, component refs, browser preferences, and share targets as grounding material when relevant.

Do not inspect every saved reference. Inspect only what the current task needs.

开始操作前，加载$user-context，当有本地shell访问权限时运行其预检脚本。

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

无需检查所有已保存的参考内容，仅检查当前任务所需的部分。

Workflow

工作流程

CRITICAL STEP: Warn the user that they must follow the target website's terms before proceeding. This workflow is only for apps and websites the user owns, or has permission to recreate.
Open the source URL using the Browser Choice rule in $index.
Check that the page is correct.

Do not continue if it shows the wrong page, a blocked page, a login page, a promo page, a loading screen, an error page, an app-install page, or an unrelated redirect.
If the page is wrong, try again with another available browser.
If every browser shows the wrong page, stop and tell the user what you can see.

Capture the source page carefully.

Start at the top of the page.
Scroll down in small steps.
At each step, capture what is visible.
Note any new sections, controls, sticky elements, animations, or lazy-loaded assets.
Continue until the full page has been seen.
Scroll back to the top and check whether anything changed.
Repeat on mobile at
```
390 x 844
```
.

Use the browser DOM tools to gather everything needed to recreate the source.

Elements
Components
Text
Links
Buttons and controls
States
Images
Icons
Fonts
Videos
SVGs
Style sheets
Colors
Spacing
Layout sizes
Responsive behavior

Find and test the page interactions.

Use the screenshots and browser DOM tools to find visible controls.
Include navigation, buttons, links, inputs, menus, drawers, modals, tabs, carousels, hover states, sticky elements, and anything else the user can interact with.
Test one control at a time.
Return to the starting state before testing the next control.
Save the result when the page visibly changes or the browser tools show a state change.

Copy the real assets from the source page.

If the page loads the asset, treat it as available unless the browser cannot access or save it.
If an image, logo, icon, font, video, SVG, sprite, mask, cursor, or background image is used by the page, copy it locally.
If an image asset cannot be copied, generate a replacement with ImageGen using a screenshot of the original.
If a font file cannot be copied, use the closest open source font match.
If an icon or glyph cannot be copied, use the closest matching open source icon set. Do not default to Lucide unless it is the closest match.
Briefly note any asset, font, or icon you replaced and why.

Create the local app with local-prototype-preflight.
Build only from what you captured, copied, or gathered from the source.

Do not add new visual ideas.
Do not use hotlinked source assets.
Do not guess when source proof is available.

Run the local app.

关键步骤：警告用户在继续操作前必须遵守目标网站的条款。此工作流程仅适用于用户拥有或获得重新创建许可的应用和网站。
使用$index中的浏览器选择规则打开源URL。
检查页面是否正确。

如果显示错误页面、被拦截页面、登录页面、促销页面、加载页面、错误提示页面、应用安装页面或无关重定向页面，请停止操作。
如果页面不正确，尝试使用其他可用浏览器重试。
如果所有浏览器都显示错误页面，请停止操作并告知用户当前看到的内容。

仔细捕获源页面内容。

从页面顶部开始。
小步向下滚动。
在每一步中，捕获可见内容。
记录任何新的区块、控件、粘性元素、动画或懒加载资源。
持续操作直到查看完整个页面。
滚动回顶部，检查是否有任何变化。
在
```
390 x 844
```
的移动端尺寸下重复上述操作。

使用浏览器DOM工具收集重新创建源站点所需的所有内容。

元素
组件
文本
链接
按钮和控件
状态
图片
图标
字体
视频
SVG
样式表
颜色
间距
布局尺寸
响应式行为

查找并测试页面交互。

使用截图和浏览器DOM工具查找可见控件。
包括导航栏、按钮、链接、输入框、菜单、侧边栏、模态框、标签页、轮播图、悬停状态、粘性元素以及任何用户可交互的内容。
每次测试一个控件。
测试下一个控件前，返回初始状态。
当页面出现可见变化或浏览器工具显示状态变化时，保存结果。

从源页面复制真实资源。

如果页面加载了资源，除非浏览器无法访问或保存，否则视为可用。
如果页面使用了图片、Logo、图标、字体、视频、SVG、精灵图、遮罩、光标或背景图片，请将其复制到本地。
如果无法复制图片资源，使用ImageGen根据原始截图生成替代资源。
如果无法复制字体文件，使用最接近的开源字体替代。
如果无法复制图标或字形，使用最匹配的开源图标集。除非Lucide是最匹配的选择，否则不要默认使用它。
简要记录任何被替换的资源、字体或图标及其原因。

使用local-prototype-preflight创建本地应用。
仅基于从源站点捕获、复制或收集的内容进行构建。

不要添加新的视觉创意。
不要使用源站点的热链接资源。
当有源站点证据可用时，不要猜测。

运行本地应用。

Previewing prototypes in ChatGPT Work Mode

在ChatGPT工作模式中预览原型

Starting

sites-preview

is not verification. Verification requires opening

http://terminal.local:4173/

in the cloud browser, inspecting the rendered page, testing primary interactions, checking browser console errors, and passing design QA.

Do not substitute HTTP health, build success, preview-service status, or deployment success for browser verification. If the cloud browser cannot be used, report verification as blocked.

For local prototype verification in ChatGPT Work Mode:

Install dependencies if needed. The project must have an npm
```
dev
```
script.

sites-preview

runs

npm run dev -- --host 0.0.0.0 --port 4173 --strictPort

. The

dev

script must accept those flags.

For Vite or Vinext projects, use

"dev": "vite"

. Do not use

vinext dev

. Configure Vite with

server.host: "0.0.0.0"

and

server.allowedHosts: ["terminal.local"]

From the site root, run
```
sites-preview start "$PWD"
```
.
Open
```
http://terminal.local:4173/
```
in the cloud browser. Do not use
```
localhost
```
,
```
127.0.0.1
```
,
```
0.0.0.0
```
, HTTPS, or another port.
Verify the rendered site and its primary interactions before reporting completion.
Never mention
```
terminal.local
```
or output that URL to the user. Deploy a checkpoint with
```
@Sites
```
and give the user only the deployed checkpoint URL.
Compare the local app against the original.

Check desktop.
Check mobile.
Check every interaction you captured.
Fix any obvious mismatch before running final QA.

Run design-qa as the blocking build gate.

Save the QA report as
```
design-qa.md
```
in the project root.
Fix P0/P1/P2 issues, capture the app again, and repeat until the QA report says
```
final result: passed
```
.
Do not keep looping on P3 polish. Include any remaining P3s as follow-up iteration notes.
If source capture, prototype capture, or visual comparison is blocked, stop.
```
design-qa.md
```
must say
```
final result: blocked
```
.
Do not hand off unless
```
design-qa.md
```
exists and says
```
final result: passed
```
.

Handoff the app or website

Only hand off after design-qa passes.
Keep the prototype running locally.
In Codex Desktop, provide the clickable local URL. In ChatGPT Work Mode, deploy a checkpoint with
```
@Sites
```
and provide only its deployed URL; never output
```
terminal.local
```
.
After the prototype link, use the shared build handoff from
```
critical-overrides.md
```
. Do not add a different completion message.
Include the post-build iteration and share nudge from critical-overrides.

启动

sites-preview

并不等同于验证。验证需要在云浏览器中打开

http://terminal.local:4173/

，检查渲染页面，测试主要交互，查看浏览器控制台错误，并通过设计QA。

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

ChatGPT工作模式下的本地原型验证步骤：

如有需要，安装依赖项。项目必须包含npm
```
dev
```
脚本。

sites-preview

运行

npm run dev -- --host 0.0.0.0 --port 4173 --strictPort

。

dev

脚本必须支持这些参数。

对于Vite或Vinext项目，使用

"dev": "vite"

。不要使用

vinext dev

。将Vite配置为

server.host: "0.0.0.0"

和

server.allowedHosts: ["terminal.local"]

。

从站点根目录运行
```
sites-preview start "$PWD"
```
。
在云浏览器中打开
```
http://terminal.local:4173/
```
。不要使用
```
localhost
```
、
```
127.0.0.1
```
、
```
0.0.0.0
```
、HTTPS或其他端口。
在报告完成前，验证渲染后的站点及其主要交互。
切勿向用户提及
```
terminal.local
```
或输出该URL。使用
```
@Sites
```
部署检查点，仅向用户提供部署后的检查点URL。
将本地应用与原始站点进行对比。

检查桌面端显示。
检查移动端显示。
检查所有已捕获的交互。
在运行最终QA前修复任何明显的不一致。

将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
```
时，才可交付成果。

交付应用或网站

仅在design-qa通过后交付。
保持原型在本地运行。
在Codex Desktop中，提供可点击的本地URL。在ChatGPT工作模式中，使用
```
@Sites
```
部署检查点，仅提供其部署后的URL；切勿输出
```
terminal.local
```
。
在原型链接后，使用
```
critical-overrides.md
```
中的共享构建交付内容。不要添加其他完成消息。
包含critical-overrides中的构建后迭代和共享提示。

Hard Rules

严格规则

Capture source evidence first. Do not scaffold, write app code, start a server, or create the local prototype until desktop capture, mobile capture, key states, and every required asset, icon, control mark, and font is captured or replaced.
Do not hand off until every single interaction and state is captured from the target.
Do not build from memory, screenshots alone, guessed CSS, generic assets, or prior chats.
Do not implement a saved state without source screenshot plus the available DOM/style/layout evidence for that state.
Do not use hotlinked source assets in the final app.
Do not create temporary CSS icons, text glyphs, emoji marks, placeholder blocks, or handmade SVGs while "waiting" to resolve assets. Resolve assets first, then build.
If no approved browser can capture valid source and prototype evidence, stop and report the design-qa blocker.

先捕获源站点证据。在完成桌面端捕获、移动端捕获、关键状态以及所有必需资源、图标、控件标记和字体的捕获或替换前，不要搭建框架、编写应用代码、启动服务器或创建本地原型。
仅当从目标站点捕获了所有交互和状态后，才可交付成果。
不要基于记忆、仅截图、猜测的CSS、通用资源或之前的对话进行构建。
不要在没有源站点截图以及该状态对应的DOM/样式/布局证据的情况下实现保存的状态。
不要在最终应用中使用源站点的热链接资源。
在解决资源问题的“等待”期间，不要创建临时CSS图标、文本字形、表情符号标记、占位块或手工制作的SVG。先解决资源问题，再进行构建。
如果没有经批准的浏览器可以捕获有效的源站点和原型证据，请停止操作并报告设计QA被阻止。