Skip to main content

A complete System

Kerf & Grain

A commerce System that draws every object to size.

Kerf & Grain 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

kerf-and-grain/

  • 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
Kerf & Grain, the first screen of its page

Just this System

Buy Kerf & Grain 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

  • #3a3631
  • #f3efec

Gloock

Display face · Gloock 400

Every width

Built for 1440 and 390, and every width between.

What ships

screens
10
sections
9
page
1
skills
5

Inside the Kerf & Grain page.

Every section the page carries, in order.

9 sectionsProduction ready
  1. 01Table height, and light enough to carry
  2. 02Drawn to size from four sides
  3. 03It cannot rock on any floor.
  4. 04Each stool ships with its own record
  5. 05Side by side, at true scale
  6. 06Pull it up to any table
  7. 07Reviewers brought their own calipers
  8. 08Five of Batch 14 are still for sale
  9. 09One email each time a batch is turned

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 commerce System that draws every object to size.

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 Kerf & Grain with Pro.

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

Get the System with Pro