Skip to content

Commit 5433b2c

Browse files
yan-xie-nkclaude
yan-xie-nk
and
claude
committed
feat(skills): add webflow-designer-tools plugin with page-structure skill
New plugin covering Webflow Designer page building, element management, and component operations. Registered in both Claude and Cursor marketplace configs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 54ac5df commit 5433b2c

File tree

5 files changed

+165
-2
lines changed

5 files changed

+165
-2
lines changed

‎.claude-plugin/marketplace.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@
3333
},
3434
"source": "./plugins/webflow-cli-skills",
3535
"category": "productivity"
36+
},
37+
{
38+
"name": "webflow-designer-tools",
39+
"description": "Build and manage page structure, elements, and components in Webflow Designer",
40+
"author": {
41+
"name": "Webflow"
42+
},
43+
"source": "./plugins/webflow-designer-tools",
44+
"category": "productivity"
3645
}
3746
]
3847
}

‎.cursor-plugin/marketplace.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
{
88
"name": "webflow",
99
"source": "./",
10-
"description": "Production-ready agent skills for Webflow - CMS management, site auditing, asset optimization, and safe publishing."
10+
"description": "Production-ready agent skills for Webflow - CMS management, site auditing, asset optimization, safe publishing, and Designer page structure tools."
1111
}
1212
]
1313
}

‎.cursor-plugin/plugin.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"skills": [
2525
"plugins/webflow-skills/skills",
2626
"plugins/webflow-code-component-skills/skills",
27-
"plugins/webflow-cli-skills/skills"
27+
"plugins/webflow-cli-skills/skills",
28+
"plugins/webflow-designer-tools/skills"
2829
],
2930
"agents": ["agents"]
3031
}

‎plugins/webflow-designer-tools/.claude-plugin/plugin.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "webflow-designer-tools",
3+
"description": "Webflow Designer tools for building page structure and managing components",
4+
"version": "0.1.0",
5+
"skills": "./skills/"
6+
}

