Take the physics home.
Paste any prompt below into an AI builder as-is — the 8dp grid, the elevation shadows, the ripple, and the FAB all come with it.
Design a Material Design website. A visible 8dp grid, a stack of crisply-bordered white card surfaces each at a different explicit elevation (1dp, 4dp, 8dp, 16dp), every elevation rendered as a paired ambient-plus-key-light shadow rather than a single flat shadow, a circular Floating Action Button pinned bottom-right that fires an ink-colored ripple expanding from the exact click point, and a Roboto/Roboto Flex type scale (Display ~34sp, Headline 24sp, Title 20sp, Body 14-16sp, Caption 12sp). Background #FAFAFA, card surfaces #FFFFFF, text #1A1A1A, muted text #5F6368, Indigo #3F51B5 as the primary accent, Pink #FF4081 as the secondary accent, 4px corner radius. No blur, no gradients, no glow — only real, numbered shadow depth.
Best for AI website builders — Lovable, v0, Bolt
Build a Material Design hero: 3-4 white card surfaces arranged on a visible 8dp grid, each card showing a different paired ambient-plus-key-light shadow depth (label each with its dp value, e.g. "1dp", "8dp", "16dp"), a headline in Roboto Flex at roughly 34sp on a #FAFAFA background with #1A1A1A text, an Indigo #3F51B5 pill button, and a circular Pink #FF4081 Floating Action Button in the corner that ripples on click. Hovering any card should visibly deepen its shadow as if it lifted higher off the page.
Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude
Convert my page to Material Design: snap every margin and padding to multiples of 8px, give cards and panels a real paired ambient-plus-key-light shadow scaled to an explicit elevation value instead of one flat box-shadow, add a circular Floating Action Button bottom-right that ripples on click, switch headings to Roboto Flex and body text to Roboto, and restrict the palette to Indigo #3F51B5 as the primary accent and Pink #FF4081 as the secondary accent on a #FAFAFA background with #FFFFFF card surfaces.
Paste alongside your existing site/code for an AI coding agent to apply
Paste any prompt as-is — no edits needed. Add your own brand, copy, or images on top if you want; the prompt already works without them.
Add your own brand name, copy, and images on top of any prompt — it already works without them.
Material Design guide for AI coding agents: - Palette: off-white #FAFAFA background, white #FFFFFF card surfaces, near-black #1A1A1A text, cool gray #5F6368 muted text, Indigo #3F51B5 primary accent, Pink #FF4081 secondary accent, light gray #E0E0E0 borders. - Type: Roboto Flex (display), Roboto (body) — both real Google Fonts. Scale: Display ~34sp, Headline 24sp, Title 20sp, Body 14-16sp, Caption 12sp. - Signature elements: an 8dp baseline grid every spacing value snaps to, discrete card surfaces each at an explicit elevation (1dp/4dp/8dp/16dp+) rendered as a paired ambient+key-light shadow (never one flat shadow), a circular Floating Action Button reserved for the single primary action, an ink-ripple expanding from the exact touch point on click. - Motion: press / lift — hover deepens a card's shadow as it lifts in z, click fires a ripple from the contact point then settles back down. Never glitch, drift, or bounce. - Never: blurred/frosted glass panels, a single fused extruded plane with no separate surfaces, gradients standing in for shadow, more than two accent colors, flat shadows with no elevation differentiation.
Drop this into a project's instructions/skill file for a reusable reference, instead of a one-shot prompt.
Decoration fades. Physics doesn't.