web-builder

PrettySites Web Builder

A free web design skill for Claude, Codex and Cursor

Give your AI builder a clear brief, deliberate typography and one memorable motion idea. The skill guides the work from a written spec to editable frontend code and visual review when browser tools are available.

Download the skill ZIP · Install · Try a brief · Explore PrettySites

Rain Atlas — rain on glass, frosted controls and a working focus timer. Watch the recorded site and explore its kit.

These are real PrettySites catalog previews, shown as design references. They are existing projects, not claimed results generated by this skill.

Install

Claude Code

Run these commands inside Claude Code:

/plugin marketplace add prettysites/web-builder
/plugin install prettysites-web-builder@prettysites

Claude desktop and Claude.ai

1. Download the ZIP.
2. Open Customize → Skills, choose Upload a skill, and select the ZIP.
3. Enable the skill. Code execution and file creation must be enabled in Claude.

Codex and Cursor

Download the ZIP and extract the prettysites-web-builder folder — the folder containing SKILL.md — to:

If you clone the repository, the skill folder is plugins/prettysites-web-builder/skills/prettysites-web-builder. Copy that whole folder, including references and scripts. Open a new chat or restart the agent if the skill does not appear.

Try a brief

After installing, paste this into your agent:

Use PrettySites Web Builder to create a responsive landing-page hero
for a fictional ceramic studio called Forma.

Warm ivory, deep brown and one terracotta accent. Large, readable type.
One memorable motion idea; keep the controls and supporting copy quiet.
Use my project's existing stack, or a standalone index.html for a new project.

Write the design spec, build the page, then inspect desktop and mobile
screenshots with the available approved tools. Fix visible issues and
explain anything you could not verify. Do not invent testimonials or metrics.

In Codex, you can explicitly invoke $prettysites-web-builder. In Claude Code, the plugin skill is /prettysites-web-builder:prettysites-web-builder.

You can also ask for a prompt only for another builder. The skill includes guidance for Lovable, Bolt, v0, Claude Code, Codex, Cursor and Kimi.

More real design references

Liberty Walk F40	ORVA
3D presentation and art direction — Watch the site	Radial navigation and changing atmospheres — Watch the site

Rain Atlas, Liberty Walk F40 and ORVA have Free full-prompt access in the catalog as checked on 27 October 2026. Access and usage limits can change; the separate one-file Source export requires paid access.

See all free example links · Browse the catalog

What the skill includes

• A concrete design spec — type, colours, spacing, copy, breakpoints and motion timings.
• 68 motion recipes with example code — glass, text reveals, depth carousels, Three.js, scroll-driven media and more. These are examples to adapt and check, not a tested component library.
• Media guidance — image/video prompt formulas, posters, MP4 preparation and mobile framing.
• Visual review — desktop, phone and first-paint checks with an approved browser tool or the included Node/Python helpers.
• Builder prompts — a detailed brief when you want a prompt instead of code.

Bring your own assets, use an available generation tool, or choose a typography-led design.

Use the host's approved browser tools when available. Only run local browser automation where your environment permits it.

For the Node helper, install Playwright inside the extracted skill folder so the script can resolve it:

cd /path/to/prettysites-web-builder
npm install --no-save --package-lock=false playwright
npx playwright install chromium
node scripts/qa.mjs http://localhost:5173 shots/

For the Python helper:

python -m pip install playwright
python -m playwright install chromium
python /path/to/prettysites-web-builder/scripts/shoot.py http://localhost:5173 shots/

Replace the skill path and local URL with your own. Open the resulting screenshots; automatic checks do not replace visual inspection.

Keep exploring

PrettySites has recorded website previews, complete build prompts and media. Background Studio lets you pair a moving background with your brand and headline, then export a prompt.

If this skill helped, star the repository and share what you built. For a problem or a suggestion, open an issue.

License

MIT. See LICENSE and NOTICE.

The MIT licence covers this skill's instructions and example code, including the attributed adaptations listed in NOTICE. External libraries and fonts retain their own licences; linked catalog designs and media remain subject to the catalog's usage terms. Free access is not permission to redistribute a prompt or media collection. Preserve required third-party copyright, licence and attribution notices in projects you deliver.

PrettySites Web Builder is independently maintained by PrettySites. References to Claude, Codex, Cursor and other tools describe compatibility and do not imply endorsement by their providers.