prompt

Spacing System Builder

Builds a consistent spacing scale and rules for applying it across a UI.

VettedUpdated June 2026

The prompt

Build a spacing system for {{product}} based on a {{base_unit}} base unit. Provide the scale (the step values), names or tokens for each step, guidance on which steps to use for tight, default, and section spacing, and one rule for vertical rhythm. Keep it simple enough to remember.

Did it work? Rate this prompt

Variables

productProduct

base_unitBase unit

Example output

Spacing system on a 4px base. Scale: 4, 8, 12, 16, 24, 32, 48, 64. Tokens: space-1 (4) to space-8 (64). Use: 4-8 for tight spacing inside components (icon to label, input padding); 12-16 as the default gap between related elements; 24-32 between distinct groups; 48-64 between page sections. Vertical rhythm rule: stack spacing should always come from the scale — never a one-off value like 13 or 27. This keeps every screen visually consistent and easy to hand off.

Details

Author

AI Khazna

License

—

Security

Vetted

Type

prompt

Related assets

More curated picks in Design & Creative.

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/

Canvas Design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece…★ 4.8 · 2,500+

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui…★ 4.8 · 2,500+

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/

Slack Gif Creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users…★ 4.8 · 2,500+

prompt

Checks color pairs against WCAG contrast rules and suggests accessible fixes.

Accessibility Contrast Checker

Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+

image stylemidjourneydall-eflux

Photorealistic architecture renders — exteriors, interiors, urban context.

Architectural Render Style Pack

Photorealistic architecture renders — exteriors, interiors, urban context.0+

prompt

Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.

Dark Mode Palette Adapter

Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

Automated Web Security Scan

security

PageSpeed Analyzer

performance

AI Content Quality Test

arabic content

AI Agent / MCP Server Tester

ai testing

Site Stack Detector

migration

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Readability Score

arabic content

Schema / JSON-LD Builder

ai visibility

AI Cost Calculator

ai testing

Headline Analyzer

arabic content