Skip to main content

A complete System

Sonde

A developer System with the product recessed below a flat page.

Sonde was made by hand by the DesignPrompts team. With Pro you get its whole tree: the finished page as a React and Tailwind project, its components, SEO in place, its DESIGN.md, the prompts and five agent skills, every asset with its rights, and the proof.

Get the System with ProOpen the page
Full codebase
React and Tailwind
5 agent skills
to make it yours
Measured proof
in its PROOF.md

What you get

sonde/

  • src/the page and its components
  • prompts/the build workflow
  • .agents/skills/five agent skills
  • public/fonts, images, share image
  • index.htmlSEO in place
  • DESIGN.mdthe System's contract
  • PROOF.mdcontrast and weight
  • README.mdrun, deploy, rights
Sonde, the first screen of its page

Just this System

Buy Sonde on its own.

One payment brings you its whole package.

$19one-time payment

Works with any AI agent

  • Claude Code
  • Codex
  • Cursor
  • Copilot
  • Windsurf

and any agent that reads its skills and prompts

Beautiful. Functional. Ready to build.

More than a page.

A System is the codebase behind its page: the page and its source, the components it is built from, the contract that keeps it consistent, and the prompts and skills your coding agent needs to make the next page in the same System.

  • A finished page, ready at every width
  • Components wired to the System's tokens
  • SEO in place, and the System's own DESIGN.md
  • Prompts and five agent skills for your coding agent
  • Every asset with its rights, and the proof

DESIGN.md

  1. 01Character
  2. 02Tokens
  3. 03Type
  4. 04Mechanisms in this codebase
  5. 05Motion
  6. 06Forbidden
  7. 07Voice
  8. 08Owners

Tokens and type

  • #151a19
  • #f1f2f0
  • #44d4e2

Familjen Grotesk

Display face · Familjen Grotesk 600

Every width

Built for 1440 and 390, and every width between.

What ships

screens
10
sections
6
page
1
skills
5

Inside the Sonde page.

Every section the page carries, in order.

6 sectionsProduction ready
  1. 01From the count to the cause.
  2. 02Thirty days. Every event.
  3. 03An alert is a saved query.
  4. 04It holds when production doesn’t.
  5. 05On call, the query stays open.
  6. 06Start with one service.

Built for builders

Start further along.

Skip the blank page. Start from a System made by hand, and let your coding agent do the heavy lifting.

A developer System with the product recessed below a flat page.

One System.Every page you make.

  • Save hours

    No more guessing what to build.

  • Learn by example

    Read how the finished page is built, file by file.

  • Make it your own

    Five skills to tailor it without losing its character.

Ready to build?

Get Sonde with Pro.

One Pro licence brings you its whole tree, and every other System in the Gallery.

Get the System with Pro