‎plugins/webflow-designer-tools/skills/page-structure/SKILL.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
name: page-structure
3+
description: Build and manage page structure, elements, and components in Webflow Designer. Use when adding sections, creating layouts, building elements, inspecting or updating components, viewing what's inside a component, restructuring pages, creating new pages, previewing page structure, or styling specific elements. Requires Webflow Designer connection.
4+
---
5+
6+
# Page Structure
7+
8+
Build, inspect, and manage page elements and components in the Webflow Designer.
9+
10+
## Important Note
11+
12+
**ALWAYS use Webflow MCP tools for all operations:**
13+
- Use Webflow MCP's `webflow_guide_tool` to get best practices **before any other tool call**
14+
- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify the target site
15+
- Use Webflow MCP's `de_page_tool` to get current page, switch pages, or create pages/folders
16+
- Use Webflow MCP's `element_tool` with action `get_all_elements` to retrieve page elements
17+
- Use Webflow MCP's `element_tool` with action `select_element` to select a specific element
18+
- Use Webflow MCP's `element_tool` with action `add_or_update_attribute` to update element attributes
19+
- Use Webflow MCP's `element_builder` to create new elements (max 3 levels deep)
20+
- Use Webflow MCP's `element_snapshot_tool` to get visual previews of elements before and after changes
21+
- Use Webflow MCP's `style_tool` to create and update styles on elements
22+
- Use Webflow MCP's `de_learn_more_about_styles` to check supported style properties
23+
- Use Webflow MCP's `data_components_tool` with action `list_components` to list all site components
24+
- Use Webflow MCP's `data_components_tool` with action `get_component_content` to inspect a component
25+
- Use Webflow MCP's `data_components_tool` with action `update_component_content` to update component content
26+
- Use Webflow MCP's `data_components_tool` with action `get_component_properties` to get component properties
27+
- Use Webflow MCP's `data_components_tool` with action `update_component_properties` to update component properties
28+
- Use Webflow MCP's `de_component_tool` to manage component instances in the Designer
29+
- DO NOT use any other tools or methods for Webflow operations
30+
- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)
31+
- **Designer connection required** — user must have Webflow Designer open and connected
32+
33+
## Instructions
34+
35+
### Phase 1: Discovery
36+
1. **Call `webflow_guide_tool` first** — always the first MCP tool call in any workflow
37+
2. **Get the site**: Use `data_sites_tool` with action `list_sites` to identify the target site. If only one site exists, use it automatically.
38+
3. **Get current page**: Use `de_page_tool` to identify which page is active in the Designer
39+
4. **If user specifies a different page**: Use `de_page_tool` to switch to it before proceeding
40+
4. **Identify the task type**:
41+
- **Inspect**: List elements, view structure, preview → go to Phase 2
42+
- **Build/Modify/Delete**: Add, update, restructure, remove → go to Phase 3
43+
- **Components**: List, inspect, update → go to Phase 2 or Phase 3 depending on read vs write
44+
45+
### Phase 2: Inspection (read-only operations)
46+
5. **List page elements**: Use `de_page_tool` then `element_tool` with `get_all_elements` to retrieve page structure. Present a summary of sections, elements, and nesting.
47+
6. **Preview elements**: Use `element_snapshot_tool` to get visual previews of specific sections
48+
7. **List components**: Use `data_components_tool` with action `list_components` to list all site components
49+
8. **Inspect a component**: Use `data_components_tool` with action `get_component_content` or `de_component_tool` for Designer instances
50+
51+
### Phase 3: Planning (before any mutation)
52+
Before creating, updating, or deleting anything:
53+
9. **Snapshot current state**: Use `element_snapshot_tool` to capture the area being changed
54+
10. **Present the plan**: Describe exactly what will be created, modified, or deleted
55+
11. **Request explicit confirmation**: Ask the user before proceeding:
56+
- "Would you like me to proceed with these changes?"
57+
- "Shall I go ahead and create this?"
58+
- "Do you want me to apply these changes?"
59+
- "Before I make changes, here's what I'll do: [plan]. Confirm to proceed."
60+
12. **For destructive operations** (delete, restructure): Require "confirm" or "delete", warn about child elements that will also be affected
61+
62+
### Phase 4: Execution (after confirmation only)
63+
13. **Build elements**: Use `element_builder` to create new elements (max 3 levels deep). For deeper structures, build in multiple passes.
64+
14. **Style elements**: Use `style_tool` to apply or update styles on created or existing elements
65+
15. **Modify elements**: Use `element_tool` with `add_or_update_attribute` to update attributes, text, or links
66+
16. **Update components**: Use `data_components_tool` with `update_component_content` or `update_component_properties`. Use `de_component_tool` for Designer-level instance changes.
67+
17. **Create pages**: Use `de_page_tool` to create new pages or folders
68+
69+
### Phase 5: Verification
70+
18. **Snapshot the result**: Use `element_snapshot_tool` to capture the new state
71+
19. **Report what changed**: Summarize the changes made
72+
73+
## Examples
74+
75+
### Example 1: List page elements
76+
77+
**User:** "Show me all elements on the homepage"
78+
79+
1. Call `webflow_guide_tool` for best practices
80+
2. Call `data_sites_tool` with `list_sites` to identify the site
81+
3. Call `de_page_tool` to confirm current page is homepage (switch if needed)
82+
4. Call `element_tool` with `get_all_elements` to retrieve page structure
83+
5. Present organized summary of sections, elements, and nesting
84+
85+
### Example 2: Build a hero section
86+
87+
**User:** "Add a hero section with a heading and CTA button"
88+
89+
1. Call `webflow_guide_tool` for best practices
90+
2. Call `data_sites_tool` with `list_sites` to identify the site
91+
3. Call `de_page_tool` to get current page
92+
4. Call `element_snapshot_tool` to capture current state
93+
4. Present plan: "I'll create a Section with a Heading and Button. Would you like me to proceed?"
94+
5. After confirmation: call `element_builder` with nested structure
95+
6. Call `style_tool` to apply styles (padding, background, typography)
96+
7. Call `element_snapshot_tool` to show the result
97+
98+
### Example 3: Update a component
99+
100+
**User:** "Update the footer copyright text to 2026"
101+
102+
1. Call `webflow_guide_tool` for best practices
103+
2. Call `data_sites_tool` with `list_sites` to identify the site
104+
3. Call `data_components_tool` with `list_components` to find the footer
105+
3. Call `data_components_tool` with `get_component_content` to inspect it
106+
4. Present: "I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?"
107+
5. After confirmation: call `data_components_tool` with `update_component_content`
108+
6. Report the change
109+
110+
### Example 4: Restructure a section
111+
112+
**User:** "Restructure the hero section layout"
113+
114+
1. Call `webflow_guide_tool` for best practices
115+
2. Call `data_sites_tool` with `list_sites` to identify the site
116+
3. Call `de_page_tool` to get current page
117+
3. Call `element_snapshot_tool` to capture current hero section
118+
4. Call `element_tool` to inspect current structure
119+
5. Present restructuring plan with before/after description
120+
6. After confirmation: apply changes using `element_tool` and/or `element_builder`
121+
7. Call `element_snapshot_tool` to show the result
122+
123+
### Example 5: Create a two-column layout
124+
125+
**User:** "Create a two-column layout with text on left and image on right"
126+
127+
1. Call `webflow_guide_tool` for best practices
128+
2. Call `data_sites_tool` with `list_sites` to identify the site
129+
3. Call `de_page_tool` to get current page
130+
3. Call `element_snapshot_tool` to capture current state
131+
4. Present plan: "I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?"
132+
5. After confirmation: call `element_builder` with grid structure
133+
6. Call `style_tool` to set grid layout properties
134+
7. Call `element_snapshot_tool` to show the result
135+
136+
## Guidelines
137+
138+
- **`webflow_guide_tool` always first** — before any other MCP tool in every workflow
139+
- **Snapshot before and after** — use `element_snapshot_tool` before mutations and after to show results
140+
- **Never silently mutate** — every write operation requires explicit user confirmation
141+
- **`de_page_tool` before `element_tool`** — always confirm/switch page before inspecting elements
142+
- **Batch changes need itemized preview** — if modifying multiple elements, list each change
143+
- Prefer Webflow's native layout tools (Grid, Flexbox) over manual positioning
144+
- Components shared across pages should be updated via `data_components_tool` (changes propagate)
145+
- Component instances on a specific page use `de_component_tool`
146+
- `element_builder` supports max 3 levels per call — build deeper structures in stages
147+
- Check `de_learn_more_about_styles` for supported style properties when unsure

0 commit comments

Comments
 (0)