Wink Pings

700 Websites' Worth of Experience Packed into One Skill—Can AI Landing Pages Stop Looking Tacky?

An open-source Claude Skill packages 40 examples, 50+ video assets, 55+ motion recipes, and self-screenshot scoring. Don't confuse the boundary between the free package and the paid library.

Another Skill for getting AI to build high-end landing pages has been open-sourced. The author is @viktoroddy, and the project is called MotionSites Web Builder. Its instructions and code are under the MIT license, and once installed into Claude Code, Cursor, or Codex, it can generate landing pages with a cinematic feel and strong motion. It targets a very specific set of problems: purple gradients, three-column cards, and a meaningless line in the hero section. The README attributes look-alike AI websites to three things: vague planning, no real media, and nobody reviewing the result. That diagnosis is more interesting than the motion recipes.

What's in the project: 40 example prompts taken from high-liked free prompts on MotionSites; 50+ cinematic hero videos, 30 transparent 3D cut-outs, and 29 images, placed in a numbered contact sheet so the model can choose visually; 55+ technical recipes covering seamless video loops, liquid glass, word-by-word blur headlines, mouse-scrub video, spotlight reveal, depth carousel, scroll storytelling, and real Three.js 3D models. There is also a set of design-taste rules with concrete numbers: font size, letter spacing, spacing, color, motion duration, and copy. And a spec template: write a precise brief first, then write code.

Skill里的示例设计,旁边是所用的英雄视频

The project demo includes a Feather Atlas page, a kingfisher profile page, with category navigation on the left and, on the right, the scientific name, an introduction, a 360-degree rotation button, a magnifier, and a flight animation. At the very least, you can see that it aims for an editorial feel rather than stacking cards. Video:

The key step comes after generation. The Skill takes its own screenshots, runs a QA script, checks for broken assets, mobile overflow, fonts, and video playback, then scores against a rubric and revises if it doesn't pass. Some users remind you not to forget the self-screenshot scoring step; otherwise it still feels like a template. That reminder matters more than cinematic feel. Others ask whether the motion effects will eat performance. The README gives no frame-rate budget; QA checks broken assets, overflow, fonts, and video playback, not frame rate. You have to test performance yourself on target devices.

Installation: For Claude.ai and desktop, download motionsites-web-builder.zip, upload it via Customize→Skills→+→Create skill→Upload a skill, and turn on Code execution. For Claude Code, use the plugin commands:

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

If you don't have a GitHub SSH key, switch to the HTTPS address. For manual installation, copy plugins/motionsites-web-builder/skills/motionsites-web-builder to ~/.claude/skills/. If you want the model to see its own results, it's best to install Playwright: pip install playwright && python -m playwright install chromium.

The free/paid boundary needs to be clear. The free package contains 40 examples, 50+ videos, 30 3D cut-outs, 29 images, and 55+ recipes. The author's claim of 700+ website design experiences is packaging background; it doesn't mean all 700 templates are free. The complete library is at MotionSites Unlimited, with 500+ premium prompts, 40+ Lovable templates, and MCP. Some users ask whether the free package really has 40 examples, or whether you have to buy Unlimited to get 700. That question deserves an answer first.

Homogenized AI landing pages are not entirely the fault of purple gradients. The process is missing a step where you look at the result and then revise. This Skill puts screenshots and scoring into the loop, which is the right direction. But don't expect to win awards just by installing it; the 40 examples are samples, and copy and first-screen conversion still need human management. Cinematic feel can add points, but if it overshadows conversion copy, the priorities are backward. One user working on a liquor company's campaign page cared more about the first-screen conversion copy; that judgment is closer to business than motion parameters.

Project address: MotionSites Web Builder. Original tweet: Mu Feng's post.

发布时间: 2026-10-27 22:29