Docs · Integrations

Turning a design into a page

Ask the AI agent to build a pulled frame with your page builder.

Converting happens in conversation, not on a settings screen. That way the same design can become an Etch section, an Elementor page or core blocks, depending on what you need at the time.

Before you start

  • 1Connect your AI client to this site: NibWP, then Connect.
  • 2Pull at least one frame so there is something to work from.
  • 3Make sure the skill for your builder is enabled under NibWP, then Skills.

Ask in plain language

These all work. The agent understands intent. There is no fixed syntax.

  • 1Build @figma/hero-section as a new page with Etch.
  • 2Use the colors and typography from @figma/homepage on my site.
  • 3What Figma frames do I have pulled?
  • 4Take the hero from @figma/homepage, but make the button green.

What NibWP does

  • 1Reads the cached structure and design tokens for that frame.
  • 2Establishes the token system first, so the build references variables instead of hardcoded values.
  • 3Detects which builder your site runs and hands the design to that builder own validated pipeline.
  • 4Saves the result as a draft for you to review.

NibWP always creates a draft and never overwrites a published page.

If the result is not perfect

Tell the agent what to change and it will rebuild. Designs that rely on absolute positioning, fonts your site does not have, or effects with no CSS equivalent are reported as warnings rather than silently approximated.

Connect your first agent.

Follow the quickstart, or book a demo and we'll walk you through it.