Page Design Library
Page Designs
46 complete page designs, each one a single self-contained page with its own navigation, hero, sections and footer. Every page ships with a prompt a coding agent can rebuild it from.
46Designs
6Families
35Animated
One page per design, in its own colors. Pick a family to filter.
Every design, three ways
01 Preview
The whole page running in an isolated frame, at desktop, tablet or phone width.
02 HTML
One self-contained file with its styles and behaviour inline, ready to open or fork.
03 Prompt
A written spec that rebuilds the page from scratch: layout, type, palette in both themes, motion, and how it collapses on a phone.
Each design was picked from a hundred AI-built redesigns of this site, then composed into one page from the sections that won review. Need a single piece rather than a whole page? The UI pattern library holds individual interface patterns, each with its own prompt.
Bento Grid Layouts
One board of rounded white, slate, lilac and sage tiles on a cool grey ground, with the nav split into its own floating tiles above a big intro tile, a tall portrait tile and large image tiles. 8 sections bentogridtilesfloating-navlarge-images
Glassmorphism 2.0
Frosted, rim-lit glass panels float over a slowly drifting pastel mesh, under a fixed glass dock nav, with a rounded portrait carrying a glass stat lens at the top. 7 sections · animated glassfrostedmesh-gradientfloating-navpastel
View Transitions API
A warm paper page under a timeline-scrubber nav of numbered frames on a tick-mark ruler, with a large serif headline, an arch-topped portrait and rust accents. 10 sections · animated view-transitionseditorialseriftimeline-navmotion
Paper Notebook
The whole page as one ruled notebook sheet on a kraft desk: punched holes and a double red margin line down the left, a handwritten headline with a yellow highlighter swipe, circled stats, a taped Polaroid portrait, and coloured index tabs sticking out of the sheet's right edge as the nav. 8 sections · animated notebookpaperhandwrittenskeuomorphicindex-tabsscrapbook
Y2K Futurism
A pale platinum page under a floating chrome capsule nav, opening on a metallic-gradient headline, glossy stat pods and a Bondi-blue gel button beside a portrait in a holographic blob ring with orbit lines and sparkles. 8 sections · animated y2kchromegelholographicretro-futurismglossy
Vaporwave / Synthwave
A night-drive synthwave page: a striped neon sun sinks behind a wireframe mountain ridge over a scrolling perspective grid, with a dark glass hero card holding a chrome Orbitron headline, a pink brush-script overlay and a tilted CRT portrait. 8 sections · animated vaporwavesynthwaveneonretrocrtoutrun
Retro OS Desktop
A Windows 95 style desktop on a dotted slate wallpaper: shortcut icons down the left, an overlapping Paint window with the portrait and a Welcome to AJ/OS window with a pixel headline and stats, then Explorer, Control Panel and Properties windows, all above a grey taskbar with a Start button and a clock. 9 sections · animated retrowindows-95desktopospixelnostalgia
Soft Cottagecore
A home page on grainy cream paper with an embroidery-hoop monogram in the header, a serif headline beside the portrait in an arched cottage window, stitched article cards and scalloped bands. 8 sections cottagecorepaperserifhandcraftwarm
Neumorphism Revisited
A soft blue-grey page where everything is extruded from or pressed into one ground: a large raised hero slab with the portrait sunk in a circular well, round stat knobs, raised article cards, inset trays of list rows and pill buttons with visible edges. 9 sections neumorphismsoft-uiextrudedaccessiblemonochrome
Aurora Mesh Gradients
A near-black night-sky page with slow violet, teal and magenta aurora fields drifting behind a glass pill nav, a gradient-ink italic headline and a glowing glass-framed portrait. 9 sections · animated auroragradientdarkglassmesh
Linear-Style Product Aesthetic
A near-black product-site page inside a hairline frame with crosshair marks: a gradient-ink headline over a faded grid and blue glow, then a tilted app-window mockup listing posts as issues with IDs, status checks and coloured collection labels. 10 sections · animated linearproductdarksaashairlinecommand-palette
Hypertext Wiki
A personal-encyclopedia main page on warm off-white paper: a left sidebar with a globe monogram, search and settings, a framed portrait hero, and boxed portal sections whose every internal link opens a nested hover preview card. 9 sections wikihypertextlink-previewsencyclopediaserifsidebar
Broadsheet Newspaper
A broadsheet front page on warm newsprint: folio line, blackletter flag between two ear boxes, a double-ruled section bar, a banner headline over a halftone portrait, and ruled columns of stories below the fold. 8 sections newspapereditorialprintserifgrid
Tactile Card Stack
A kraft-linen table covered in paper cards: a ruled index card with a red header line holds the headline beside a fanned hand of playing cards (20+, 600+, 2012) topped by a portrait card, under a card-catalog tab nav. 7 sections · animated cardstactilepaperskeuomorphicplaying-cardsindex-cards
Index Card Catalog
A library card-catalog home page: an oak cabinet header whose nav items are drawer fronts with brass label holders, a typed main-entry card beside a paperclipped portrait, and trays of ruled catalog cards on a beige desk. 9 sections skeuomorphiclibrarytypewritercardswood
Infinite Canvas
A home page laid out as a design-tool board: a Layers rail with a minimap, a dotted pan-and-zoom canvas holding a framed hero labelled with its pixel dimensions, sticky-note stats, a pinned comment, hand-lettered connector wires and a floating zoom toolbar. 11 sections · animated canvasdesign-toolpan-zoomsticky-notesinteractive
Keyboard-First / Command Palette
A warm cream page drawn in keycaps: a headline with a burnt-orange phrase and keycap stat tiles beside an inline Where to? launcher with a filter input, grouped results with g-chord keys and a live preview pane, above a fixed slate vim-style status line. 8 sections keyboardcommand-palettekeycapslaunchershortcutswarm
Organic Blobs
A warm-paper field guide where photos, stats, buttons and cards are soft asymmetric pebbles in moss, clay, ochre and river slate, under a frosted lopsided-pill nav. 8 sections · animated organicblobsearthyfloating-navserif
Isometric Illustration
A pale isometric-grid page where every card is an extruded block with colored top and side faces, opening on an inline-SVG workshop diorama and later a model city block. 9 sections · animated isometricillustrationsvgextrudedplayful
Layered Depth / Parallax
A cool slate page that descends plane by plane under a white slab menu bar, opening on a parallax diorama of Flatirons ridgelines, a ghost 'AJ' word and an exploded portrait stack. 8 sections · animated depthparallax3dslabsmountains
Gamified / RPG UI
Soft gradient JRPG menu windows on a pale blue field: a dialogue-box headline, a 'Choose your path' command list, a party status card with a portrait and progress bars, then quest-log cards with rarity gems. 8 sections · animated gamifiedrpgplayfulmenu-windowssoft
Museum Exhibition
A plaster-wall gallery page with Didone wall lettering, a gilt-framed portrait under a picture light with a museum placard, a painted floor plan of wings, and posts hung as framed works with tombstone labels. 9 sections museumeditorialserifframesgallery
Photographer Portfolio
A dark gallery-wall page that opens on a full-viewport photo plate with a transparent nav floating over it, a Plate 00 EXIF line, a large light serif headline with an italic phrase, and CTAs plus a mono stat line along a bottom rule. 11 sections photographyportfoliogallerydarkseriffull-bleed
Scandinavian Minimal
A pale oat page under a thin birch rail: a light-weight sans headline beside an arched portrait under a line-drawn pendant lamp, then project cards standing as matted prints on birch planks with tapered brackets, three to a shelf, over a hairline list of more repos. 9 sections scandinavianminimalbirchshelvespastelcalm
Japanese Ma (Negative Space)
Sumi ink on warm kinari paper: a fixed left pillar with a red seal and a vertical kanji gloss, a large serif headline over a faint brushed enso, and sections separated by wide empty pauses. 9 sections · animated minimalnegative-spaceserifjapaneseeditorial
Music Player Metaphor
A home page shaped like a streaming music app: a dark library sidebar with nav, search and album rows, an artist-style full-bleed hero with a big round play button, tracklists and album shelves in the main view, and a fixed player bar along the bottom. 10 sections · animated app-shellmusicsidebardarkmetaphor
Audio-First / Podcast
A warm-paper podcast-network page: a square show-cover portrait with an ON AIR badge and waveform beside a chunky headline, then a wide two-part release card with a blueprint illustration and a dark panel holding a 40 / 5 / 0 stat strip and an orange Browse the library button. 11 sections · animated podcastaudiowaveformepisodeswarmeditorial
Native App Feel (macOS)
A home page dressed as a macOS app: a menu bar with working menus and a clock over a slate wallpaper, one rounded window with traffic lights, a translucent source-list sidebar with count badges and Finder tags, a unified toolbar, and a Welcome sheet over shelves, grouped lists and app icons. 9 sections macosnativeapp-shellsidebarsystem-ui
Split Screen
A permanent 50/50 diptych: a fixed slate-blue identity pane with a desaturated portrait, headline, stats and a live section caption on the left, and a scrolling warm-paper reading pane of posts and projects on the right. 8 sections · animated split-screenlayouteditorialfixed-paneslate
Cosmic / Space
A deep-space page on a fixed starfield with soft nebula glows, a planetary nav on a dashed orbit, and a hero where the portrait is a glowing sun with labelled section planets circling it. 10 sections · animated spacedarkanimatedorbitsstarfield
Glass Filmstrip
Frosted glass run as a strip of film: the floating dock is a timeline reel of six numbered frames on a tick-mark ruler with a rim-lit glass playhead lens on the lit frame, over a portrait hero in a sprocketed film frame and a 'Start here' shelf on a strip of film. 6 sections · animated glassfilmtimelinenavigationplayheadview-transitions
Glass Aurora
Frosted, rim-lit glass panels floating over a fixed aurora of blurred violet, teal, blue and pink blobs with swaying conic ribbons, opened by a huge headline whose last phrase is gradient-ink italic and a rounded portrait under a glass stat strip. 10 sections · animated glassauroragradientfrostedanimated
Glass Orbit
Frosted glass over a quiet starfield, opening on a small solar system: the portrait is a glowing sun under a gold corona, and five frosted planet pills (Writing, AI, Projects, Patterns, About) circle it on dashed orbits beside a glass intro card with stats. 5 sections · animated glassorbitsolar-systemspacestarfieldanimatedlight
Glass Isometric
Frosted glass vitrines over a soft image-tinted mesh, each pairing a glass intro card with an isometric diorama on a frosted plinth: the site as a small city, the writing as a bookcase, and a staircase of buildings with the portrait on the top step. 9 sections · animated glassisometricdioramasvgillustration
Glass Museum
A small glass museum: the headline and a stat strip set as wall text on the left, the portrait hung on the right in a thick frosted-glass vitrine under a smoked-glass picture light that throws a warm cone down the wall, with a tombstone placard pinned below it, followed by a glass floor plan of five wings. 6 sections · animated glassmuseumgallerypicture-lightvitrineplacard
Glass Ma
Frosted glass panels floating at deliberately different columns of a twelve-column field over a soft mesh tinted from the portrait, with a big left-set headline, a tall portrait frame dropped to the right and long empty pauses between sections. 7 sections · animated glassmaasymmetricnegative-spacetwelve-columneditorial
Glass Hypertext
Frosted glass treated as hypertext: every internal link is dotted and ends in a small glass bead, hovering or focusing one opens a glass preview card that links onward up to four deep, and the page ends with a 'What links here' panel of glass backlink rows beside a sticky summary card. 7 sections · animated glasshypertextlink-previewbacklinkswikiinteractive
Glass Plates
A home page that opens on a full-viewport photo plate with a frosted glass title card on the right and a 'Plate 01' caption bar along the bottom, the photo softening into a colour mesh mixed from its own palette, with a second matted portrait plate further down. 8 sections · animated glassphotographyheroimage-palettefrosted
Glass Bento Morph
The home page as a six-column bento board of 28px-radius glass tiles (headline tile, big portrait photo tile, one dark and two light stat tiles, a 'Based in' mountain tile, a featured image tile, writing lists and a dark work-with-me tile) under a floating tray of icon tiles whose lit slab marks where you are. 2 sections · animated glassbentotilesgridmorphimage-backdrop
Aurora Cosmos
A night-sky home page: an aurora and a dark mountain ridge behind a centred headline, the portrait glowing as a sun at the centre of an orrery whose five labelled planets (the site's sections) circle on elliptical orbits, with a glass stat console below and dark glass content panels down the page. 7 sections · animated spaceauroraanimationglassdark
Glass City
A tall glass intro card beside a translucent isometric model city on a frosted slab, where eight numbered glass buildings (an AI tower with a beacon, a story tower, a library, a pattern tile block, a workshop with a crane, a house with the portrait on its wall, a post office and an office) are the site's sections, under a floating pebble-shaped glass nav. 6 sections · animated glassisometriccitymapsvgnavigation
Glass Night Drive
Frosted glass on a synthwave drive: the hero is a contained scene of a sky-blue-to-pink dusk (a violet night with stars and a striped outrun sun in dark mode), a wireframe ridge and a neon perspective grid floor that drives toward the horizon, with the headline's last word in a sunset gradient and the portrait in a glowing glass windshield. 5 sections · animated glasssynthwaveoutrunneonretrohorizonanimated
Frosted Clay
Frosted glass pressed into soft clay: blurred, extruded panels cast shadows in the portrait's own darkest colour, the portrait sits at the bottom of a deep inset well, and the three headline stats are round tick-marked dial knobs, over a backdrop mesh tinted from the photo. 5 sections · animated glassclayneumorphismsoft-uidialsimage-backdrop
Glass Precision
Square-cornered frosted glass laid into a centred hairline frame with crosshair marks at every section rule, a faint 64px grid behind the hero, issue-style IDs on every post and a darker aurora of long rotated colour bands behind it all. 6 sections · animated glassprecisionhairlinegridcrosshairauroratechnical
Quiet Glass
Opens on a full-screen plate: the portrait blurred edge to edge as a backdrop, a sharp print of it on the left inside a brushed ensō circle and a strong glass 'Plate 00' title card on the right, then quiet glass panels on an asymmetric twelve-column field with long hairline-marked pauses. 7 sections · animated glassquietplatemaensoeditorialanimated
The Candidate
A two-column About page on an image-tinted glass mesh: a sticky left rail with the portrait under a frosted name card, a stat strip and a numbered section nav, beside a right column of glass summary, proverb, beyond-code, capability and selected-work panels. 8 sections · animated about-pageglasssticky-railimage-paletteprofile