克隆区块

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install clone-section
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 clone-section。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

克隆区块可帮助开发者将真实网站的特定部分（例如主视觉区、价格表、导航栏或页脚）重建为可用的组件代码。它会提取页面解析后的 CSS，并返回该区块实际使用的颜色、字体、间距和文案，相较于根据截图猜测，能提供更忠实的起点。
作为面向前端工作的 Openclaw Skills 之一，它支持 Tailwind、React JSX、Vue、HTML、Elementor 和 Shopify 输出。请将生成的代码用作参考，并根据项目规范、资源和设计令牌进行调整；重新发布其他网站的内容前，请先检查许可。

应用场景

从真实网址重建指定区块，例如主视觉区、页脚、常见问题或价格表。
当仅凭截图无法确定实际样式和文案时，创建参考实现。
生成适配项目现有技术栈的 React、Vue、Tailwind 或 HTML 代码。
为 WordPress 生成可导入的 Elementor 模板，或生成 Shopify 主题区块。
通过从 API 返回的区块列表中选择 selector，提取较少见的页面区块。
当静态提取结果有限时，在浏览器中重试客户端渲染或运行时样式页面。

工作原理

确认来源网址和用户需要的区块。使用受支持的命名区块，或在必要时使用 API 返回的 selector。
选择与用户项目相符的输出格式：Tailwind、JSX、Vue、HTML、Elementor 或 Shopify。适用时，为 JSX 或 Vue 设置组件名称。
通过已连接的 MiroMiro 工具调用 extract_code，或使用等效参数和 MIROMIRO_API_KEY 授权调用 REST API。
检查返回的代码、区块元数据、设计令牌、主题以及 summary.styledCoverage。如果响应包含提示或覆盖率较低，请使用 render: true 重试，以便在浏览器中执行页面。
将提取的结构调整到目标项目中；适当保留源设计值，并整合资源、令牌以及返回的动画关键帧。
提供完成的组件或可导入文件，指出任何主题不匹配之处，并提醒用户在商业复用前检查相关权利。

配置指南

从入门页面获取 MiroMiro API 密钥。文档说明，免费方案每月包含 300 个积分且无需银行卡；每次标准提取调用消耗 25 个积分。切勿编造或臆测密钥。
在代理使用的环境中设置密钥：
export MIROMIRO_API_KEY="your_api_key"
连接 MiroMiro 工具后，调用 extract_code。对于没有这些工具的 OpenClaw 或其他代理，请使用 REST API：
curl -s "https://miromiro.app/api/v1/code?url=linear.app&section=pricing&framework=tailwind" \ -H "Authorization: Bearer $MIROMIRO_API_KEY" 根据用户需求替换示例网址、区块和框架。支持的命名区块包括 hero、header、footer、pricing、features、testimonials、faq 和 cta。省略 section 可自动检测主视觉区。
对于需要 JavaScript 渲染的页面，请使用 render: true 重试；这会额外消耗 5 个积分。渲染请求也可以使用 screenshot: true 或 screenshot: "full" 返回渲染页面的网址。
对于 Elementor，将完整的 code JSON 保存为 .json 文件，并通过 Templates > Saved Templates > Import 导入。对于 Shopify，将完整的 Liquid 输出保存为 sections/.liquid，并在主题编辑器中添加，而不是放入 Custom Liquid 区块。

数据架构

请求输入：页面 url、可选的 section 或返回的 selector、framework、可选的组件 name、可选的 theme，以及 render 和 screenshot 等渲染选项。
支持的区块名称：hero、header、footer、pricing、features、testimonials、faq 和 cta。未指定区块时，默认提取主视觉区。
响应字段：生成的 code；适用时的 css 字符串；包含标签和 selector 的 sections 数组；设计令牌；theme 值；以及 summary.styledCoverage 和 hint 等提取诊断信息。
框架专属输出：JSX 和 Vue 可将重复项目表示为数据数组，并使用 .map() 或 v-for 渲染。HTML 返回标记，并附带 CSS 字符串。Elementor 在 code 中返回完整的模板 JSON；Shopify 在 code 中返回完整的 Liquid 区块，并使用 css: null，因为样式已包含在文件中。
文件与集成：Elementor 输出保存为 .json；Shopify 输出应放在 sections/.liquid。Tailwind、JSX 和 Vue 响应可能会在 css 中包含 @keyframes；请将这些规则添加到项目的全局样式表中，否则动画可能无法运行。
元数据：此技能名为 clone-section，用于描述网站区块重建，并将 MIROMIRO_API_KEY 声明为主要环境变量。它将 MiroMiro API 列为主页。

高级特性

区块发现：
API 会返回其他可提取区块及其易读标签和可直接使用的 selector；请使用这些 selector，而不要猜测 CSS selector。
浏览器渲染提取：
当 JavaScript 渲染的内容或运行时样式限制静态提取时，使用
render: true
重试。这会额外消耗 5 个积分，适合作为重试方式，而非默认选项。
主题选择：
适用时请求
theme: "dark"
，并检查返回的
theme
字段。主题完全由 JavaScript 控制的网站可能不支持此选项。
框架适配输出：
重复的 JSX 和 Vue 结构会表示为可复用模板和数据；Elementor 和 Shopify 会获得完整、带样式且可导入的文件。
作用域样式和动画：
Elementor 和 Shopify 的样式具有作用域限制，可避免与主题冲突。对于 Tailwind、JSX 和 Vue，请将返回的任何
@keyframes
移至全局样式表。
设计令牌交接：
如果项目支持设计令牌，请在项目主题中使用返回的区块专属设计令牌，而不要硬编码颜色。
提取诊断：
summary.styledCoverage
和任何
hint
，判断静态提取是否足够，或是否需要在浏览器中重试渲染。

name: clone-section description: Rebuild a section of a real website as component code. Use when the user asks to clone, copy, port, recreate, or rebuild part of a live site (a hero, pricing table, footer, navbar), or says "make it look like " and wants actual markup rather than just colors. Also when they build in WordPress/Elementor or Shopify and want a section they can import into their site. homepage: https://miromiro.app/api/website-to-code-api