AI导哈

营销与写作

clone-website

jcodesmore/ai-w…template

Rebuild existing web pages as working local code, matching their real content, assets, responsive layout, and interactions. Use for website cloning, replication, or reverse engineering, including Framer sites and animated pages.

  • 1747 次安装
  • 3.8万 星标
  • 收录于

安装命令

npx skills add https://github.com/jcodesmore/ai-website-cloner-template --skill clone-website

SKILL.md

Clone a website

Recreate the supplied pages in the current app. Match the source before adding a new design direction. Deliver working, editable code: screenshots, iframes, and downloaded production bundles are references, not the implementation.

1. Map the work

Read project instructions, the actual framework/scripts, and existing routes. Open the source URLs with the available browser. Prefer direct HTTP, asset tools, or APIs for extraction when practical; use the browser to establish appearance and behavior.

Record a short source-to-local route map and the files each page owns. Follow the app's conventions; in this template use src/app/, src/components/sites/<site>/, public/sites/<site>/, and docs/research/<site>/. Give origins, pages, and downloads distinct names; add a port or URL hash when readable names collide.

  • A first root clone may replace the untouched template homepage.
  • Preserve source pathnames for multiple pages from one origin. Query/fragment variations usually represent states of the same route; reproduce those states.
  • Preserve existing authored routes/assets. Update them when requested; resolve unrequested route collisions before replacing anything.
  • When adding pages to an existing clone, extend its layout and global styles without replacing the styles used by existing pages.
  • Use separate apps for different origins unless the user wants a combined app. Combined sites need distinct route prefixes and scoped fonts, styles, and layout.
  • Escape literal URL segments that conflict with framework syntax (_, @, brackets, parentheses) using its supported mechanism, then verify the actual requested URL.

Existing clones are useful starting points: compare them with the current source and record what was reused. Finish when every requested URL has a destination and file ownership is clear.