一个用于 高保真复刻网页 UI 的 Codex Skill。
它的核心目标不是“做一个差不多风格的页面”,而是通过真实浏览器证据复刻目标页面:打开链接、检查 DOM、识别前端框架、读取组件库痕迹、采集 computed styles / CSS 变量 / 样式表 / 资源,再基于这些证据实现尽可能接近原页面的 UI。
- 复刻一个线上网页、控制台页面、后台系统、表格页面或 SaaS 页面
- 根据 URL 做 1:1 UI 还原
- 分析目标页面使用的框架和组件库
- 从 F12 / DevTools 证据中提取 DOM 结构、CSS、样式变量和组件信息
- 需要避免 AI “自由发挥”“重新设计”“凭截图猜页面”的场景
- 证据优先:URL 复刻任务必须以真实页面的 DOM、computed styles、CSS、assets、framework evidence 为主。
- 禁止自由发挥:不能添加原页面没有的卡片、公告、侧栏、数据行、按钮或装饰元素。
- 同款技术栈优先:如果目标页面使用 Ant Design、Element Plus、MUI、Tailwind、CSS Modules 等,应优先使用同款框架、组件库和样式系统。
- 截图只是辅助:对于 URL-based 任务,截图只能用于视觉对照,不能替代 F12/DOM/CSS 证据。
- 访问失败不猜测:如果被登录页、验证码、权限页、错误页或空白壳拦住,必须返回原因并请求可检查的浏览器会话或导出的 HTML/CSS/HAR。
- 认证页面有专门流程:遇到登录重定向时,优先请求用户使用已登录浏览器会话、remote debugging 或可检查的浏览器环境,而不是复制完整 Chrome profile 或直接凭截图开做。
这个 skill 特别针对常见的 UI 复刻失败模式:
- 目标页没访问进去,却根据登录页或截图猜一个页面
- 把浅色控制台复刻成深色 SaaS Dashboard
- 原页面只有一行表格,却补出多行假数据
- 原页面没有公告条、余额卡、帮助卡,却擅自添加
- 目标页面使用 Ant Design 表格,却用 div 手搓一个近似表格
- 浏览器无法执行 JS / AppleScript / 读取 DOM 时,仍然说“截图够用”
/tmp空间不足时盲目复制完整 Chrome profile
如果目标链接无法真实检查,skill 会停止实现并返回阻塞原因,例如:
I reached a login page instead of the requested target, so I will not guess the UI.
Reason: redirected to login / missing authenticated session.
Requested URL: ...
Final URL: ...
Page title: ...
Visible evidence: ...
Next step: please log in in your browser or allow me to use an already logged-in browser session.