A skill is a named design move — make it editorial, add glass cards, add a WebGL background. Pick one from the Quick remix menu on any library card or in the remix editor and it is applied in one click.
Issue 01Aa Quiet
Make it editorial
Type
Magazine voice: a high-contrast serif, generous measure, hairline rules and quiet colour.
What it does
Make the page read like a magazine. Set headlines and large numerals in a high-contrast serif at a large size with tight tracking; set body copy in a clean sans at a comfortable measure of about 62 characters. Add hairline rules between sections, small-caps labels for eyebrows, and wide, even margins. Keep colour to near-black on warm off-white (or its inverse), with the accent used once per screen. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
Frosted, translucent cards that sit over a soft colour field.
What it does
Turn the page's cards into frosted glass: a translucent fill, a backdrop blur, a one-pixel light border and a soft inner highlight on the top edge. Put a slow, blurred colour field behind them so the glass has something to refract, and keep text contrast at AA or better on the glass. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
A flowing GPU shader behind the hero, with a still fallback and reduced-motion support.
What it does
Put a full-bleed WebGL shader behind the hero as a flowing colour field drawn from the page's own palette. Render it on a canvas behind the content, pause it when it leaves the viewport, honour prefers-reduced-motion by drawing one still frame, and give it a plain gradient fallback if WebGL is unavailable. The content stays above it and fully legible. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
Re-lay the feature list as an asymmetric bento grid with hover lift.
What it does
Re-lay the features section as a bento grid: tiles of different spans on a shared gutter, one large lead tile and smaller supporting ones, equal radius, a gentle lift on hover. On a narrow screen collapse to one column in reading order. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
The headline lands word by word, once, and stays readable without motion.
What it does
Reveal the main headline word by word as the page loads, each word rising into place on a short stagger, then holding still. Without motion (prefers-reduced-motion, or scripts off) the full headline simply appears. Leave every other heading static. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
Northern-lights light curtains over a starfield, hero-ready.
What it does
Replace the hero background with a slow aurora: soft vertical light curtains in the page's palette over a faint starfield on a deep ground. The headline and call to action sit above it with full contrast. Provide a still fallback and respect reduced motion. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
A domain-warped flow that moves like liquid, not stacked gradients.
What it does
Give the hero a liquid background: a domain-warped noise field that folds through itself slowly, in two or three tones from the page's palette, with no visible banding. Keep it behind the content, pause it off-screen and show a still frame under reduced motion. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
A Stripe- and Linear-style four-point mesh blend, perpetually drifting.
What it does
Add a four-point mesh gradient behind the hero and the closing call to action, blending the page's accent with two neighbouring hues and the ground colour, drifting slowly. Content stays crisp above it. Keep every word of copy, the order of the sections, the links and the page's purpose exactly as they are.
One molten, reflective metal accent as the page's single showpiece.
Used 0 times
Halftone print texture
Surface
Subscription
An editorial dot screen over a moving gradient, print-grade.
Used 0 times
Topographic line-work
Surface
Subscription
Contour lines of flowing noise — designer-grade line texture.
Used 0 times
Spotlight cursor glow
Motion
Subscription
A soft glow follows the pointer across a section.
Used 0 times
Magnetic call to action
Motion
Subscription
The main button drifts toward the pointer as it nears.
Used 0 times
Tilt the cards
Motion
Subscription
Cards tilt in 3D toward the cursor with a light glow.
Used 0 times
Count up the numbers
Motion
Subscription
Stats animate from zero to their value when scrolled into view.
Used 0 times
Scroll progress bar
Motion
Subscription
A thin accent bar at the top tracks how far the reader has scrolled.
Used 0 times
Marquee band
Motion
Subscription
An infinite scrolling text band between sections.
Used 0 times
Dark mode first
Colour
Subscription
Re-ground the page in a dense indigo dark with one bright accent.
Used 0 times
Issue 01Aa Quiet
Warm terracotta and serif
Colour
Subscription
Cream paper, terracotta accent and a warm serif — human and hospitable.
Used 0 times
Fintech calm
Colour
Subscription
A trustworthy indigo palette with dense, precise layout.
Used 0 times
Issue 01Aa Quiet
Friendly notebook
Colour
Subscription
A hand-made, notebook feel: soft paper, rounded shapes, approachable type.
Used 0 times
Loud green night
Colour
Subscription
A black ground with one loud green — confident and high-energy.
Used 0 times
Fresnel sphere hero
Depth
Subscription
A displaced 3D sphere with a glowing rim behind the headline.
Used 0 times
Glass orb centrepiece
Depth
Subscription
A dark glass sphere with internal glow as the hero's centrepiece.
Used 0 times
Particle field depth
Depth
Subscription
A field of connected particles that leans toward the cursor.
Used 0 times
Noise tunnel depth
Depth
Subscription
An endless soft tunnel scrolling inward behind the hero.
Used 0 times
Border beam cards
Motion
Subscription
A comet of light runs around each card's border.
Used 0 times
Shimmer call to action
Motion
Subscription
A band of light crosses the main button, faster on hover.
Used 0 times
Text scramble reveal
Motion
Subscription
Key lines resolve out of random glyphs, each letter settling in turn.
Used 0 times
Skeleton loading shimmer
Motion
Subscription
Placeholder blocks with a sweeping highlight while content loads.
Used 0 times
Tighten the type scale
Type
Subscription
One modular scale, fewer sizes, clearer hierarchy.
Used 0 times
More white space
Layout
Subscription
Open the layout: larger section padding, a shared spacing scale, calmer density.
Used 0 times
Accent, sparingly
Colour
Subscription
Use the accent colour only for the one action and the one highlight per screen.
Used 0 times
Use only the DESIGN.md tokens
Colour
Subscription
Replace every hard-coded colour, size, radius and shadow with the design system's tokens.
Used 0 times
Your saved skills.
Skills are reusable recipes — a brief plus inspirations plus optional starter DESIGN.md, saved once and applied to any project. Build a skill the first time you nail a generation, apply it forever after.
You haven't saved any skills yet.
Generate something you love (DESIGN.md or landing page) → click Save as skill.