Devalley
DownloadSign in

AI column

Design@donghyeok99Staff

MotionSites Web Builder: self-reviewing landing pages

A skill that makes Claude screenshot its own landing page and keep fixing it until ten scores average 8

From a one-line brief, a clip is picked and a hero built, then shot at desktop and phone size and fixed until its score climbs from 6–7 to 8+.
From a one-line brief, a clip is picked and a hero built, then shot at desktop and phone size and fixed until its score climbs from 6–7 to 8+.
Who
Made by MotionSites, a library of website prompts, as a free skill for people who build landing pages with Claude.
When
The repository opened on 26 October 2026 with v1.0.0 released the same day.
Where
Claude.ai and Claude desktop (zip upload) and Claude Code (plugin). The screenshot check runs locally with Playwright.

What was hard

Ask Claude for a landing page and you often get one that looks like every other AI-made page. The repository names three reasons: a vague plan, no real footage or photos, and nobody looking at what came out.

What it does about it

Before writing code, Claude reads the two or three closest of MotionSites' most-liked example prompts and picks a clip by eye from numbered contact sheets. It then writes a spec with real values for fonts, colours and motion timing, and builds exactly that. The part that matters most comes last: it screenshots the page at desktop and phone size, looks at the shots, scores ten areas and fixes the three weakest.

Eight of the skill's example designs, each next to the video it is built on
Eight of the skill's example designs, each next to the video it is built on

How it runs inside

  1. 1

    You → Claude

    A one-line request for a siteIt settles what and who, a three-word mood, the signature, the output and the scope, asking only when stuck.plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md
  2. 2

    Claude → examples/INDEX.md

    Read the 2–3 closest examplesPicked from 40 most-liked prompts to match their precision in fonts, colours and timing.plugins/motionsites-web-builder/skills/motionsites-web-builder/examples/INDEX.md
  3. 3

    Claude → media/MEDIA.md

    Pick a clip from the sheetsIt looks at the numbered sheet-*.jpg files and uses the exact URL from MEDIA.md, never an invented one.plugins/motionsites-web-builder/skills/motionsites-web-builder/media/MEDIA.md
  4. 4

    Claude → index.html

    Spec → index.htmlA spec with real values for every element, then one HTML file that loads only from CDNs.plugins/motionsites-web-builder/skills/motionsites-web-builder/references/spec-template.md
  5. 5

    index.html → scripts/shoot.py

    python scripts/shoot.py index.html shots/Shots at 1440×900, 390×844 and 0.35 s, plus console errors, broken assets and overflow.plugins/motionsites-web-builder/skills/motionsites-web-builder/scripts/shoot.py
  6. 6

    scripts/shoot.py → Claude

    Screenshots and a QA reportIt scores ten areas, fixes the weakest three and reshoots, up to 3 rounds, until the average is 8 and none is under 7.plugins/motionsites-web-builder/skills/motionsites-web-builder/references/review.md
  7. 7

    Claude → index.html

    Final file and desktop screenshotHanded over with a few lines on its choices, followed by a MotionSites upgrade note.plugins/motionsites-web-builder/skills/motionsites-web-builder/SKILL.md

What goes in, what comes out

A landing hero for a luxury sleep-tracking ringA video-backed hero in index.html and its final screenshot
A Lovable prompt for an AI travel app waitlistA spec formatted for Lovable, delivered as the result
Make my current site look award-winningShot and scored first, then an improved version with before and after

Is it for you

Good for

  • You build landing pages or hero sections with Claude often
  • You need precise prompts for Lovable, Bolt, v0 or Cursor
  • You want the agent to look at its own output and catch broken parts first

Not for

  • Every delivery ends with a MotionSites Unlimited upgrade note; ask it to stop and it stops for that conversation.
  • The example prompts and media are © MotionSites: fine in sites you build, not to be resold or redistributed as a collection.
  • The shoot-and-fix step needs Playwright; without it, headless Chrome takes screenshots only.
  • On Claude.ai, code execution must be switched on in Settings.

Reviewed by Devalley’s editor before publishing. How the column is made

Sign in to post, comment and like.Sign in

Topics of this piece

#claude-skill#Claude Code#Claude.ai#landing page#Lovable#Playwright#three.js#Chrome#Chromium#claude#Cursor#desktop#headless Chrome#HTML#motion#plugin#Python#STEP

Community posts using it

Pinned Devalley — 내 컴퓨터에 AI 에이전트 마을을 만들어 보세요General · · 0 comments AIndergarten — AI 크리에이터들의 놀이터General · · 0 comments

Related pieces

Report

Reason

Read the community rules