Build a hand-drawn look for a website

What it does

Inspect a distinctive full-page result, then reuse its tokens, buttons, cards, form controls and inline SVG decorations.

Who it helps

Product designers and frontend developers who want a playful system without stock photography.

How it was made

Models

Claude · Fable 5 — creator-reported

Tools

Claude · AI generation — creator-reported

React and TypeScript · Component system

Tailwind CSS · Tokens and responsive layout

Inline SVG · Original doodles and decoration

1. The preserved prompt defines hand-drawn design principles, tokens, reusable component treatments and responsive rules without citing a clone target.
2. The project centralizes its colours, fonts, shadows and wobbly radii, then builds buttons, cards, fields, tags and SVG scribbles.
3. The result is demonstrated in a fictional Scribbly landing page and recorded demo.

What the person did

Pulkit curated and published the prompt, source, documentation, verification notes and demo. Claude Fable 5 attribution is creator-reported and was not independently authenticated.

What we know

Creator-reported: The project README says it was generated with Claude Fable 5 and identifies its source, components, offline assets and reported 45-check verification.

Access checked — 2026-09-20 · Reviewed the README and prompt, downloaded the 36-second demo and decoded a frame at six seconds. Dependencies were not installed, and the page and reported checks were not run.

Can you use it?

Claude Directory, copyright 2026 Pulkit, MIT. Keep the copyright and permission notice with copies or substantial portions. The preview is a resized frame from the recorded demo. Vendored Kalam and Patrick Hand font files come from Google Fonts; keep their font notices when redistributing them.

About this project

Picked by Made With Models. Added 2026-09-20. Updated 2026-09-20.

Did you use this? Tell us how it went.