# PageSugar prompts

> 5 design prompts for coding agents.
> Each link below is the prompt itself, as plain Markdown: fetch one and paste it into an agent.

Page: https://pagesugar.com/prompts

## Start a project

Scaffolds and first steps, on versions that are current.

- [Start a new SvelteKit site](https://pagesugar.com/prompts/sveltekit-starter-site.md): Scaffold a fresh SvelteKit site on current versions — Svelte 5 runes, Tailwind CSS 4, TypeScript — with a skeleton layout, a design token file, and the PageSugar MCP server connected. (runs on Claude Code, Codex, GitHub Copilot, OpenCode, Cursor)

## Review a design

Find what is wrong with a page by looking at it rendered.

- [Adversarial design review](https://pagesugar.com/prompts/adversarial-design-review.md): Score one screen out of ten against real rendered pixels, using a second model as the adversarial reviewer, then fix what it finds and re-score until the surface stops improving. (runs on Claude Code; needs a second model to act as the reviewer — the Codex MCP server, or the codex exec CLI — plus Playwright for screenshots and a dev server to point it at.)
- [Audit a page across breakpoints](https://pagesugar.com/prompts/responsive-breakpoint-audit.md): Find where a page actually breaks between 320px and 1920px — overflow, collapsed hierarchy, orphaned headings, touch targets — and fix the layout rather than bolting on another breakpoint. (runs on Claude Code, Codex, GitHub Copilot, OpenCode, Cursor)

## Refine what exists

Make working code systematic, accessible and consistent.

- [Extract a design token system](https://pagesugar.com/prompts/design-token-system.md): Replace the scattered hex codes and one-off spacing values in an existing project with a small, named token system in Tailwind 4's @theme — a value-preserving refactor first, with any consolidation proposed separately. (runs on Claude Code, Codex, GitHub Copilot, OpenCode, Cursor)
- [Make an interactive component accessible](https://pagesugar.com/prompts/accessible-component-pass.md): Take a component that works with a mouse and make it work with a keyboard, a screen reader and reduced motion — real focus management and semantics, not a scattering of ARIA attributes. (runs on Claude Code, Codex, GitHub Copilot, OpenCode, Cursor)