网站转 Shopify Liquid 区块

安装指南

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

什么是

此 Openclaw Skills 集成使用 MiroMiro API 检查在线网页、解析其实际 CSS，并以 .liquid 格式生成完整的 Shopify 主题区块文件。它支持常见的网店组件，例如主视觉区块、页眉、页脚、定价表、功能网格、客户评价、常见问题和行动号召。
生成的区块包含独立作用域的 HTML、CSS、响应式行为、悬停样式和 Shopify schema，商家可以通过主题编辑器添加它。Openclaw Skills 用户可以提供 URL 和可选的区块类型，然后将返回的代码保存到主题中，无需手动重建设计。

应用场景

为 Shopify 网店重新创建现有在线网站的主视觉区块。
将定价、功能、客户评价、常见问题、CTA、页眉或页脚区块转换为 Shopify Liquid。
根据参考网站制作网店设计原型。
将商家现有网站中的区块迁移到 Shopify 主题中。
如果初始结果不完整，可通过使用
render=true
重试来提取由 JavaScript 渲染的区块。
如果 Shopify Liquid 不是最终目标，可生成兼容的 Tailwind、HTML、JSX、Vue 或 Elementor 版本。

工作原理

收集源 URL，以及可选的所需区块类型：hero、header、footer、pricing、features、testimonials、faq 或 cta。
使用 URL、framework: "shopify" 和所选 section 调用已连接的 extract_code 工具，或使用授权 bearer token 调用 MiroMiro REST API。
检查响应，包括完整的 code 字段和 sections 中列出的已发现区块。后续提取时使用提供的选择器；切勿猜测 CSS 选择器。
如果结果内容较少或包含 hint，请对同一 URL 使用 render=true 重试一次，以便执行客户端 JavaScript。渲染会额外消耗 5 个点数，首次请求时不应使用。
完整提供 .liquid 文件，不做任何修改，并使用描述性文件名，例如 sections/stripe-pricing.liquid。
通过 Shopify 管理后台添加该文件，或将其放入本地主题仓库，然后使用主题编辑器或 Shopify CLI 预览。
建议商家在发布前，将复制的文本、徽标和图片替换为自己拥有的内容。

配置指南

在 https://miromiro.app/api/onboarding 获取 MiroMiro API key。免费方案每月包含 300 个点数，无需信用卡。切勿编造或泄露用户的 key。
在环境中设置 key：
export MIROMIRO_API_KEY="your_api_key"
通过 REST API 请求 Shopify 区块：
curl -s "https://miromiro.app/api/v1/code?url=allbirds.com&section=hero&framework=shopify" \ -H "Authorization: Bearer $MIROMIRO_API_KEY" 将返回的 code 值保存为主题 sections 目录下的完整文件，例如 sections/source-hero.liquid。
在 Shopify 管理后台中，打开 Online Store → Themes → 主题菜单 → Edit code，选择 sections 文件夹，新增区块，粘贴完整文件并保存。
打开 Customize，选择目标页面，选择 Add section，然后选取生成的区块。
不要将输出粘贴到 Custom Liquid 区块中：该区块上限为 50 KB，且无法包含区块 schema。
使用 Shopify CLI 进行本地开发时，将文件写入 sections/.liquid 并运行：
shopify theme dev
shopify theme push
每次标准提取消耗 25 个点数。渲染重试额外消耗 5 个点数。请参阅 API 文档：https://miromiro.app/api/docs。

数据架构

API 响应和生成的产物围绕以下字段和惯例组织：
字段或文件 用途
url 作为提取来源提供的在线网页。
framework 输出目标；使用 shopify 生成 Liquid 主题区块。
section 请求的组件分类：hero、header、footer、pricing、features、testimonials、faq 或 cta。省略此字段时，默认请求主视觉区块。
render 可选 Boolean；初始结果不完整时，可在重试时启用 JavaScript 渲染。
code 完整的 .liquid 文件，包括带样式的 HTML 区块和 Shopify schema。
css 预期为 null，因为样式已嵌入 Liquid 文件。
sections 已发现的页面区块，以及后续调用可用的选择器。
theme 指明返回的视觉主题，包括可用时请求的深色变体。
hint 诊断提示，可能表明适合进行渲染重试。
生成的文件应保存为 sections/.liquid。输出包含可减少与周围主题冲突的作用域 CSS、响应式和悬停规则，以及一个主要的带样式 HTML 区块。文本和图片嵌入在文件中，应替换为商家自己的素材。将输出格式改为 tailwind、html、jsx、vue 或 elementor 时，必须重新提取。

高级特性

支持 Claude、ChatGPT、Cursor 和 Codex 中已连接的
extract_code
工具，也支持 OpenClaw 和其他代理直接访问 REST API。
自动发现页面中的其他区块并返回可用选择器，无需手动猜测 CSS 选择器。
对动态页面或初始内容较少的页面，可选用
render=true
重试并执行 JavaScript 渲染。
保留源页面中解析出的响应式布局、悬停状态、颜色、字体、间距及其他 CSS 特征。
在 Liquid 文件中生成作用域样式，尽量减少与现有 Shopify 主题的冲突。
当源网站提供深色版本时，可通过
theme: "dark"
提取深色主题。
同一源区块支持多种输出框架，包括 Shopify Liquid、Tailwind、HTML、JSX、Vue 和 Elementor。
同时适用于 Shopify 托管式编辑和本地 Shopify CLI 工作流，可使用
shopify theme dev
shopify theme push
。
点数规则清晰：每次提取消耗 25 个点数，渲染重试额外消耗 5 个点数。

name: shopify-section description: Turn a section of any live website into a Shopify theme section (.liquid) the user adds to their store. Use when the user runs a Shopify store and wants a hero, pricing, header, footer, features, testimonials, FAQ or CTA "like ", or asks for a Liquid section, a Shopify section file or a theme section copied from a website. homepage: https://miromiro.app/api/website-to-shopify-section-api