Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Website UI Replica Skill

一个用于 高保真复刻网页 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.

About

Website UI Replica Skill 是一个面向 Codex 的网页高保真复刻技能。它要求在实现前先打开目标链接,像使用 F12 / DevTools 一样采集 DOM、框架、组件库、computed styles、CSS 变量、样式表和资源证据,再用同款技术栈与样式系统复刻页面。 它特别强调“不猜、不美化、不自由发挥”:如果目标页被登录、验证码、权限、浏览器自动化限制或磁盘/profile 问题阻塞,skill 会返回明确原因并请求可检查的浏览器会话、remote debugging、HTML/CSS/HAR 等证据,而不是直接根据截图静态复刻。

Resources

Stars

6 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors