Dev tools · ~4K tokens

Database Devtools (PlanetScale)

Reads like a database-engineering document that has decided typography is the entire design system: a pure-white canvas, every word set in `ui-monospace` at 1…

AI & Dev Toolsdarkmaximalwarm

Database Devtools (PlanetScale) — AI-built sample

what your AI builds

Reference · your version

Left: the reference.
Right: what your AI builds.

Same prompt. Same model. With this pack attached, the output stays in the aesthetic instead of drifting toward the default.

Database Devtools (PlanetScale) — source

Database Devtools (PlanetScale) — output

What’s in this pack

Everything you need to drop in and build.

Each Magpie pack ships as a self-contained folder. Drop it in your project, paste the README into your AI tool, prompt your site as normal.

STYLE.md
The complete design system as AI-readable instructions. Tokens, type, motion, voice. Tool-agnostic.
Reference screenshots
The source pages we studied, captured at 2x. Use them as moodboard or paste into vision-capable tools.
Tool drop-ins
Pre-written instructions for Cursor, Claude Code, Lovable, v0, Bolt, Replit, Windsurf, Continue, Codex.

db-devtools/STYLE.md

preview

01# Database Devtools (PlanetScale)02> Inspired by PlanetScale (https://planetscale.com)0304## Voice05- Tone: dark, maximal, warm06- Personality: Reads like a database-engineering document that has decided typography is the entire design system: a pure-white canvas, every word set in `ui-monospace` at 1…0708## Tokens09### Colour10- background: #FFFFFF11- surface:    #F7F7F712- ink:        #00000013- accent:     #F3581514- muted:      #7373731516### Type17- display: JetBrains Mono18- body:    Inter19- mono:    JetBrains Mono2021### Spacing22- base unit: 4px23- section: 96 / 160 / 22424- container max: 1320px2526## Motion—— Get the pack to see the rest ——