Webflow Development

Treat the existing Webflow site as the implementation system and the supplied design as the visual source of truth. Match the design using existing classes, components, assets, responsive patterns, and interactions.

Scope and access

Establish the exact site, page, branch, and source frame before editing. Keep work on the current branch and unpublished unless the user authorizes another target or publishing. Protect shared components and global styles unless the requested change includes their wider effects.

Use the available source-native integration for Figma or Paper. If it cannot access the design, use an available authorized export or explain the missing dependency. Desktop MCP is not required when another native integration provides the necessary design information.

Implementation constraints

Inspect the target and comparable site sections before adding new structures. Reuse the site's utilities for typography, color, containers, spacing, buttons, and layout. Read the actual source design for copy, order, dimensions, assets, crops, and responsive intent.

Create a class only when existing patterns cannot express a required structure, interaction, or responsive adjustment. Use semantic names and shared classes across repeated elements. Keep typography and color on existing utilities. Every new class must be attached to an active element and have a defensible purpose.

Reuse matching site assets. Export missing artwork from the design at an appropriate resolution and import it once. Preserve source SVG artwork when available and match specific design icons. Supply useful alt text.

Sliders, tabs, accordions, forms, and filters are functional requirements. Prefer existing native components and scope custom code to the relevant section. For testimonial sliders, use interaction-checks.md.