← 返回
未分类 中文

Static Site Cloner

Static site reproduction expert - Analyze target websites and manually code their structure, visual style, and basic interactions using pure HTML/CSS/JavaScr...
静态网站复现专家 - 分析目标网站,手动还原其结构、视觉风格和基本交互效果,使用纯 HTML/CSS/JavaScript
openlark
未分类 clawhub v1.0.0 1 版本 100000 Key: 无需
★ 1
Stars
📥 461
下载
💾 0
安装
1
版本
#latest

概述

Static Site Cloner

Based on a target website URL, accurately reproduce the site's structure, visuals, and interactions using pure HTML, CSS, and JavaScript. Output only front-end code, without involving backend functionality.

Use Cases

  • User requests to "reproduce a website," "clone a website," "recreate a website," "copy a web page"
  • User provides a website URL and requests code rewrite
  • User needs to convert an existing website into pure front-end code
  • User wants to learn or understand the front-end implementation of a particular website

Workflow

1. Information Gathering

Use web_fetch to retrieve the HTML content of the target website:

web_fetch(url="target_url", extractMode="markdown")

Analyze and document:

  • Page structure (navigation, header, main content, footer)
  • Visual elements (colors, typography, spacing, shadows)
  • Interactive behaviors (clicks, hovers, animations)

2. Structure Reproduction

Write semantic HTML:

  • Use proper HTML5 tags (header, nav, main, section, article, footer)
  • Maintain DOM hierarchy consistent with the original site
  • Add clear comments explaining the function of each section

3. Style Restoration

Write CSS styles:

  • Prefer Flexbox/Grid layout
  • Implement responsive design (media queries)
  • Pay attention to pseudo-classes and transition effects (:hover, :focus, transition)
  • Use CSS variables to manage colors and spacing

4. Interaction Implementation

Use vanilla JavaScript:

  • Event listeners (addEventListener)
  • DOM manipulation (classList, style, innerHTML)
  • Animation effects (requestAnimationFrame or CSS Animation)

5. Output Specification

Generate runnable code:

project_directory/
├── index.html
├── styles/
│   └── main.css
└── scripts/
    └── main.js

Or a single-file version (inline CSS/JS).

Code Conventions

<!-- HTML: Semantic + Comments -->
<header class="site-header">
  <!-- Navigation bar -->
  <nav class="navbar">...</nav>
</header>

/* CSS: BEM Naming + CSS Variables */
:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.navbar__link--active {
  color: var(--primary-color);
}

// JavaScript: Modern ES6+ Syntax
const toggleMenu = () => {
  document.body.classList.toggle('menu-open');
};

Limitations

  • Pure front-end technologies only: HTML, CSS, JavaScript (no React/Vue/jQuery)
  • No backend functionality: No database, API, or server-side rendering
  • Image placeholders: Use placeholder services (e.g., placeholder.com, picsum.photos)
  • Copyright compliance: Do not copy original site text content, trademarks, or sensitive information

References

For more detailed examples and patterns, refer to:

版本历史

共 1 个版本

  • v1.0.0 当前
    2026-05-03 09:01 安全 安全

安全检测

腾讯云安全 (Keen)

安全,无风险
查看报告

腾讯云安全 (Sanbu)

安全,无风险
查看报告

🔗 相关推荐

Chartjs

openlark
Chart.js 图表技能,用于生成折线图、柱状图、饼图、雷达图、散点图等可视化图表。
★ 0 📥 638

Sqlite Client

openlark
SQLite 数据库操作技能。当用户需要创建、读取、查询或修改 SQLite 数据库(.db 文件)时使用。
★ 0 📥 666

Toutiao Graphic Publisher

openlark
通过浏览器自动化在头条发布图文内容,支持智能排版、自动生成热门标签等功能。
★ 2 📥 930