[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-webflow-webflow-mcpdesigner-tools":3,"mdc-emo6gi-key":40,"related-org-webflow-webflow-mcpdesigner-tools":1822,"related-repo-webflow-webflow-mcpdesigner-tools":2009},{"slug":4,"name":5,"fn":6,"description":7,"org":8,"tags":12,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":35,"sourceUrl":38,"mdContent":39},"webflow-mcpdesigner-tools","webflow-mcp:designer-tools","build and manage Webflow Designer elements","Build and manage pages, elements, components, and styles 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, styling elements, or managing component properties. Building, styling, and inspecting run headlessly against an explicit page ID — no Designer connection needed. Designer is required for `designer_tool` actions (reading\u002Fswitching the page open on canvas, interactively selecting an element, creating page folders, opening a component's canvas view) and for `element_snapshot_tool` visual previews.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},"webflow","Webflow","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwebflow.png",[13,17,18,21,24],{"name":14,"slug":15,"type":16},"Web Development","web-development","tag",{"name":10,"slug":9,"type":16},{"name":19,"slug":20,"type":16},"UI Components","ui-components",{"name":22,"slug":23,"type":16},"Frontend","frontend",{"name":25,"slug":26,"type":16},"Design","design",107,"https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills","2026-07-21T05:37:24.630186",null,17,[33,34],"agent","skills",{"repoUrl":28,"stars":27,"forks":31,"topics":36,"description":37},[33,34],"Official Webflow Agent Skills","https:\u002F\u002Fgithub.com\u002Fwebflow\u002Fwebflow-skills\u002Ftree\u002FHEAD\u002Fplugins\u002Fwebflow-skills\u002Fskills\u002Fdesigner-tools","---\nname: webflow-mcp:designer-tools\ndescription: Build and manage pages, elements, components, and styles 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, styling elements, or managing component properties. Building, styling, and inspecting run headlessly against an explicit page ID — no Designer connection needed. Designer is required for `designer_tool` actions (reading\u002Fswitching the page open on canvas, interactively selecting an element, creating page folders, opening a component's canvas view) and for `element_snapshot_tool` visual previews.\nmcp-version: 2.0.1\n---\n\n# Page Structure\n\nBuild, inspect, and manage page elements and components in the Webflow Designer.\n\n## Important Note\n\n**ALWAYS use Webflow MCP tools for all operations:**\n- Use Webflow MCP's `webflow_guide_tool` to get best practices **before any other tool call**\n- Use Webflow MCP's `data_sites_tool` with action `list_sites` to identify the target site\n- Use Webflow MCP's `data_pages_tool` with action `list_pages` to find the target page by name or slug — headless, works against any page\n- Use Webflow MCP's `data_pages_tool` with action `create_page` to create new pages — headless\n- Use Webflow MCP's `data_element_tool` with action `get_all_elements` or `query_elements` to retrieve or filter page elements — headless, pass the page's ID directly\n- Use Webflow MCP's `data_element_builder` to create new elements — headless, pass the page's ID and a parent element ID\n- Use Webflow MCP's `data_element_tool` with action `set_attributes`, `set_text`, `set_style`, or `set_link` to modify elements — headless\n- Use Webflow MCP's `element_snapshot_tool` to get visual previews of elements before and after changes — this is a Designer tool and requires a Designer connection\n- Use Webflow MCP's `data_style_tool` to create and update styles on elements — headless\n- Use Webflow MCP's `webflow_guide_tool` to check supported style properties\n- Use Webflow MCP's `data_component_tool` with action `get_all_components` or `query_components` to list site components — headless\n- Use Webflow MCP's `data_component_tool` with action `get_component` to inspect a component's metadata — headless\n- Use Webflow MCP's `data_element_tool` scoped with `scope_component_id` to inspect or edit a component's internal elements (its \"content\") — headless\n- Use Webflow MCP's `data_component_props_tool` to manage prop definitions and set prop values on component instances — headless\n- Use Webflow MCP's `data_component_variants_tool` to manage variants and per-variant style overrides — headless\n- Use Webflow MCP's `data_component_tool` with action `insert_component_instance` or `unlink_component_instance` to manage component instances on a page — headless, not Designer-gated\n- Use Webflow MCP's `designer_tool` only for actions that need a live canvas: `get_current_page`\u002F`switch_page` (what's open in Designer right now), `select_element`\u002F`get_selected_element` (interactive canvas selection), `create_page_folder` (page folders are Designer-only, unlike page creation itself), and `open_component_view` (viewing a component's canvas)\n- DO NOT use any other tools or methods for Webflow operations\n- All tool calls must include the required `context` parameter (15-25 words, third-person perspective)\n- **Designer connection is required for `designer_tool` actions and for `element_snapshot_tool`.** Building, styling, inspecting, and updating elements, components, props, and variants (the `data_` tools) runs headlessly against an explicit page ID from `data_pages_tool`'s `list_pages` — but the before\u002Fafter visual snapshots this skill relies on for safe mutation need Designer open and connected. If Designer isn't available, skip the snapshot steps and rely on `query_elements` output to describe changes instead.\n\n## Instructions\n\n### Phase 1: Discovery\n1. **Call `webflow_guide_tool` first** — always the first MCP tool call in any workflow\n2. **Get the site**: Use `data_sites_tool` with action `list_sites` to identify the target site. If only one site exists, use it automatically.\n3. **Get the target page**: Use `data_pages_tool` with action `list_pages` to find the page by name or slug — no Designer connection needed. If the user is actively working in an open Designer session and wants \"the page I have open,\" use `designer_tool` with action `get_current_page` instead.\n4. **If user specifies a different page**: Just use that page's ID directly in later calls — no page \"switch\" is needed for headless operations. Only use `designer_tool` with action `switch_page` if the user wants the Designer canvas itself to navigate there.\n5. **Identify the task type**:\n   - **Inspect**: List elements, view structure, preview → go to Phase 2\n   - **Build\u002FModify\u002FDelete**: Add, update, restructure, remove → go to Phase 3\n   - **Components**: List, inspect, update → go to Phase 2 or Phase 3 depending on read vs write\n\n### Phase 2: Inspection (read-only operations)\n6. **List page elements**: Use `data_element_tool` with `get_all_elements` (or `query_elements` to filter by type\u002Ftext\u002Fattribute) to retrieve page structure, passing the page ID from Phase 1. Present a summary of sections, elements, and nesting.\n7. **Preview elements**: Use `element_snapshot_tool` to get visual previews of specific sections — requires Designer\n8. **List components**: Use `data_component_tool` with action `get_all_components` or `query_components` to list all site components\n9. **Inspect a component**: Use `data_component_tool` with action `get_component` for metadata (props, variants), or `data_element_tool` with `scope_component_id` set to the component's ID to inspect its internal elements\n\n### Phase 3: Planning (before any mutation)\nBefore creating, updating, or deleting anything:\n10. **Snapshot current state**: Use `element_snapshot_tool` to capture the area being changed — requires Designer; if unavailable, describe the current state from `query_elements` output instead\n11. **Present the plan**: Describe exactly what will be created, modified, or deleted\n12. **Request explicit confirmation**: Ask the user before proceeding:\n    - \"Would you like me to proceed with these changes?\"\n    - \"Shall I go ahead and create this?\"\n    - \"Do you want me to apply these changes?\"\n    - \"Before I make changes, here's what I'll do: [plan]. Confirm to proceed.\"\n13. **For destructive operations** (delete, restructure): Require \"confirm\" or \"delete\", warn about child elements that will also be affected\n\n### Phase 4: Execution (after confirmation only)\n14. **Build elements**: Use `data_element_builder` to create new elements (max 3 levels deep), passing the page ID and the parent element ID. For deeper structures, build in multiple passes.\n15. **Style elements**: Use `data_style_tool` to apply or update styles on created or existing elements\n16. **Modify elements**: Use `data_element_tool` with `set_attributes`, `set_text`, `set_style`, or `set_link` to update attributes, text, or links\n17. **Update components**: Use `data_element_tool` (scoped with `scope_component_id`) to edit a component's internal elements; `data_component_props_tool` to change prop definitions or instance prop values; `data_component_variants_tool` to manage variants; `data_component_tool` with `insert_component_instance`\u002F`unlink_component_instance` to add or unlink instances on a page\n18. **Create pages**: Use `data_pages_tool` with action `create_page`. To create a page **folder**, use `designer_tool` with action `create_page_folder` — this specific action requires a Designer connection\n\n### Phase 5: Verification\n19. **Snapshot the result**: Use `element_snapshot_tool` to capture the new state — requires Designer; if unavailable, summarize the change from the tool response instead\n20. **Report what changed**: Summarize the changes made\n\n## Examples\n\n### Example 1: List page elements\n\n**User:** \"Show me all elements on the homepage\"\n\n1. Call `webflow_guide_tool` for best practices\n2. Call `data_sites_tool` with `list_sites` to identify the site\n3. Call `data_pages_tool` with `list_pages` to find the homepage's page ID\n4. Call `data_element_tool` with `get_all_elements` (using that page ID) to retrieve page structure\n5. Present organized summary of sections, elements, and nesting\n\n### Example 2: Build a hero section\n\n**User:** \"Add a hero section with a heading and CTA button\"\n\n1. Call `webflow_guide_tool` for best practices\n2. Call `data_sites_tool` with `list_sites` to identify the site\n3. Call `data_pages_tool` with `list_pages` to find the target page's ID\n4. Call `element_snapshot_tool` to capture current state\n5. Present plan: \"I'll create a Section with a Heading and Button. Would you like me to proceed?\"\n6. After confirmation: call `data_element_builder` with nested structure\n7. Call `data_style_tool` to apply styles (padding, background, typography)\n8. Call `element_snapshot_tool` to show the result\n\n### Example 3: Update a component\n\n**User:** \"Update the footer copyright text to 2026\"\n\n1. Call `webflow_guide_tool` for best practices\n2. Call `data_sites_tool` with `list_sites` to identify the site\n3. Call `data_component_tool` with `query_components` to find the footer component\n4. Call `data_element_tool` (scoped with `scope_component_id`) to inspect its internal elements and find the copyright text element\n5. Present: \"I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?\"\n6. After confirmation: call `data_element_tool` with `set_text` (scoped with `scope_component_id`)\n7. Report the change\n\n### Example 4: Restructure a section\n\n**User:** \"Restructure the hero section layout\"\n\n1. Call `webflow_guide_tool` for best practices\n2. Call `data_sites_tool` with `list_sites` to identify the site\n3. Call `data_pages_tool` with `list_pages` to find the target page's ID\n4. Call `element_snapshot_tool` to capture current hero section\n5. Call `data_element_tool` with `query_elements` to inspect current structure\n6. Present restructuring plan with before\u002Fafter description\n7. After confirmation: apply changes using `data_element_tool` (`move_element`, `set_style`, etc.) and\u002For `data_element_builder`\n8. Call `element_snapshot_tool` to show the result\n\n### Example 5: Create a two-column layout\n\n**User:** \"Create a two-column layout with text on left and image on right\"\n\n1. Call `webflow_guide_tool` for best practices\n2. Call `data_sites_tool` with `list_sites` to identify the site\n3. Call `data_pages_tool` with `list_pages` to find the target page's ID\n4. Call `element_snapshot_tool` to capture current state\n5. Present plan: \"I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?\"\n6. After confirmation: call `data_element_builder` with grid structure\n7. Call `data_style_tool` to set grid layout properties\n8. Call `element_snapshot_tool` to show the result\n\n## Guidelines\n\n- **`webflow_guide_tool` always first** — before any other MCP tool in every workflow\n- **Snapshot before and after** — use `element_snapshot_tool` before mutations and after to show results\n- **Never silently mutate** — every write operation requires explicit user confirmation\n- **Headless for building and editing** — get the page ID once via `data_pages_tool`'s `list_pages`, then pass it directly to `data_element_tool`, `data_element_builder`, and `data_style_tool`. Reach for `designer_tool` only when the task specifically needs the live canvas (current-page detection, interactive selection, page folders, component canvas view).\n- **Visual snapshots need Designer** — `element_snapshot_tool` is a Designer tool; if Designer isn't connected, fall back to describing changes from `query_elements`\u002Ftool response data instead of skipping the before\u002Fafter check entirely.\n- **Batch changes need itemized preview** — if modifying multiple elements, list each change\n- Prefer Webflow's native layout tools (Grid, Flexbox) over manual positioning\n- Components shared across pages should be updated via `data_element_tool` scoped to the component (changes propagate to all instances)\n- Component instance management (`insert_component_instance`, `unlink_component_instance`) is headless via `data_component_tool` — not Designer-gated\n- `data_element_builder` supports max 3 levels per call — build deeper structures in stages\n- Check `webflow_guide_tool` for supported style properties when unsure\n",{"data":41,"body":43},{"name":5,"description":7,"mcp-version":42},"2.0.1",{"type":44,"children":45},"root",[46,55,61,68,77,515,521,528,673,679,792,798,852,858,1032,1038,1068,1074,1080,1090,1160,1166,1175,1271,1277,1286,1382,1388,1397,1516,1522,1531,1623,1629],{"type":47,"tag":48,"props":49,"children":51},"element","h1",{"id":50},"page-structure",[52],{"type":53,"value":54},"text","Page Structure",{"type":47,"tag":56,"props":57,"children":58},"p",{},[59],{"type":53,"value":60},"Build, inspect, and manage page elements and components in the Webflow Designer.",{"type":47,"tag":62,"props":63,"children":65},"h2",{"id":64},"important-note",[66],{"type":53,"value":67},"Important Note",{"type":47,"tag":56,"props":69,"children":70},{},[71],{"type":47,"tag":72,"props":73,"children":74},"strong",{},[75],{"type":53,"value":76},"ALWAYS use Webflow MCP tools for all operations:",{"type":47,"tag":78,"props":79,"children":80},"ul",{},[81,101,121,140,158,185,197,238,250,262,273,299,317,336,348,360,385,444,449,462],{"type":47,"tag":82,"props":83,"children":84},"li",{},[85,87,94,96],{"type":53,"value":86},"Use Webflow MCP's ",{"type":47,"tag":88,"props":89,"children":91},"code",{"className":90},[],[92],{"type":53,"value":93},"webflow_guide_tool",{"type":53,"value":95}," to get best practices ",{"type":47,"tag":72,"props":97,"children":98},{},[99],{"type":53,"value":100},"before any other tool call",{"type":47,"tag":82,"props":102,"children":103},{},[104,105,111,113,119],{"type":53,"value":86},{"type":47,"tag":88,"props":106,"children":108},{"className":107},[],[109],{"type":53,"value":110},"data_sites_tool",{"type":53,"value":112}," with action ",{"type":47,"tag":88,"props":114,"children":116},{"className":115},[],[117],{"type":53,"value":118},"list_sites",{"type":53,"value":120}," to identify the target site",{"type":47,"tag":82,"props":122,"children":123},{},[124,125,131,132,138],{"type":53,"value":86},{"type":47,"tag":88,"props":126,"children":128},{"className":127},[],[129],{"type":53,"value":130},"data_pages_tool",{"type":53,"value":112},{"type":47,"tag":88,"props":133,"children":135},{"className":134},[],[136],{"type":53,"value":137},"list_pages",{"type":53,"value":139}," to find the target page by name or slug — headless, works against any page",{"type":47,"tag":82,"props":141,"children":142},{},[143,144,149,150,156],{"type":53,"value":86},{"type":47,"tag":88,"props":145,"children":147},{"className":146},[],[148],{"type":53,"value":130},{"type":53,"value":112},{"type":47,"tag":88,"props":151,"children":153},{"className":152},[],[154],{"type":53,"value":155},"create_page",{"type":53,"value":157}," to create new pages — headless",{"type":47,"tag":82,"props":159,"children":160},{},[161,162,168,169,175,177,183],{"type":53,"value":86},{"type":47,"tag":88,"props":163,"children":165},{"className":164},[],[166],{"type":53,"value":167},"data_element_tool",{"type":53,"value":112},{"type":47,"tag":88,"props":170,"children":172},{"className":171},[],[173],{"type":53,"value":174},"get_all_elements",{"type":53,"value":176}," or ",{"type":47,"tag":88,"props":178,"children":180},{"className":179},[],[181],{"type":53,"value":182},"query_elements",{"type":53,"value":184}," to retrieve or filter page elements — headless, pass the page's ID directly",{"type":47,"tag":82,"props":186,"children":187},{},[188,189,195],{"type":53,"value":86},{"type":47,"tag":88,"props":190,"children":192},{"className":191},[],[193],{"type":53,"value":194},"data_element_builder",{"type":53,"value":196}," to create new elements — headless, pass the page's ID and a parent element ID",{"type":47,"tag":82,"props":198,"children":199},{},[200,201,206,207,213,215,221,222,228,230,236],{"type":53,"value":86},{"type":47,"tag":88,"props":202,"children":204},{"className":203},[],[205],{"type":53,"value":167},{"type":53,"value":112},{"type":47,"tag":88,"props":208,"children":210},{"className":209},[],[211],{"type":53,"value":212},"set_attributes",{"type":53,"value":214},", ",{"type":47,"tag":88,"props":216,"children":218},{"className":217},[],[219],{"type":53,"value":220},"set_text",{"type":53,"value":214},{"type":47,"tag":88,"props":223,"children":225},{"className":224},[],[226],{"type":53,"value":227},"set_style",{"type":53,"value":229},", or ",{"type":47,"tag":88,"props":231,"children":233},{"className":232},[],[234],{"type":53,"value":235},"set_link",{"type":53,"value":237}," to modify elements — headless",{"type":47,"tag":82,"props":239,"children":240},{},[241,242,248],{"type":53,"value":86},{"type":47,"tag":88,"props":243,"children":245},{"className":244},[],[246],{"type":53,"value":247},"element_snapshot_tool",{"type":53,"value":249}," to get visual previews of elements before and after changes — this is a Designer tool and requires a Designer connection",{"type":47,"tag":82,"props":251,"children":252},{},[253,254,260],{"type":53,"value":86},{"type":47,"tag":88,"props":255,"children":257},{"className":256},[],[258],{"type":53,"value":259},"data_style_tool",{"type":53,"value":261}," to create and update styles on elements — headless",{"type":47,"tag":82,"props":263,"children":264},{},[265,266,271],{"type":53,"value":86},{"type":47,"tag":88,"props":267,"children":269},{"className":268},[],[270],{"type":53,"value":93},{"type":53,"value":272}," to check supported style properties",{"type":47,"tag":82,"props":274,"children":275},{},[276,277,283,284,290,291,297],{"type":53,"value":86},{"type":47,"tag":88,"props":278,"children":280},{"className":279},[],[281],{"type":53,"value":282},"data_component_tool",{"type":53,"value":112},{"type":47,"tag":88,"props":285,"children":287},{"className":286},[],[288],{"type":53,"value":289},"get_all_components",{"type":53,"value":176},{"type":47,"tag":88,"props":292,"children":294},{"className":293},[],[295],{"type":53,"value":296},"query_components",{"type":53,"value":298}," to list site components — headless",{"type":47,"tag":82,"props":300,"children":301},{},[302,303,308,309,315],{"type":53,"value":86},{"type":47,"tag":88,"props":304,"children":306},{"className":305},[],[307],{"type":53,"value":282},{"type":53,"value":112},{"type":47,"tag":88,"props":310,"children":312},{"className":311},[],[313],{"type":53,"value":314},"get_component",{"type":53,"value":316}," to inspect a component's metadata — headless",{"type":47,"tag":82,"props":318,"children":319},{},[320,321,326,328,334],{"type":53,"value":86},{"type":47,"tag":88,"props":322,"children":324},{"className":323},[],[325],{"type":53,"value":167},{"type":53,"value":327}," scoped with ",{"type":47,"tag":88,"props":329,"children":331},{"className":330},[],[332],{"type":53,"value":333},"scope_component_id",{"type":53,"value":335}," to inspect or edit a component's internal elements (its \"content\") — headless",{"type":47,"tag":82,"props":337,"children":338},{},[339,340,346],{"type":53,"value":86},{"type":47,"tag":88,"props":341,"children":343},{"className":342},[],[344],{"type":53,"value":345},"data_component_props_tool",{"type":53,"value":347}," to manage prop definitions and set prop values on component instances — headless",{"type":47,"tag":82,"props":349,"children":350},{},[351,352,358],{"type":53,"value":86},{"type":47,"tag":88,"props":353,"children":355},{"className":354},[],[356],{"type":53,"value":357},"data_component_variants_tool",{"type":53,"value":359}," to manage variants and per-variant style overrides — headless",{"type":47,"tag":82,"props":361,"children":362},{},[363,364,369,370,376,377,383],{"type":53,"value":86},{"type":47,"tag":88,"props":365,"children":367},{"className":366},[],[368],{"type":53,"value":282},{"type":53,"value":112},{"type":47,"tag":88,"props":371,"children":373},{"className":372},[],[374],{"type":53,"value":375},"insert_component_instance",{"type":53,"value":176},{"type":47,"tag":88,"props":378,"children":380},{"className":379},[],[381],{"type":53,"value":382},"unlink_component_instance",{"type":53,"value":384}," to manage component instances on a page — headless, not Designer-gated",{"type":47,"tag":82,"props":386,"children":387},{},[388,389,395,397,403,405,411,413,419,420,426,428,434,436,442],{"type":53,"value":86},{"type":47,"tag":88,"props":390,"children":392},{"className":391},[],[393],{"type":53,"value":394},"designer_tool",{"type":53,"value":396}," only for actions that need a live canvas: ",{"type":47,"tag":88,"props":398,"children":400},{"className":399},[],[401],{"type":53,"value":402},"get_current_page",{"type":53,"value":404},"\u002F",{"type":47,"tag":88,"props":406,"children":408},{"className":407},[],[409],{"type":53,"value":410},"switch_page",{"type":53,"value":412}," (what's open in Designer right now), ",{"type":47,"tag":88,"props":414,"children":416},{"className":415},[],[417],{"type":53,"value":418},"select_element",{"type":53,"value":404},{"type":47,"tag":88,"props":421,"children":423},{"className":422},[],[424],{"type":53,"value":425},"get_selected_element",{"type":53,"value":427}," (interactive canvas selection), ",{"type":47,"tag":88,"props":429,"children":431},{"className":430},[],[432],{"type":53,"value":433},"create_page_folder",{"type":53,"value":435}," (page folders are Designer-only, unlike page creation itself), and ",{"type":47,"tag":88,"props":437,"children":439},{"className":438},[],[440],{"type":53,"value":441},"open_component_view",{"type":53,"value":443}," (viewing a component's canvas)",{"type":47,"tag":82,"props":445,"children":446},{},[447],{"type":53,"value":448},"DO NOT use any other tools or methods for Webflow operations",{"type":47,"tag":82,"props":450,"children":451},{},[452,454,460],{"type":53,"value":453},"All tool calls must include the required ",{"type":47,"tag":88,"props":455,"children":457},{"className":456},[],[458],{"type":53,"value":459},"context",{"type":53,"value":461}," parameter (15-25 words, third-person perspective)",{"type":47,"tag":82,"props":463,"children":464},{},[465,484,486,492,494,499,501,506,508,513],{"type":47,"tag":72,"props":466,"children":467},{},[468,470,475,477,482],{"type":53,"value":469},"Designer connection is required for ",{"type":47,"tag":88,"props":471,"children":473},{"className":472},[],[474],{"type":53,"value":394},{"type":53,"value":476}," actions and for ",{"type":47,"tag":88,"props":478,"children":480},{"className":479},[],[481],{"type":53,"value":247},{"type":53,"value":483},".",{"type":53,"value":485}," Building, styling, inspecting, and updating elements, components, props, and variants (the ",{"type":47,"tag":88,"props":487,"children":489},{"className":488},[],[490],{"type":53,"value":491},"data_",{"type":53,"value":493}," tools) runs headlessly against an explicit page ID from ",{"type":47,"tag":88,"props":495,"children":497},{"className":496},[],[498],{"type":53,"value":130},{"type":53,"value":500},"'s ",{"type":47,"tag":88,"props":502,"children":504},{"className":503},[],[505],{"type":53,"value":137},{"type":53,"value":507}," — but the before\u002Fafter visual snapshots this skill relies on for safe mutation need Designer open and connected. If Designer isn't available, skip the snapshot steps and rely on ",{"type":47,"tag":88,"props":509,"children":511},{"className":510},[],[512],{"type":53,"value":182},{"type":53,"value":514}," output to describe changes instead.",{"type":47,"tag":62,"props":516,"children":518},{"id":517},"instructions",[519],{"type":53,"value":520},"Instructions",{"type":47,"tag":522,"props":523,"children":525},"h3",{"id":524},"phase-1-discovery",[526],{"type":53,"value":527},"Phase 1: Discovery",{"type":47,"tag":529,"props":530,"children":531},"ol",{},[532,549,572,607,630],{"type":47,"tag":82,"props":533,"children":534},{},[535,547],{"type":47,"tag":72,"props":536,"children":537},{},[538,540,545],{"type":53,"value":539},"Call ",{"type":47,"tag":88,"props":541,"children":543},{"className":542},[],[544],{"type":53,"value":93},{"type":53,"value":546}," first",{"type":53,"value":548}," — always the first MCP tool call in any workflow",{"type":47,"tag":82,"props":550,"children":551},{},[552,557,559,564,565,570],{"type":47,"tag":72,"props":553,"children":554},{},[555],{"type":53,"value":556},"Get the site",{"type":53,"value":558},": Use ",{"type":47,"tag":88,"props":560,"children":562},{"className":561},[],[563],{"type":53,"value":110},{"type":53,"value":112},{"type":47,"tag":88,"props":566,"children":568},{"className":567},[],[569],{"type":53,"value":118},{"type":53,"value":571}," to identify the target site. If only one site exists, use it automatically.",{"type":47,"tag":82,"props":573,"children":574},{},[575,580,581,586,587,592,594,599,600,605],{"type":47,"tag":72,"props":576,"children":577},{},[578],{"type":53,"value":579},"Get the target page",{"type":53,"value":558},{"type":47,"tag":88,"props":582,"children":584},{"className":583},[],[585],{"type":53,"value":130},{"type":53,"value":112},{"type":47,"tag":88,"props":588,"children":590},{"className":589},[],[591],{"type":53,"value":137},{"type":53,"value":593}," to find the page by name or slug — no Designer connection needed. If the user is actively working in an open Designer session and wants \"the page I have open,\" use ",{"type":47,"tag":88,"props":595,"children":597},{"className":596},[],[598],{"type":53,"value":394},{"type":53,"value":112},{"type":47,"tag":88,"props":601,"children":603},{"className":602},[],[604],{"type":53,"value":402},{"type":53,"value":606}," instead.",{"type":47,"tag":82,"props":608,"children":609},{},[610,615,617,622,623,628],{"type":47,"tag":72,"props":611,"children":612},{},[613],{"type":53,"value":614},"If user specifies a different page",{"type":53,"value":616},": Just use that page's ID directly in later calls — no page \"switch\" is needed for headless operations. Only use ",{"type":47,"tag":88,"props":618,"children":620},{"className":619},[],[621],{"type":53,"value":394},{"type":53,"value":112},{"type":47,"tag":88,"props":624,"children":626},{"className":625},[],[627],{"type":53,"value":410},{"type":53,"value":629}," if the user wants the Designer canvas itself to navigate there.",{"type":47,"tag":82,"props":631,"children":632},{},[633,638,640],{"type":47,"tag":72,"props":634,"children":635},{},[636],{"type":53,"value":637},"Identify the task type",{"type":53,"value":639},":\n",{"type":47,"tag":78,"props":641,"children":642},{},[643,653,663],{"type":47,"tag":82,"props":644,"children":645},{},[646,651],{"type":47,"tag":72,"props":647,"children":648},{},[649],{"type":53,"value":650},"Inspect",{"type":53,"value":652},": List elements, view structure, preview → go to Phase 2",{"type":47,"tag":82,"props":654,"children":655},{},[656,661],{"type":47,"tag":72,"props":657,"children":658},{},[659],{"type":53,"value":660},"Build\u002FModify\u002FDelete",{"type":53,"value":662},": Add, update, restructure, remove → go to Phase 3",{"type":47,"tag":82,"props":664,"children":665},{},[666,671],{"type":47,"tag":72,"props":667,"children":668},{},[669],{"type":53,"value":670},"Components",{"type":53,"value":672},": List, inspect, update → go to Phase 2 or Phase 3 depending on read vs write",{"type":47,"tag":522,"props":674,"children":676},{"id":675},"phase-2-inspection-read-only-operations",[677],{"type":53,"value":678},"Phase 2: Inspection (read-only operations)",{"type":47,"tag":529,"props":680,"children":682},{"start":681},6,[683,713,729,757],{"type":47,"tag":82,"props":684,"children":685},{},[686,691,692,697,699,704,706,711],{"type":47,"tag":72,"props":687,"children":688},{},[689],{"type":53,"value":690},"List page elements",{"type":53,"value":558},{"type":47,"tag":88,"props":693,"children":695},{"className":694},[],[696],{"type":53,"value":167},{"type":53,"value":698}," with ",{"type":47,"tag":88,"props":700,"children":702},{"className":701},[],[703],{"type":53,"value":174},{"type":53,"value":705}," (or ",{"type":47,"tag":88,"props":707,"children":709},{"className":708},[],[710],{"type":53,"value":182},{"type":53,"value":712}," to filter by type\u002Ftext\u002Fattribute) to retrieve page structure, passing the page ID from Phase 1. Present a summary of sections, elements, and nesting.",{"type":47,"tag":82,"props":714,"children":715},{},[716,721,722,727],{"type":47,"tag":72,"props":717,"children":718},{},[719],{"type":53,"value":720},"Preview elements",{"type":53,"value":558},{"type":47,"tag":88,"props":723,"children":725},{"className":724},[],[726],{"type":53,"value":247},{"type":53,"value":728}," to get visual previews of specific sections — requires Designer",{"type":47,"tag":82,"props":730,"children":731},{},[732,737,738,743,744,749,750,755],{"type":47,"tag":72,"props":733,"children":734},{},[735],{"type":53,"value":736},"List components",{"type":53,"value":558},{"type":47,"tag":88,"props":739,"children":741},{"className":740},[],[742],{"type":53,"value":282},{"type":53,"value":112},{"type":47,"tag":88,"props":745,"children":747},{"className":746},[],[748],{"type":53,"value":289},{"type":53,"value":176},{"type":47,"tag":88,"props":751,"children":753},{"className":752},[],[754],{"type":53,"value":296},{"type":53,"value":756}," to list all site components",{"type":47,"tag":82,"props":758,"children":759},{},[760,765,766,771,772,777,779,784,785,790],{"type":47,"tag":72,"props":761,"children":762},{},[763],{"type":53,"value":764},"Inspect a component",{"type":53,"value":558},{"type":47,"tag":88,"props":767,"children":769},{"className":768},[],[770],{"type":53,"value":282},{"type":53,"value":112},{"type":47,"tag":88,"props":773,"children":775},{"className":774},[],[776],{"type":53,"value":314},{"type":53,"value":778}," for metadata (props, variants), or ",{"type":47,"tag":88,"props":780,"children":782},{"className":781},[],[783],{"type":53,"value":167},{"type":53,"value":698},{"type":47,"tag":88,"props":786,"children":788},{"className":787},[],[789],{"type":53,"value":333},{"type":53,"value":791}," set to the component's ID to inspect its internal elements",{"type":47,"tag":522,"props":793,"children":795},{"id":794},"phase-3-planning-before-any-mutation",[796],{"type":53,"value":797},"Phase 3: Planning (before any mutation)",{"type":47,"tag":56,"props":799,"children":800},{},[801,803,808,809,814,816,821,823,828,830,835,837,843,845,850],{"type":53,"value":802},"Before creating, updating, or deleting anything:\n10. ",{"type":47,"tag":72,"props":804,"children":805},{},[806],{"type":53,"value":807},"Snapshot current state",{"type":53,"value":558},{"type":47,"tag":88,"props":810,"children":812},{"className":811},[],[813],{"type":53,"value":247},{"type":53,"value":815}," to capture the area being changed — requires Designer; if unavailable, describe the current state from ",{"type":47,"tag":88,"props":817,"children":819},{"className":818},[],[820],{"type":53,"value":182},{"type":53,"value":822}," output instead\n11. ",{"type":47,"tag":72,"props":824,"children":825},{},[826],{"type":53,"value":827},"Present the plan",{"type":53,"value":829},": Describe exactly what will be created, modified, or deleted\n12. ",{"type":47,"tag":72,"props":831,"children":832},{},[833],{"type":53,"value":834},"Request explicit confirmation",{"type":53,"value":836},": Ask the user before proceeding:\n- \"Would you like me to proceed with these changes?\"\n- \"Shall I go ahead and create this?\"\n- \"Do you want me to apply these changes?\"\n- \"Before I make changes, here's what I'll do: ",{"type":47,"tag":838,"props":839,"children":840},"span",{},[841],{"type":53,"value":842},"plan",{"type":53,"value":844},". Confirm to proceed.\"\n13. ",{"type":47,"tag":72,"props":846,"children":847},{},[848],{"type":53,"value":849},"For destructive operations",{"type":53,"value":851}," (delete, restructure): Require \"confirm\" or \"delete\", warn about child elements that will also be affected",{"type":47,"tag":522,"props":853,"children":855},{"id":854},"phase-4-execution-after-confirmation-only",[856],{"type":53,"value":857},"Phase 4: Execution (after confirmation only)",{"type":47,"tag":529,"props":859,"children":861},{"start":860},14,[862,878,894,934,990],{"type":47,"tag":82,"props":863,"children":864},{},[865,870,871,876],{"type":47,"tag":72,"props":866,"children":867},{},[868],{"type":53,"value":869},"Build elements",{"type":53,"value":558},{"type":47,"tag":88,"props":872,"children":874},{"className":873},[],[875],{"type":53,"value":194},{"type":53,"value":877}," to create new elements (max 3 levels deep), passing the page ID and the parent element ID. For deeper structures, build in multiple passes.",{"type":47,"tag":82,"props":879,"children":880},{},[881,886,887,892],{"type":47,"tag":72,"props":882,"children":883},{},[884],{"type":53,"value":885},"Style elements",{"type":53,"value":558},{"type":47,"tag":88,"props":888,"children":890},{"className":889},[],[891],{"type":53,"value":259},{"type":53,"value":893}," to apply or update styles on created or existing elements",{"type":47,"tag":82,"props":895,"children":896},{},[897,902,903,908,909,914,915,920,921,926,927,932],{"type":47,"tag":72,"props":898,"children":899},{},[900],{"type":53,"value":901},"Modify elements",{"type":53,"value":558},{"type":47,"tag":88,"props":904,"children":906},{"className":905},[],[907],{"type":53,"value":167},{"type":53,"value":698},{"type":47,"tag":88,"props":910,"children":912},{"className":911},[],[913],{"type":53,"value":212},{"type":53,"value":214},{"type":47,"tag":88,"props":916,"children":918},{"className":917},[],[919],{"type":53,"value":220},{"type":53,"value":214},{"type":47,"tag":88,"props":922,"children":924},{"className":923},[],[925],{"type":53,"value":227},{"type":53,"value":229},{"type":47,"tag":88,"props":928,"children":930},{"className":929},[],[931],{"type":53,"value":235},{"type":53,"value":933}," to update attributes, text, or links",{"type":47,"tag":82,"props":935,"children":936},{},[937,942,943,948,950,955,957,962,964,969,971,976,977,982,983,988],{"type":47,"tag":72,"props":938,"children":939},{},[940],{"type":53,"value":941},"Update components",{"type":53,"value":558},{"type":47,"tag":88,"props":944,"children":946},{"className":945},[],[947],{"type":53,"value":167},{"type":53,"value":949}," (scoped with ",{"type":47,"tag":88,"props":951,"children":953},{"className":952},[],[954],{"type":53,"value":333},{"type":53,"value":956},") to edit a component's internal elements; ",{"type":47,"tag":88,"props":958,"children":960},{"className":959},[],[961],{"type":53,"value":345},{"type":53,"value":963}," to change prop definitions or instance prop values; ",{"type":47,"tag":88,"props":965,"children":967},{"className":966},[],[968],{"type":53,"value":357},{"type":53,"value":970}," to manage variants; ",{"type":47,"tag":88,"props":972,"children":974},{"className":973},[],[975],{"type":53,"value":282},{"type":53,"value":698},{"type":47,"tag":88,"props":978,"children":980},{"className":979},[],[981],{"type":53,"value":375},{"type":53,"value":404},{"type":47,"tag":88,"props":984,"children":986},{"className":985},[],[987],{"type":53,"value":382},{"type":53,"value":989}," to add or unlink instances on a page",{"type":47,"tag":82,"props":991,"children":992},{},[993,998,999,1004,1005,1010,1012,1017,1019,1024,1025,1030],{"type":47,"tag":72,"props":994,"children":995},{},[996],{"type":53,"value":997},"Create pages",{"type":53,"value":558},{"type":47,"tag":88,"props":1000,"children":1002},{"className":1001},[],[1003],{"type":53,"value":130},{"type":53,"value":112},{"type":47,"tag":88,"props":1006,"children":1008},{"className":1007},[],[1009],{"type":53,"value":155},{"type":53,"value":1011},". To create a page ",{"type":47,"tag":72,"props":1013,"children":1014},{},[1015],{"type":53,"value":1016},"folder",{"type":53,"value":1018},", use ",{"type":47,"tag":88,"props":1020,"children":1022},{"className":1021},[],[1023],{"type":53,"value":394},{"type":53,"value":112},{"type":47,"tag":88,"props":1026,"children":1028},{"className":1027},[],[1029],{"type":53,"value":433},{"type":53,"value":1031}," — this specific action requires a Designer connection",{"type":47,"tag":522,"props":1033,"children":1035},{"id":1034},"phase-5-verification",[1036],{"type":53,"value":1037},"Phase 5: Verification",{"type":47,"tag":529,"props":1039,"children":1041},{"start":1040},19,[1042,1058],{"type":47,"tag":82,"props":1043,"children":1044},{},[1045,1050,1051,1056],{"type":47,"tag":72,"props":1046,"children":1047},{},[1048],{"type":53,"value":1049},"Snapshot the result",{"type":53,"value":558},{"type":47,"tag":88,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":53,"value":247},{"type":53,"value":1057}," to capture the new state — requires Designer; if unavailable, summarize the change from the tool response instead",{"type":47,"tag":82,"props":1059,"children":1060},{},[1061,1066],{"type":47,"tag":72,"props":1062,"children":1063},{},[1064],{"type":53,"value":1065},"Report what changed",{"type":53,"value":1067},": Summarize the changes made",{"type":47,"tag":62,"props":1069,"children":1071},{"id":1070},"examples",[1072],{"type":53,"value":1073},"Examples",{"type":47,"tag":522,"props":1075,"children":1077},{"id":1076},"example-1-list-page-elements",[1078],{"type":53,"value":1079},"Example 1: List page elements",{"type":47,"tag":56,"props":1081,"children":1082},{},[1083,1088],{"type":47,"tag":72,"props":1084,"children":1085},{},[1086],{"type":53,"value":1087},"User:",{"type":53,"value":1089}," \"Show me all elements on the homepage\"",{"type":47,"tag":529,"props":1091,"children":1092},{},[1093,1104,1121,1138,1155],{"type":47,"tag":82,"props":1094,"children":1095},{},[1096,1097,1102],{"type":53,"value":539},{"type":47,"tag":88,"props":1098,"children":1100},{"className":1099},[],[1101],{"type":53,"value":93},{"type":53,"value":1103}," for best practices",{"type":47,"tag":82,"props":1105,"children":1106},{},[1107,1108,1113,1114,1119],{"type":53,"value":539},{"type":47,"tag":88,"props":1109,"children":1111},{"className":1110},[],[1112],{"type":53,"value":110},{"type":53,"value":698},{"type":47,"tag":88,"props":1115,"children":1117},{"className":1116},[],[1118],{"type":53,"value":118},{"type":53,"value":1120}," to identify the site",{"type":47,"tag":82,"props":1122,"children":1123},{},[1124,1125,1130,1131,1136],{"type":53,"value":539},{"type":47,"tag":88,"props":1126,"children":1128},{"className":1127},[],[1129],{"type":53,"value":130},{"type":53,"value":698},{"type":47,"tag":88,"props":1132,"children":1134},{"className":1133},[],[1135],{"type":53,"value":137},{"type":53,"value":1137}," to find the homepage's page ID",{"type":47,"tag":82,"props":1139,"children":1140},{},[1141,1142,1147,1148,1153],{"type":53,"value":539},{"type":47,"tag":88,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":53,"value":167},{"type":53,"value":698},{"type":47,"tag":88,"props":1149,"children":1151},{"className":1150},[],[1152],{"type":53,"value":174},{"type":53,"value":1154}," (using that page ID) to retrieve page structure",{"type":47,"tag":82,"props":1156,"children":1157},{},[1158],{"type":53,"value":1159},"Present organized summary of sections, elements, and nesting",{"type":47,"tag":522,"props":1161,"children":1163},{"id":1162},"example-2-build-a-hero-section",[1164],{"type":53,"value":1165},"Example 2: Build a hero section",{"type":47,"tag":56,"props":1167,"children":1168},{},[1169,1173],{"type":47,"tag":72,"props":1170,"children":1171},{},[1172],{"type":53,"value":1087},{"type":53,"value":1174}," \"Add a hero section with a heading and CTA button\"",{"type":47,"tag":529,"props":1176,"children":1177},{},[1178,1188,1204,1221,1232,1237,1249,1260],{"type":47,"tag":82,"props":1179,"children":1180},{},[1181,1182,1187],{"type":53,"value":539},{"type":47,"tag":88,"props":1183,"children":1185},{"className":1184},[],[1186],{"type":53,"value":93},{"type":53,"value":1103},{"type":47,"tag":82,"props":1189,"children":1190},{},[1191,1192,1197,1198,1203],{"type":53,"value":539},{"type":47,"tag":88,"props":1193,"children":1195},{"className":1194},[],[1196],{"type":53,"value":110},{"type":53,"value":698},{"type":47,"tag":88,"props":1199,"children":1201},{"className":1200},[],[1202],{"type":53,"value":118},{"type":53,"value":1120},{"type":47,"tag":82,"props":1205,"children":1206},{},[1207,1208,1213,1214,1219],{"type":53,"value":539},{"type":47,"tag":88,"props":1209,"children":1211},{"className":1210},[],[1212],{"type":53,"value":130},{"type":53,"value":698},{"type":47,"tag":88,"props":1215,"children":1217},{"className":1216},[],[1218],{"type":53,"value":137},{"type":53,"value":1220}," to find the target page's ID",{"type":47,"tag":82,"props":1222,"children":1223},{},[1224,1225,1230],{"type":53,"value":539},{"type":47,"tag":88,"props":1226,"children":1228},{"className":1227},[],[1229],{"type":53,"value":247},{"type":53,"value":1231}," to capture current state",{"type":47,"tag":82,"props":1233,"children":1234},{},[1235],{"type":53,"value":1236},"Present plan: \"I'll create a Section with a Heading and Button. Would you like me to proceed?\"",{"type":47,"tag":82,"props":1238,"children":1239},{},[1240,1242,1247],{"type":53,"value":1241},"After confirmation: call ",{"type":47,"tag":88,"props":1243,"children":1245},{"className":1244},[],[1246],{"type":53,"value":194},{"type":53,"value":1248}," with nested structure",{"type":47,"tag":82,"props":1250,"children":1251},{},[1252,1253,1258],{"type":53,"value":539},{"type":47,"tag":88,"props":1254,"children":1256},{"className":1255},[],[1257],{"type":53,"value":259},{"type":53,"value":1259}," to apply styles (padding, background, typography)",{"type":47,"tag":82,"props":1261,"children":1262},{},[1263,1264,1269],{"type":53,"value":539},{"type":47,"tag":88,"props":1265,"children":1267},{"className":1266},[],[1268],{"type":53,"value":247},{"type":53,"value":1270}," to show the result",{"type":47,"tag":522,"props":1272,"children":1274},{"id":1273},"example-3-update-a-component",[1275],{"type":53,"value":1276},"Example 3: Update a component",{"type":47,"tag":56,"props":1278,"children":1279},{},[1280,1284],{"type":47,"tag":72,"props":1281,"children":1282},{},[1283],{"type":53,"value":1087},{"type":53,"value":1285}," \"Update the footer copyright text to 2026\"",{"type":47,"tag":529,"props":1287,"children":1288},{},[1289,1299,1315,1332,1349,1354,1377],{"type":47,"tag":82,"props":1290,"children":1291},{},[1292,1293,1298],{"type":53,"value":539},{"type":47,"tag":88,"props":1294,"children":1296},{"className":1295},[],[1297],{"type":53,"value":93},{"type":53,"value":1103},{"type":47,"tag":82,"props":1300,"children":1301},{},[1302,1303,1308,1309,1314],{"type":53,"value":539},{"type":47,"tag":88,"props":1304,"children":1306},{"className":1305},[],[1307],{"type":53,"value":110},{"type":53,"value":698},{"type":47,"tag":88,"props":1310,"children":1312},{"className":1311},[],[1313],{"type":53,"value":118},{"type":53,"value":1120},{"type":47,"tag":82,"props":1316,"children":1317},{},[1318,1319,1324,1325,1330],{"type":53,"value":539},{"type":47,"tag":88,"props":1320,"children":1322},{"className":1321},[],[1323],{"type":53,"value":282},{"type":53,"value":698},{"type":47,"tag":88,"props":1326,"children":1328},{"className":1327},[],[1329],{"type":53,"value":296},{"type":53,"value":1331}," to find the footer component",{"type":47,"tag":82,"props":1333,"children":1334},{},[1335,1336,1341,1342,1347],{"type":53,"value":539},{"type":47,"tag":88,"props":1337,"children":1339},{"className":1338},[],[1340],{"type":53,"value":167},{"type":53,"value":949},{"type":47,"tag":88,"props":1343,"children":1345},{"className":1344},[],[1346],{"type":53,"value":333},{"type":53,"value":1348},") to inspect its internal elements and find the copyright text element",{"type":47,"tag":82,"props":1350,"children":1351},{},[1352],{"type":53,"value":1353},"Present: \"I'll update the copyright text from '2025' to '2026'. Would you like me to proceed?\"",{"type":47,"tag":82,"props":1355,"children":1356},{},[1357,1358,1363,1364,1369,1370,1375],{"type":53,"value":1241},{"type":47,"tag":88,"props":1359,"children":1361},{"className":1360},[],[1362],{"type":53,"value":167},{"type":53,"value":698},{"type":47,"tag":88,"props":1365,"children":1367},{"className":1366},[],[1368],{"type":53,"value":220},{"type":53,"value":949},{"type":47,"tag":88,"props":1371,"children":1373},{"className":1372},[],[1374],{"type":53,"value":333},{"type":53,"value":1376},")",{"type":47,"tag":82,"props":1378,"children":1379},{},[1380],{"type":53,"value":1381},"Report the change",{"type":47,"tag":522,"props":1383,"children":1385},{"id":1384},"example-4-restructure-a-section",[1386],{"type":53,"value":1387},"Example 4: Restructure a section",{"type":47,"tag":56,"props":1389,"children":1390},{},[1391,1395],{"type":47,"tag":72,"props":1392,"children":1393},{},[1394],{"type":53,"value":1087},{"type":53,"value":1396}," \"Restructure the hero section layout\"",{"type":47,"tag":529,"props":1398,"children":1399},{},[1400,1410,1426,1442,1453,1470,1475,1506],{"type":47,"tag":82,"props":1401,"children":1402},{},[1403,1404,1409],{"type":53,"value":539},{"type":47,"tag":88,"props":1405,"children":1407},{"className":1406},[],[1408],{"type":53,"value":93},{"type":53,"value":1103},{"type":47,"tag":82,"props":1411,"children":1412},{},[1413,1414,1419,1420,1425],{"type":53,"value":539},{"type":47,"tag":88,"props":1415,"children":1417},{"className":1416},[],[1418],{"type":53,"value":110},{"type":53,"value":698},{"type":47,"tag":88,"props":1421,"children":1423},{"className":1422},[],[1424],{"type":53,"value":118},{"type":53,"value":1120},{"type":47,"tag":82,"props":1427,"children":1428},{},[1429,1430,1435,1436,1441],{"type":53,"value":539},{"type":47,"tag":88,"props":1431,"children":1433},{"className":1432},[],[1434],{"type":53,"value":130},{"type":53,"value":698},{"type":47,"tag":88,"props":1437,"children":1439},{"className":1438},[],[1440],{"type":53,"value":137},{"type":53,"value":1220},{"type":47,"tag":82,"props":1443,"children":1444},{},[1445,1446,1451],{"type":53,"value":539},{"type":47,"tag":88,"props":1447,"children":1449},{"className":1448},[],[1450],{"type":53,"value":247},{"type":53,"value":1452}," to capture current hero section",{"type":47,"tag":82,"props":1454,"children":1455},{},[1456,1457,1462,1463,1468],{"type":53,"value":539},{"type":47,"tag":88,"props":1458,"children":1460},{"className":1459},[],[1461],{"type":53,"value":167},{"type":53,"value":698},{"type":47,"tag":88,"props":1464,"children":1466},{"className":1465},[],[1467],{"type":53,"value":182},{"type":53,"value":1469}," to inspect current structure",{"type":47,"tag":82,"props":1471,"children":1472},{},[1473],{"type":53,"value":1474},"Present restructuring plan with before\u002Fafter description",{"type":47,"tag":82,"props":1476,"children":1477},{},[1478,1480,1485,1487,1493,1494,1499,1501],{"type":53,"value":1479},"After confirmation: apply changes using ",{"type":47,"tag":88,"props":1481,"children":1483},{"className":1482},[],[1484],{"type":53,"value":167},{"type":53,"value":1486}," (",{"type":47,"tag":88,"props":1488,"children":1490},{"className":1489},[],[1491],{"type":53,"value":1492},"move_element",{"type":53,"value":214},{"type":47,"tag":88,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":53,"value":227},{"type":53,"value":1500},", etc.) and\u002For ",{"type":47,"tag":88,"props":1502,"children":1504},{"className":1503},[],[1505],{"type":53,"value":194},{"type":47,"tag":82,"props":1507,"children":1508},{},[1509,1510,1515],{"type":53,"value":539},{"type":47,"tag":88,"props":1511,"children":1513},{"className":1512},[],[1514],{"type":53,"value":247},{"type":53,"value":1270},{"type":47,"tag":522,"props":1517,"children":1519},{"id":1518},"example-5-create-a-two-column-layout",[1520],{"type":53,"value":1521},"Example 5: Create a two-column layout",{"type":47,"tag":56,"props":1523,"children":1524},{},[1525,1529],{"type":47,"tag":72,"props":1526,"children":1527},{},[1528],{"type":53,"value":1087},{"type":53,"value":1530}," \"Create a two-column layout with text on left and image on right\"",{"type":47,"tag":529,"props":1532,"children":1533},{},[1534,1544,1560,1576,1586,1591,1602,1613],{"type":47,"tag":82,"props":1535,"children":1536},{},[1537,1538,1543],{"type":53,"value":539},{"type":47,"tag":88,"props":1539,"children":1541},{"className":1540},[],[1542],{"type":53,"value":93},{"type":53,"value":1103},{"type":47,"tag":82,"props":1545,"children":1546},{},[1547,1548,1553,1554,1559],{"type":53,"value":539},{"type":47,"tag":88,"props":1549,"children":1551},{"className":1550},[],[1552],{"type":53,"value":110},{"type":53,"value":698},{"type":47,"tag":88,"props":1555,"children":1557},{"className":1556},[],[1558],{"type":53,"value":118},{"type":53,"value":1120},{"type":47,"tag":82,"props":1561,"children":1562},{},[1563,1564,1569,1570,1575],{"type":53,"value":539},{"type":47,"tag":88,"props":1565,"children":1567},{"className":1566},[],[1568],{"type":53,"value":130},{"type":53,"value":698},{"type":47,"tag":88,"props":1571,"children":1573},{"className":1572},[],[1574],{"type":53,"value":137},{"type":53,"value":1220},{"type":47,"tag":82,"props":1577,"children":1578},{},[1579,1580,1585],{"type":53,"value":539},{"type":47,"tag":88,"props":1581,"children":1583},{"className":1582},[],[1584],{"type":53,"value":247},{"type":53,"value":1231},{"type":47,"tag":82,"props":1587,"children":1588},{},[1589],{"type":53,"value":1590},"Present plan: \"I'll create a Grid with two columns — text block on left, image on right. Would you like me to proceed?\"",{"type":47,"tag":82,"props":1592,"children":1593},{},[1594,1595,1600],{"type":53,"value":1241},{"type":47,"tag":88,"props":1596,"children":1598},{"className":1597},[],[1599],{"type":53,"value":194},{"type":53,"value":1601}," with grid structure",{"type":47,"tag":82,"props":1603,"children":1604},{},[1605,1606,1611],{"type":53,"value":539},{"type":47,"tag":88,"props":1607,"children":1609},{"className":1608},[],[1610],{"type":53,"value":259},{"type":53,"value":1612}," to set grid layout properties",{"type":47,"tag":82,"props":1614,"children":1615},{},[1616,1617,1622],{"type":53,"value":539},{"type":47,"tag":88,"props":1618,"children":1620},{"className":1619},[],[1621],{"type":53,"value":247},{"type":53,"value":1270},{"type":47,"tag":62,"props":1624,"children":1626},{"id":1625},"guidelines",[1627],{"type":53,"value":1628},"Guidelines",{"type":47,"tag":78,"props":1630,"children":1631},{},[1632,1647,1664,1674,1724,1748,1758,1763,1775,1800,1810],{"type":47,"tag":82,"props":1633,"children":1634},{},[1635,1645],{"type":47,"tag":72,"props":1636,"children":1637},{},[1638,1643],{"type":47,"tag":88,"props":1639,"children":1641},{"className":1640},[],[1642],{"type":53,"value":93},{"type":53,"value":1644}," always first",{"type":53,"value":1646}," — before any other MCP tool in every workflow",{"type":47,"tag":82,"props":1648,"children":1649},{},[1650,1655,1657,1662],{"type":47,"tag":72,"props":1651,"children":1652},{},[1653],{"type":53,"value":1654},"Snapshot before and after",{"type":53,"value":1656}," — use ",{"type":47,"tag":88,"props":1658,"children":1660},{"className":1659},[],[1661],{"type":53,"value":247},{"type":53,"value":1663}," before mutations and after to show results",{"type":47,"tag":82,"props":1665,"children":1666},{},[1667,1672],{"type":47,"tag":72,"props":1668,"children":1669},{},[1670],{"type":53,"value":1671},"Never silently mutate",{"type":53,"value":1673}," — every write operation requires explicit user confirmation",{"type":47,"tag":82,"props":1675,"children":1676},{},[1677,1682,1684,1689,1690,1695,1697,1702,1703,1708,1710,1715,1717,1722],{"type":47,"tag":72,"props":1678,"children":1679},{},[1680],{"type":53,"value":1681},"Headless for building and editing",{"type":53,"value":1683}," — get the page ID once via ",{"type":47,"tag":88,"props":1685,"children":1687},{"className":1686},[],[1688],{"type":53,"value":130},{"type":53,"value":500},{"type":47,"tag":88,"props":1691,"children":1693},{"className":1692},[],[1694],{"type":53,"value":137},{"type":53,"value":1696},", then pass it directly to ",{"type":47,"tag":88,"props":1698,"children":1700},{"className":1699},[],[1701],{"type":53,"value":167},{"type":53,"value":214},{"type":47,"tag":88,"props":1704,"children":1706},{"className":1705},[],[1707],{"type":53,"value":194},{"type":53,"value":1709},", and ",{"type":47,"tag":88,"props":1711,"children":1713},{"className":1712},[],[1714],{"type":53,"value":259},{"type":53,"value":1716},". Reach for ",{"type":47,"tag":88,"props":1718,"children":1720},{"className":1719},[],[1721],{"type":53,"value":394},{"type":53,"value":1723}," only when the task specifically needs the live canvas (current-page detection, interactive selection, page folders, component canvas view).",{"type":47,"tag":82,"props":1725,"children":1726},{},[1727,1732,1734,1739,1741,1746],{"type":47,"tag":72,"props":1728,"children":1729},{},[1730],{"type":53,"value":1731},"Visual snapshots need Designer",{"type":53,"value":1733}," — ",{"type":47,"tag":88,"props":1735,"children":1737},{"className":1736},[],[1738],{"type":53,"value":247},{"type":53,"value":1740}," is a Designer tool; if Designer isn't connected, fall back to describing changes from ",{"type":47,"tag":88,"props":1742,"children":1744},{"className":1743},[],[1745],{"type":53,"value":182},{"type":53,"value":1747},"\u002Ftool response data instead of skipping the before\u002Fafter check entirely.",{"type":47,"tag":82,"props":1749,"children":1750},{},[1751,1756],{"type":47,"tag":72,"props":1752,"children":1753},{},[1754],{"type":53,"value":1755},"Batch changes need itemized preview",{"type":53,"value":1757}," — if modifying multiple elements, list each change",{"type":47,"tag":82,"props":1759,"children":1760},{},[1761],{"type":53,"value":1762},"Prefer Webflow's native layout tools (Grid, Flexbox) over manual positioning",{"type":47,"tag":82,"props":1764,"children":1765},{},[1766,1768,1773],{"type":53,"value":1767},"Components shared across pages should be updated via ",{"type":47,"tag":88,"props":1769,"children":1771},{"className":1770},[],[1772],{"type":53,"value":167},{"type":53,"value":1774}," scoped to the component (changes propagate to all instances)",{"type":47,"tag":82,"props":1776,"children":1777},{},[1778,1780,1785,1786,1791,1793,1798],{"type":53,"value":1779},"Component instance management (",{"type":47,"tag":88,"props":1781,"children":1783},{"className":1782},[],[1784],{"type":53,"value":375},{"type":53,"value":214},{"type":47,"tag":88,"props":1787,"children":1789},{"className":1788},[],[1790],{"type":53,"value":382},{"type":53,"value":1792},") is headless via ",{"type":47,"tag":88,"props":1794,"children":1796},{"className":1795},[],[1797],{"type":53,"value":282},{"type":53,"value":1799}," — not Designer-gated",{"type":47,"tag":82,"props":1801,"children":1802},{},[1803,1808],{"type":47,"tag":88,"props":1804,"children":1806},{"className":1805},[],[1807],{"type":53,"value":194},{"type":53,"value":1809}," supports max 3 levels per call — build deeper structures in stages",{"type":47,"tag":82,"props":1811,"children":1812},{},[1813,1815,1820],{"type":53,"value":1814},"Check ",{"type":47,"tag":88,"props":1816,"children":1818},{"className":1817},[],[1819],{"type":53,"value":93},{"type":53,"value":1821}," for supported style properties when unsure",{"items":1823,"total":2008},[1824,1845,1860,1877,1892,1908,1924,1938,1952,1964,1978,1994],{"slug":1825,"name":1826,"fn":1827,"description":1828,"org":1829,"tags":1830,"stars":27,"repoUrl":28,"updatedAt":1844},"webflow-clicloud","webflow-cli:cloud","deploy applications to Webflow Cloud","Initialize, build, and deploy full-stack Webflow applications to Webflow Cloud hosting. Supports site-attached deploys (linked to an existing Webflow site) and project app deploys (independent project, no existing site required). Use when creating new projects, deploying existing ones, or setting up CI\u002FCD pipelines for Webflow Cloud.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1831,1834,1837,1840,1843],{"name":1832,"slug":1833,"type":16},"CLI","cli",{"name":1835,"slug":1836,"type":16},"Cloud","cloud",{"name":1838,"slug":1839,"type":16},"Deployment","deployment",{"name":1841,"slug":1842,"type":16},"Full-stack","full-stack",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:47.514609",{"slug":1846,"name":1847,"fn":1848,"description":1849,"org":1850,"tags":1851,"stars":27,"repoUrl":28,"updatedAt":1859},"webflow-clicode-component","webflow-cli:code-component","create and deploy Webflow Code Components","Create and deploy reusable React components for Webflow Designer. Configure existing React projects with webflow.json, build and bundle code, validate output, and deploy to workspace using library share. Use when building custom components for designers.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1852,1853,1854,1857,1858],{"name":1832,"slug":1833,"type":16},{"name":1838,"slug":1839,"type":16},{"name":1855,"slug":1856,"type":16},"React","react",{"name":19,"slug":20,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:41.421071",{"slug":1861,"name":1862,"fn":1863,"description":1864,"org":1865,"tags":1866,"stars":27,"repoUrl":28,"updatedAt":1876},"webflow-clidesigner-extension","webflow-cli:designer-extension","build Webflow Designer Extensions","Build Designer Extensions for custom Webflow Designer functionality. Lists available templates, initializes extension projects from templates (default\u002Freact\u002Ftypescript-alt), bundles extensions for upload, and serves locally for development.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1867,1868,1871,1872,1875],{"name":1832,"slug":1833,"type":16},{"name":1869,"slug":1870,"type":16},"Plugin Development","plugin-development",{"name":1855,"slug":1856,"type":16},{"name":1873,"slug":1874,"type":16},"TypeScript","typescript",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:43.853573",{"slug":1878,"name":1879,"fn":1880,"description":1881,"org":1882,"tags":1883,"stars":27,"repoUrl":28,"updatedAt":1891},"webflow-clidevlink","webflow-cli:devlink","export Webflow components to React and Next.js","Export Webflow Designer components to React\u002FNext.js code for external projects. Configure devlink settings in webflow.json, sync design updates with devlink sync, validate generated code, show diffs, and provide integration examples. Use when building with Webflow designs in React\u002FNext.js.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1884,1885,1886,1889,1890],{"name":1832,"slug":1833,"type":16},{"name":22,"slug":23,"type":16},{"name":1887,"slug":1888,"type":16},"Next.js","next-js",{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:40.182468",{"slug":1893,"name":1894,"fn":1895,"description":1896,"org":1897,"tags":1898,"stars":27,"repoUrl":28,"updatedAt":1907},"webflow-clitroubleshooter","webflow-cli:troubleshooter","troubleshoot Webflow CLI issues","Diagnose and fix Webflow CLI issues including installation problems, authentication failures, build errors, and bundle problems. Uses CLI diagnostic flags (--version, --help, --verbose, --debug-bundler) for troubleshooting.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1899,1900,1903,1906],{"name":1832,"slug":1833,"type":16},{"name":1901,"slug":1902,"type":16},"Configuration","configuration",{"name":1904,"slug":1905,"type":16},"Debugging","debugging",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:48.831648",{"slug":1909,"name":1910,"fn":1911,"description":1912,"org":1913,"tags":1914,"stars":27,"repoUrl":28,"updatedAt":1923},"webflow-code-componentcomponent-audit","webflow-code-component:component-audit","audit Webflow Code Component architecture","Audit Webflow Code Components for architecture decisions - prop exposure, state management, slot opportunities, and Shadow DOM compatibility. Focused on Webflow-specific patterns, not generic React best practices.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1915,1918,1921,1922],{"name":1916,"slug":1917,"type":16},"Architecture","architecture",{"name":1919,"slug":1920,"type":16},"Code Analysis","code-analysis",{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:46.277768",{"slug":1925,"name":1926,"fn":1927,"description":1928,"org":1929,"tags":1930,"stars":27,"repoUrl":28,"updatedAt":1937},"webflow-code-componentcomponent-scaffold","webflow-code-component:component-scaffold","scaffold Webflow Code Component boilerplate","Generate new Webflow Code Component boilerplate with React component, definition file, and optional styling. Automatically checks prerequisites and can set up missing config\u002Fdependencies.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1931,1932,1933,1936],{"name":22,"slug":23,"type":16},{"name":1855,"slug":1856,"type":16},{"name":1934,"slug":1935,"type":16},"Templates","templates",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:42.638042",{"slug":1939,"name":1940,"fn":1941,"description":1942,"org":1943,"tags":1944,"stars":27,"repoUrl":28,"updatedAt":1951},"webflow-code-componentconvert-component","webflow-code-component:convert-component","convert React components to Webflow Code Components","Convert an existing React component into a Webflow Code Component. Analyzes TypeScript props, maps to Webflow prop types, generates the .webflow.tsx definition file, and identifies required modifications.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1945,1948,1949,1950],{"name":1946,"slug":1947,"type":16},"Migration","migration",{"name":1855,"slug":1856,"type":16},{"name":1873,"slug":1874,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:52.523608",{"slug":1953,"name":1954,"fn":1955,"description":1956,"org":1957,"tags":1958,"stars":27,"repoUrl":28,"updatedAt":1963},"webflow-code-componentdeploy-guide","webflow-code-component:deploy-guide","deploy Webflow Code Components","Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1959,1960,1961,1962],{"name":1838,"slug":1839,"type":16},{"name":22,"slug":23,"type":16},{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:38.947875",{"slug":1965,"name":1966,"fn":1967,"description":1968,"org":1969,"tags":1970,"stars":27,"repoUrl":28,"updatedAt":1977},"webflow-code-componentlocal-dev-setup","webflow-code-component:local-dev-setup","set up local Webflow Code Component projects","Initialize a new Webflow Code Components project from scratch. Creates project structure, installs dependencies, configures webflow.json, and sets up development environment.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1971,1972,1975,1976],{"name":1901,"slug":1902,"type":16},{"name":1973,"slug":1974,"type":16},"Local Development","local-development",{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},"2026-05-18T06:47:50.062783",{"slug":1979,"name":1980,"fn":1981,"description":1982,"org":1983,"tags":1984,"stars":27,"repoUrl":28,"updatedAt":1993},"webflow-code-componentpre-deploy-check","webflow-code-component:pre-deploy-check","validate Webflow Code Components before deployment","Pre-deployment validation for Webflow Code Components. Checks bundle size, dependencies, prop configurations, SSR compatibility, styling setup, and common issues before running webflow library share.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[1985,1986,1989,1992],{"name":1838,"slug":1839,"type":16},{"name":1987,"slug":1988,"type":16},"QA","qa",{"name":1990,"slug":1991,"type":16},"Validation","validation",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:51.300653",{"slug":1995,"name":1996,"fn":1997,"description":1998,"org":1999,"tags":2000,"stars":27,"repoUrl":28,"updatedAt":2007},"webflow-code-componenttroubleshoot-deploy","webflow-code-component:troubleshoot-deploy","troubleshoot Webflow Code Component deployments","Debug deployment failures for Webflow Code Components. Analyzes error messages, identifies root causes, and provides specific fixes for common issues.",{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2001,2002,2003,2006],{"name":1904,"slug":1905,"type":16},{"name":1838,"slug":1839,"type":16},{"name":2004,"slug":2005,"type":16},"Observability","observability",{"name":10,"slug":9,"type":16},"2026-05-18T06:47:45.057571",28,{"items":2010,"total":2008},[2011,2019,2027,2035,2043,2050,2057],{"slug":1825,"name":1826,"fn":1827,"description":1828,"org":2012,"tags":2013,"stars":27,"repoUrl":28,"updatedAt":1844},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2014,2015,2016,2017,2018],{"name":1832,"slug":1833,"type":16},{"name":1835,"slug":1836,"type":16},{"name":1838,"slug":1839,"type":16},{"name":1841,"slug":1842,"type":16},{"name":10,"slug":9,"type":16},{"slug":1846,"name":1847,"fn":1848,"description":1849,"org":2020,"tags":2021,"stars":27,"repoUrl":28,"updatedAt":1859},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2022,2023,2024,2025,2026],{"name":1832,"slug":1833,"type":16},{"name":1838,"slug":1839,"type":16},{"name":1855,"slug":1856,"type":16},{"name":19,"slug":20,"type":16},{"name":10,"slug":9,"type":16},{"slug":1861,"name":1862,"fn":1863,"description":1864,"org":2028,"tags":2029,"stars":27,"repoUrl":28,"updatedAt":1876},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2030,2031,2032,2033,2034],{"name":1832,"slug":1833,"type":16},{"name":1869,"slug":1870,"type":16},{"name":1855,"slug":1856,"type":16},{"name":1873,"slug":1874,"type":16},{"name":10,"slug":9,"type":16},{"slug":1878,"name":1879,"fn":1880,"description":1881,"org":2036,"tags":2037,"stars":27,"repoUrl":28,"updatedAt":1891},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2038,2039,2040,2041,2042],{"name":1832,"slug":1833,"type":16},{"name":22,"slug":23,"type":16},{"name":1887,"slug":1888,"type":16},{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},{"slug":1893,"name":1894,"fn":1895,"description":1896,"org":2044,"tags":2045,"stars":27,"repoUrl":28,"updatedAt":1907},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2046,2047,2048,2049],{"name":1832,"slug":1833,"type":16},{"name":1901,"slug":1902,"type":16},{"name":1904,"slug":1905,"type":16},{"name":10,"slug":9,"type":16},{"slug":1909,"name":1910,"fn":1911,"description":1912,"org":2051,"tags":2052,"stars":27,"repoUrl":28,"updatedAt":1923},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2053,2054,2055,2056],{"name":1916,"slug":1917,"type":16},{"name":1919,"slug":1920,"type":16},{"name":1855,"slug":1856,"type":16},{"name":10,"slug":9,"type":16},{"slug":1925,"name":1926,"fn":1927,"description":1928,"org":2058,"tags":2059,"stars":27,"repoUrl":28,"updatedAt":1937},{"slug":9,"name":10,"logoUrl":11,"githubOrg":9},[2060,2061,2062,2063],{"name":22,"slug":23,"type":16},{"name":1855,"slug":1856,"type":16},{"name":1934,"slug":1935,"type":16},{"name":10,"slug":9,"type":16}]