適用於 Openclaw 的複製區塊

複製區塊可擷取線上網站區塊，並將其實際樣式與結構轉換為適用於所選框架或網站建置工具的程式碼。

soraiabarroso

v1.0.0

Oct 15, 2026

安裝與下載

從來源直接安裝技能的最快方式。


                  npx clawhub@latest install clone-section

將技能資料夾複製到以下位置之一

全域模式

~/.openclaw/skills/

工作區

<project>/skills/

優先級：工作區 > 本地 > 內建

將此提示詞複製到 OpenClaw 即可自動安裝。


                  請幫我使用 Clawhub 安裝 clone-section。如果尚未安裝 Clawhub，請先安裝（npm i -g clawhub）。

取得包含原生技能檔案的ZIP壓縮檔。

複製區塊可協助開發者將線上網站的特定部分（例如主視覺區、價格表、導覽列或頁尾）重建為可用的元件程式碼。它會擷取頁面解析後的 CSS，並傳回該區塊實際使用的色彩、字型、間距與文案，相較於根據螢幕截圖猜測，能提供更忠實的起點。

作為面向前端工作的 Openclaw Skills 之一，它支援 Tailwind、React JSX、Vue、HTML、Elementor 和 Shopify 輸出。請將產生的程式碼作為參考，並依專案慣例、素材與設計權杖調整；重新發布其他網站的內容前，請先確認授權。

確認來源網址和使用者想要的區塊。使用支援的命名區塊，或在需要時使用 API 傳回的 selector。
選擇符合使用者專案的輸出格式：Tailwind、JSX、Vue、HTML、Elementor 或 Shopify。適用時，為 JSX 或 Vue 設定元件名稱。
透過已連線的 MiroMiro 工具呼叫 extract_code，或使用等效參數及 MIROMIRO_API_KEY 授權呼叫 REST API。
檢視傳回的程式碼、區塊中繼資料、設計權杖、佈景主題及 summary.styledCoverage。如果回應包含提示或涵蓋率偏低，請使用 render: true 重試，讓頁面在瀏覽器中執行。
將擷取的結構調整至目標專案；適當保留來源設計值，並整合素材、權杖與任何傳回的動畫關鍵影格。
提供完成的元件或可匯入檔案，指出任何佈景主題不相符之處，並提醒使用者在商業再利用前確認權利。

export MIROMIRO_API_KEY="your_api_key"

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\/<name>.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\/<name>.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，以判斷靜態擷取是否足夠，或是否需要在瀏覽器中重新渲染。