Clone Section extracts a live website section and turns its real styles and structure into code for your chosen framework or site builder.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install clone-section
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install clone-section using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Clone Section?
Clone Section helps developers recreate a specific part of a live website—such as a hero, pricing table, navigation bar, or footer—as usable component code. It extracts the page’s resolved CSS and returns the section’s actual colors, fonts, spacing, and copy, providing a more faithful starting point than guessing from a screenshot.
As one of the Openclaw Skills for frontend work, it supports Tailwind, React JSX, Vue, HTML, Elementor, and Shopify outputs. Use the generated code as a reference to adapt to your project’s conventions, assets, and design tokens; check licensing before republishing another site’s content.
Clone Section Use Cases
- Rebuild a named section from a live URL, such as a hero, footer, FAQ, or pricing table.
- Create a reference implementation when a screenshot alone is not enough to identify real styles and copy.
- Generate React, Vue, Tailwind, or HTML code that fits the project’s existing stack.
- Produce an importable Elementor template for WordPress or a Shopify theme section.
- Extract a less common page block by choosing a selector from the API’s returned section list.
- Retry client-rendered or runtime-styled pages in a browser when static extraction returns limited results.
How Clone Section Works
- Identify the source URL and the section the user wants. Use a supported named section or, if needed, a selector returned by the API.
- Choose the output format to match the user’s project: Tailwind, JSX, Vue, HTML, Elementor, or Shopify. Set a component name for JSX or Vue when appropriate.
- Call
extract_codethrough connected MiroMiro tools, or call the REST API with the equivalent parameters andMIROMIRO_API_KEYauthorization. - Review the returned code, section metadata, design tokens, theme, and
summary.styledCoverage. If the response includes a hint or coverage is low, retry withrender: trueto execute the page in a browser. - Adapt the extracted structure to the target project, preserve the source design values where appropriate, and integrate assets, tokens, and any returned animation keyframes.
- Deliver the finished component or importable file, noting any theme mismatch and reminding the user to check rights before commercial reuse.
Clone Section Setup
- Obtain a MiroMiro API key from the onboarding page. The documented free plan includes 300 credits per month without a card; each standard extraction call costs 25 credits. Never invent or assume a key.
- Set the key in the environment used by the agent:
export MIROMIRO_API_KEY="your_api_key"
- With MiroMiro tools connected, call
extract_code. For OpenClaw or another agent without those tools, use the REST API:
curl -s "https://miromiro.app/api/v1/code?url=linear.app§ion=pricing&framework=tailwind" \
-H "Authorization: Bearer $MIROMIRO_API_KEY"
- Replace the example URL, section, and framework with the user’s requirements. Supported named sections are
hero,header,footer,pricing,features,testimonials,faq, andcta. Omitsectionto auto-detect the hero. - For pages that need JavaScript rendering, retry with
render: true; this adds 5 credits. A rendered request can also usescreenshot: trueorscreenshot: "full"to return a rendered-page URL. - For Elementor, save the complete
codeJSON as a.jsonfile and import it through Templates > Saved Templates > Import. For Shopify, save the complete Liquid output assections/<name>.liquidand add it in the theme editor—not in a Custom Liquid block.
Clone Section Data Schema & Taxonomy
- Request inputs: page
url, optionalsectionor returnedselector,framework, optional componentname, optionaltheme, and rendering options such asrenderandscreenshot. - Supported section names:
hero,header,footer,pricing,features,testimonials,faq, andcta. Without a section, extraction defaults to the hero. - Response fields: generated
code; where applicable, acssstring; asectionsarray with labels and selectors; design tokens; athemevalue; and extraction diagnostics such assummary.styledCoverageandhint. - Framework-specific output: JSX and Vue can represent repeated items as data arrays rendered with
.map()orv-for. HTML returns markup with a companion CSS string. Elementor returns a complete template JSON incode; Shopify returns a complete Liquid section incodeand usescss: nullbecause styles are included in the file. - Files and integration: Elementor output is saved as
.json; Shopify output belongs insections/<name>.liquid. Tailwind, JSX, and Vue responses may include@keyframesincss; add those rules to the project’s global stylesheet or animations may not run. - Metadata: The skill is named
clone-section, describes website-section reconstruction, and declaresMIROMIRO_API_KEYas its primary environment variable. It lists the MiroMiro API as its homepage.
Clone Section Advanced Features
- Section discovery: The API returns other extractable sections with human-readable labels and ready-to-use selectors; use these instead of guessing CSS selectors.
- Browser-rendered extraction: Retry with
render: truewhen JavaScript-rendered content or runtime styling limits static extraction. This costs 5 additional credits and is intended as a retry rather than the default. - Theme selection: Request
theme: "dark"when appropriate and check the returnedthemefield. Sites whose theme is controlled purely by JavaScript may not support this selection. - Framework-aware output: Repeated JSX and Vue structures are represented as reusable templates and data; Elementor and Shopify receive complete, styled importable files.
- Scoped styles and animations: Elementor and Shopify styles are scoped to avoid theme clashes. For Tailwind, JSX, and Vue, move any returned
@keyframesinto the global stylesheet. - Design-token handoff: Use the returned section-specific design tokens in the project theme rather than hardcoding colors when the project supports tokens.
- Extraction diagnostics: Review
summary.styledCoverageand anyhintto decide whether static extraction is sufficient or a browser-rendered retry is needed.
SKILL.md
Loading
Related Openclaw Skills
Extract Assets
Extract Assets finds and returns images, SVGs, video, audio, and Lottie animation assets discovered on a live webpage.
Match Brand
Match Brand extracts a real website’s visual identity and design tokens so you can build new interfaces that fit its style.
SuperLocalMemory
SuperLocalMemory gives OpenClaw a private, on-device memory it can recall across sessions to retain project decisions, preferences, and useful facts.
Whiteboard
Whiteboard lets you and an AI coding agent create, inspect, and iteratively refine persistent local Excalidraw diagrams.
Website Section to Elementor Template
Convert a section of a live website into a styled, import-ready Elementor template for WordPress.
Website to Shopify Liquid Section
Convert a live website section into a complete, responsive Shopify theme section built with Liquid.
Featured*
