Atelier web for Claude Code
English · Français
Atelier web is a Claude Code plugin for designing and building beautiful, high-converting landing pages and web pages that look exactly like the brand they serve. It bundles 10 skills, 6 agents (visual research, parallel section builders, design, brand, conversion and accessibility reviewers), a library of 44 proven landing sections, and a QA step that measures the real render before showing you anything.
It packages the method I use to build my clients’ websites and landing pages. I'm Jessy Martin, a French consultant and trainer who helps marketing teams work with Claude Code and AI agents.
The skills are written in French. Claude builds your pages in any language you ask for.
The problem it solves
Claude Code can build a page in minutes. Left alone, it tends to build the same page every time: a purple gradient, stacked white cards, a default font, made-up numbers, and a render that never gets checked on a phone before it ships.
Atelier web changes three things:
- Brand first. Each project writes its brand doctrine once (colors, fonts, voice, allowed proof points, site components), and every skill reads it before producing anything. Pages look like the site they join.
- A method tested on real pages. Scoping in one round of questions, visual directions named after their signature object, the hero approved first, sections built in parallel, four specialized reviews, then one arbitrated round of fixes.
- Measured QA. Horizontal overflow, contrast, text size floors, a call to action visible without scrolling on mobile, background continuity between sections, reduced motion: all measured at three screen sizes before you see the page.
One factory for every brand
The three pages below come out of the same commands with three different brand doctrines. The brands are fictional; Pexels photos stand in for the photos a real brand would supply (credits).
Browse all 44 sections in the live catalogue.
Install
Requirements: Claude Code (desktop app or terminal), Python 3.11+, and for rendering QA pip install playwright pillow pyyaml && playwright install chromium.
claude plugin marketplace add Littlpinguin/atelier-web
claude plugin install atelier-web@atelier-web
Restart Claude Code. To add the plugins I use alongside it (UI/UX Pro Max, frontend-design, superpowers, and optionally GSAP, Three.js, SEO and Figma), run ./outils-complementaires/installer.sh from a clone of this repository (details in outils-complementaires/README.md, in French).
For a team: add outils-complementaires/settings-projet.json to the project's .claude/settings.json and commit it. Everyone gets the plugin when they open the folder.
Quick start
- Open Claude Code in your website's folder.
- Run
/atelier-web:demarrer-projet-web: Claude reads your site and your content, drafts the brand doctrine, has you approve it block by block, and writes it to atelier/marque/.
- Run
/atelier-web:landing-page for a landing page, /atelier-web:page-web for a page or section on an existing site, or /atelier-web:design to modernize a site that looks dated.
Every deliverable goes through revue (rendering QA) and brand-check before you see it.
What's inside
| Family | Skills |
|---|
| Start | demarrer-projet-web: project brand doctrine and routing |
| Build a page | landing-page (8-phase playbook), page-web (existing site), lead-magnet (tool or guide in exchange for an email) |
| Design | design: visual research before drawing, directions named by their signature object, an execution protocol against the generated look, redesign of an existing site, design tokens |
| Motion | motion: native CSS scroll-driven animations first, GSAP for pinning, anime.js, dotLottie for animated media |
| Conversion | cro: pages, forms, popups, pricing |
| Copy | ecriture: write, review in seven passes, humanize text that sounds generated |
| Quality | revue (measured rendering, interface review, WCAG 2.2 AA accessibility), brand-check |
Each skill keeps its detail in reference files one level below its SKILL.md, read only when the task needs them.
Agents: inspiration-researcher (benchmark and visual research in the background, before a landing page, a page on an existing site, design directions or a redesign), landing-section-builder (one section per agent, in parallel), landing-reviewer-design, landing-reviewer-brand, landing-reviewer-cro, and a11y-auditor (accessibility: measures, code and real render).
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
