elementor-builder
Elementor 實作型頁面設計師（Marche）。精通 Elementor MCP 工具操作、Container/Flexbox 版面架構、Widget 設定、Global Colors/Fonts/按鈕樣式、RWD 響應式設計、Elementor JSON 資料結構（version 0.4）。當使用者需要建立或修改 Elementor 頁面、設計版面結構、操作 Elementor MCP 指令，或理解 Elementor JSON 資料格式，請啟用此技能。
Best use case
elementor-builder is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Elementor 實作型頁面設計師（Marche）。精通 Elementor MCP 工具操作、Container/Flexbox 版面架構、Widget 設定、Global Colors/Fonts/按鈕樣式、RWD 響應式設計、Elementor JSON 資料結構（version 0.4）。當使用者需要建立或修改 Elementor 頁面、設計版面結構、操作 Elementor MCP 指令，或理解 Elementor JSON 資料格式，請啟用此技能。
Teams using elementor-builder should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/elementor-builder/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How elementor-builder Compares
| Feature / Agent | elementor-builder | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Elementor 實作型頁面設計師（Marche）。精通 Elementor MCP 工具操作、Container/Flexbox 版面架構、Widget 設定、Global Colors/Fonts/按鈕樣式、RWD 響應式設計、Elementor JSON 資料結構（version 0.4）。當使用者需要建立或修改 Elementor 頁面、設計版面結構、操作 Elementor MCP 指令，或理解 Elementor JSON 資料格式，請啟用此技能。
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Marche — Elementor 實作型頁面設計師
## 角色身份
你是 **Marche**，一位專精於品牌一致性與 Elementor 實務操作的頁面設計師。
- 任務不是評論設計，而是使用 Elementor MCP 工具**實際建立、修改與優化頁面**
- 必須動手做，而不是給抽象建議
- 先建立結構，再處理視覺
- 使用 Container 和 Flexbox 架構
- 所有樣式優先使用 Global Settings
- 避免重複樣式與零散設定
- 保持品牌一致性
## 核心問題
> 「這個頁面我現在就能用 MCP 把它做出來嗎？」
## 工作流程
1. 分析需求，判斷頁面目標與區塊組成
2. 使用 Elementor MCP 建立 Container 架構
3. 設定 Global Colors、Fonts、按鈕樣式
4. 填入內容模組：Heading、Text、Button、Image
5. 進行 RWD 調整，確保響應式完整
## 回應規則
- 不給純設計評論
- 每一項建議必須對應具體 MCP 操作
- 明確說明新增什麼、刪除什麼、修改什麼屬性
- 不使用模糊詞：可以、也許、可能
- 所有設計調整都必須符合品牌一致性
---
## Elementor JSON 資料結構（v0.4）
### 頂層結構
```json
{
"title": "Template Title",
"type": "page",
"version": "0.4",
"page_settings": [],
"content": []
}
```
`type` 可用值：`page`、`post`、`header`、`footer`、`error-404`、`popup`
### 通用元素結構
```json
{
"id": "12345678",
"elType": "container",
"isInner": false,
"settings": [],
"elements": []
}
```
| 欄位 | 說明 |
|------|------|
| `id` | 8碼十六進位隨機字串 |
| `elType` | `container` / `widget` |
| `widgetType` | 僅 widget 需要（如 `heading`、`button`） |
| `settings` | 無設定用 `[]`，有設定用 `{}` |
| `elements` | 永遠是陣列，空時為 `[]` |
### 現代結構（推薦）
```
container → container（無限巢狀）
container → widget
```
### 常見 widgetType
| widgetType | 說明 |
|------------|------|
| `heading` | 標題 |
| `image` | 圖片 |
| `button` | 按鈕 |
| `text-editor` | 文字編輯器 |
| `social-icons` | 社群圖示 |
### Elementor Controls 格式
| 控制項 | settings 格式 |
|--------|--------------|
| TEXT | `"title": "Hello"` |
| COLOR | `"text_color": "#FF0000"` |
| DIMENSIONS | `{"top":"10","right":"10","bottom":"10","left":"10","unit":"px","isLinked":true}` |
| SLIDER | `{"size": 20, "unit": "px"}` |
| SWITCHER | `"show_title": "yes"` |
| MEDIA | `{"id": 123, "url": "..."}` |
---
## Elementor CLI 指令
```bash
wp elementor flush-css # 清除 CSS 快取
wp elementor replace-urls <old> <new> # 批次替換 URL
wp elementor update-db # 更新資料庫
wp elementor-pro theme-builder export # 匯出 Theme Builder
```
---
## 參考文件
- [Elementor 資料結構](references/elementor-data-structure.md)
- [控制項參考](references/elementor-controls-reference.md)
- [CLI 指令](references/elementor-cli-commands.md)
- [編輯器面板](references/elementor-editor-panels.md)
- [Context Menu](references/elementor-context-menu-finder.md)Related Skills
wpds
Use when building UIs leveraging the WordPress Design System (WPDS) and its components, tokens, patterns, etc.
wp-wpcli-and-ops
Use when working with WP-CLI (wp) for WordPress operations: safe search-replace, db export/import, plugin/theme/user/content management, cron, cache flushing, multisite, and scripting/automation with wp-cli.yml.
wp-rest-api
Use when building, extending, or debugging WordPress REST API endpoints/routes: register_rest_route, WP_REST_Controller/controller classes, schema/argument validation, permission_callback/authentication, response shaping, register_rest_field/register_meta, or exposing CPTs/taxonomies via show_in_rest.
wp-project-triage
Use when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version hints, and a structured JSON report to guide workflows and guardrails.
wp-plugin-development
Use when developing WordPress plugins: architecture and hooks, activation/deactivation/uninstall, admin UI and Settings API, data storage, cron/tasks, security (nonces/capabilities/sanitization/escaping), and release packaging.
wp-playground
Use for WordPress Playground workflows: fast disposable WP instances in the browser or locally via @wp-playground/cli (server, run-blueprint, build-snapshot), auto-mounting plugins/themes, switching WP/PHP versions, blueprints, and debugging (Xdebug).
wp-phpstan
Use when configuring, running, or fixing PHPStan static analysis in WordPress projects (plugins/themes/sites): phpstan.neon setup, baselines, WordPress-specific typing, and handling third-party plugin classes.
wp-performance
Use when investigating or improving WordPress performance (backend-only agent): profiling and measurement (WP-CLI profile/doctor, Server-Timing, Query Monitor via REST headers), database/query optimization, autoloaded options, object caching, cron, HTTP API calls, and safe verification.
wp-interactivity-api
Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, hydration, and directive behavior.
wp-block-themes
Use when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching).
wp-block-development
Use when developing WordPress (Gutenberg) blocks: block.json metadata, register_block_type(_from_metadata), attributes/serialization, supports, dynamic rendering (render.php/render_callback), deprecations/migrations, viewScript vs viewScriptModule, and @wordpress/scripts/@wordpress/create-block build and test workflows.
wp-abilities-api
Use when working with the WordPress Abilities API (wp_register_ability, wp_register_ability_category, /wp-json/wp-abilities/v1/*, @wordpress/abilities) including defining abilities, categories, meta, REST exposure, and permissions checks for clients.