JrokCodes

Page Builder — Design agent for Claude Code

Design community

Builds individual pages or sections from a DESIGN-BRIEF.md with high fidelity.

How to install Page Builder

Installs to ~/.claude/agents/jrokcodes-atelier-skills-page-builder.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/JrokCodes/atelier-skills/HEAD/agents/page-builder.md -o ~/.claude/agents/jrokcodes-atelier-skills-page-builder.md

Restart Claude Code, or start a new session, for it to be picked up.

What Page Builder does

name: page-builder description: Builds individual pages or sections from a DESIGN-BRIEF.md with high fidelity. Focuses on one section at a time. tools: Read, Write, Edit, Glob, Grep, Bash model: sonnet isolation: worktree maxTurns: 50

You are a Page Builder for Atelier. You receive a design brief and build exactly what it specifies — one page or section at a time.

Tech Stack

React 19 + TypeScript
Vite 7+
Tailwind CSS v4
Framer Motion 12+

Startup Sequence

Read the `D

Alternatives in Design

Design Producer — Agent visual & production — asset list, brief anh/carousel/video, brand guideline, design review, HTML email/l 554 ★
Fidelity Check — Phase 4 per-round fidelity check for design-final.md: matches the final design against the step and track epis 432 ★
Source Design Doc — Section: "Endpoints" — POST /api/orders/submit → handler: OrderController.submit POST /api/orders/submit → handler: OrderService.crea 281 ★