Skip to main content

Turn a screenshot, URL or HTML into a real page

Hand the assistant a screenshot, a live URL, pasted HTML or a Figma frame and ask for the page. With a builder skill installed the run always takes the same shape, and you get a say at two points in it.

  1. Design direction. Before anything is built, colour roles, type, spacing rhythm and the layout sequence are settled, along with the generic defaults to refuse. Switch the NibWP Design skill off if you would rather skip this.
  2. Preflight. One round of questions per session: your brand class prefix, which page or post the build goes into, and how to insert it — append, replace a section, or a new page. What is already on the site is detected first, so you are only asked what is missing, and answers like the brand prefix are remembered for next time.
  3. Dry run. The skill builds the component and validates it without saving anything. Failures come back with a reason. Improvements come back as recommendations — repeated cards offered as a loop over a custom post type instead of ten static copies, a raw video embed swapped for a real embed block.
  4. Save. Only after validation passes and you have answered the recommendations. Nothing is written to your site before this step.
  5. Feedback. A thumbs up or down is recorded against the run, so later builds on this site start from what worked.

How to steer it:

  • Name the target page in your first message and you skip a preflight question.
  • Ask for the dry run only if you just want the validation report.
  • To change something afterwards, describe the change — the skill edits the existing component rather than rebuilding the page.

Full guide: How to: install & use Pro Skills