All resources

Implementation recipe

How a form is built here

Six rules read on a live operator form: asterisks, numbered cards, a searchable list, an aligned help icon.

Integration recipe

Put a speaker in the page

A person who presents the page in a real voice.

Workflow

Make a film

A story to the screen, batch by batch.

Worked example

Globes in dots

Seven dotted-globe designs, with editable drawings and the method to reframe them.

Technique collection

Ways of presenting images

Tunnels, globes, spirals, grids and stacks: photographed patterns for presenting an image collection.

Workflow recipe

Illustrate a concept

2D and 3D forms that say the idea before words: Earth, stars, clay, paper.

Publishing recipe

Putting it online

Three roads to a link, and the one question that picks between them.

Design standard

Our page design rules

Type, spacing, colour and every block, each one shown on the page.

Template collection

The ready document formats

The page shapes to copy: leaflet, teaching page, plan, poster, deck.

Workflow recipe

The user manual

The software at its best: real screens, plain words, made again by script.

Review method

The UI review

Real screens judged, findings with repairs in plain words.

Example collection

The design benches

Each project's visual ideas before they are decided.

Writing standard

The register of a document

Eight ways to open, one voice held to the end.

Creation recipe

Make your own speaker

Three roads: one that exists, a new one, or your own face.

Capability collection

Voice

A page that reads itself, and dictation into any window.

Interaction pattern

The guide

Build a conversational guide and verify speech, interruption and recovery.

Technique collection

Motion

The map of the family: the one secret, the four moments, the shelf.

Reference collection

The galleries

Where to look first: sites, screens, motion, delightful details.

Principle

Taste

Frank's verdicts on how things should look.

Workflow

The speaker factory

Compare production routes, with their inputs, limits and evidence.

Publishing recipe

Send mail as your domain

Free, no server, replies included.

Explanatory technique

Show a body, and put it straight

A foot collapsed, an axis bent, then put right in the same picture.

Reference

The studio spine

What the studio is and where each thing lives, for a session reading files.

Recipe

Bench: Sistema ABC

Palettes, references and parked ideas for the Colombia system.

Recipe

Bench: Central

Palettes, references and parked ideas for Central.

Reference

Colour says which world a page belongs to

Which paper and which colour a page wears, by family.

Reference

Documentation design

The sourced digest under the rules: twenty reading patterns.

Reference

documentation-kit.css

The paste-from stylesheet: every block, on house tokens.

Reference

The animation studio, annex

External material kept whole, behind the film recipes.

Reference

Concept note, the format

The opening paper of any development, with its drawing.

Reference

Implementation plan, the format

Screens as the contract, phases with gates.

Example

Itinerary card, a worked layout

A layout example; its dates and locations are not current advice.

Recipe

Proposal note, a real one

A decision carried on one page: problem, options, recommendation.

Reference

Proposal note, the format

What the note holds and how it closes.

Recipe

Simple table, a real one

One screen answering how it went, per item.

Reference

Simple table, the format

The parts of the verdict board.

Reference

Vision paper, the format

What the shape is and when it is right.

Recipe

Vision paper, the page

One argument, chapter by chapter, each opening with a summary.

Recipe

What the private sector does

What companies such as Stripe do with forms today, read against the public-sector practice on file.

Recipe

The state of the art in form design

Form practices from primary sources, ordered by weight for a long expert filing done once or twice a year.

Reference

Frank's baseline UX

The nine rules a page passes before Frank sees it.

Reference

Hosted voice agents, the state of the art

What you can buy today, judged on interruption.

Reference

Open voice agents, the state of the art

What you can host yourself, judged on interruption.

Reference

Image models for skills

Which image engine to pay for when a skill must repeat itself.

Reference

Impeccable integration

Focus, states and the small details that finish a screen.

Reference

Implementation proof pipeline

How a plan shows delivery and verification in one place.

Reference

The inbox

Raw material parked, waiting to become a rule.

Reference

Model: Code Wiki

Light without lights, 3D without models.

Reference

The liked models

The sites Frank picked, captured and described.

Reference

Model: interfaces.dev

A page that measures itself in front of you.

Reference

Model: L'étape d'après

A photograph as the room, one italic word as the accent.

Reference

Shown log

Every site already brought to Frank, so none is shown twice.

Reference

Model: Stripe Press

Books as objects, on a quiet page.

Reference

Where to find UI ideas

The classified list: what each gallery is best for.

Recipe

ScreensDesign, studied

What the site holds and how to use it without copying.

Recipe

Web design trends 2026

About twenty-five trends, tagged, each marked for a readable page.

Reference

Digest: the two-plate build

Building a site from two plates, start to finish.

Reference

Digest: the head-turn hero

A 3D head that follows the scroll.

Reference

Digest: reskinning a 3D site

Taking one built site and giving it a new face.

Reference

Digest: GPT Sol for web design

What the model changes for a page builder.

Reference

Digest: Fable for web design

The workflow, from prompt to published page.

Reference

Digest: motion transfer

Moving a motion from one page to another.

Reference

Digest: the scroll website

A page built around one long scroll.

Reference

Digest: the parallax image split

Pages that feel like films.

Reference

Digest: Kimi for web design

Another engine, the same test.

Reference

Digest: animation with Figma AI

Where Figma fits once the AI does the moving.

Reference

The Kennedy shelf

Erik Kennedy's free material, digested. Start here.

Reference

Against systems

Kennedy's case against our token machine.

Reference

Colour, one base varied by recipe

One colour, many uses, no palette generator.

Reference

Hierarchy, spacing, light and alignment

Rank by taking away, not by adding.

Reference

Intuitive UX

Locality, controls, and the squint test.

Reference

Practice methods

How Kennedy trains the eye.

Reference

Kennedy's free tools

What each one is for, and when to open it.

Reference

Typography and fonts

Sizes, pairing, and the safe free fonts.

Recipe

The paper change

Two paper colours had crept into the studio; the sweep of 29-08-2026 made them one.

Reference

Give a site its own mail

The source behind mail/branded-mail.html.

Reference

Images and page entrances, the audit

What we shipped, and the minimum standard agreed.

Recipe

Frank's criteria for motion

The numbered verdicts on what may move, and how much.

Reference

Entrance recipes

What makes a first screen move beautifully.

Recipe

Make pages move

Video under the page, scroll, entrances: the recipes.

Reference

The 3D web meta-prompt

The prompt that makes a page look three-dimensional.

Reference

The Marcus prompt

A person standing on top of the site.

Reference

motionsites.ai, decoded

How the gallery's pages are built.

Reference

The NovaAI prompt

The recreation prompt, kept as written.

Reference

Google AI Studio, the full process

Beginner to finished page, step by step.

Reference

Higgsfield and Claude, the tutorial

The animated-site method, summarized with thumbnails.

Reference

How award-winning animated sites are sold

The business behind the pages, from the same source.

Reference

The entrance image, research

The fastest reliable way to make one, and what it costs.

Template

Speaker brief template

A blank reusable brief; fill in the speaker and asset references before use.

Recipe

The speakers, set straight (in Spanish)

Three independent reviews of 31-08-2026: what is decided, what it really costs, and three fixes before spending more.

Recipe

Which engine animates the face

Our factory against HeyGen, the same words, judged by ear and eye.

Recipe

How a speaker is made

The one sequence every session follows, each step with its tool, its check and its cost.

Reference

Where the speakers stand on conversation

What a speaker can answer today, and what it cannot.

Recipe

Take a speaker that exists

The shortest road: a speaker already made.

Recipe

Make a new speaker

Invent a person who is nobody real.

Recipe

Make an avatar of yourself

Your own face and your own voice.

Recipe

Install our skills

One command takes any recipe into your own Claude.

Reference

Publishing the studio

How this site itself goes online, and where it lives.

Reference

Studio tool register

The source behind tools.html.

Reference

The new shape of the studio

The seven families, the cards that move, the order of work.

Reference

The studio, reviewed against itself

Ten findings from a walk through our own pages, 15-08-2026.

Reference

Long read, the format

The measured anatomy of a long read: the index in the margin, the column, listen and share.

Template

Long read, the template to copy

A working page in the long-read shape: the index builds itself, share copies the address, listen appears only with a real recording.

Workflow recipe

A family video from clips and photos

Photos and phone clips turned into a short edited film with titles and your choice of music, without editing by hand.

Workflow recipe

A product video

A product film or service explainer in motion graphics: a reference film to match, three storyboards, stills before anything moves, notes in camera words.

Design standard

Your AI design system: one structure, several designs

Concept and colour board: Celia's Digital Government Design System as the first design, yours next, in a structure agents can read. Its own project, linked here.

Dictation application

FreeFlow

Mac dictation with transcription, cleanup and spoken text editing.

Illustration

Dictation application

FluidVoice

Local-first dictation with selectable speech engines and optional enhancement.

Illustration

Dictation application

Wispr Flow

Commercial dictation product already considered in the personal workflow.

Illustration

Speech-recognition model

Whisper

Open speech-recognition model for transcription, translation and language identification.

Illustration

Hosted inference service

Groq speech-to-text

Hosted transcription endpoint used by existing Studio ingestion workflows.

Reference capture

Speech-recognition model

Parakeet TDT

NVIDIA speech-recognition model used through compatible apps or runtimes.

Illustration

CPU inference runtime

VibeASR.cpp / BitNet

CPU runtime for the compressed VibeVoice-ASR-BitNet model.

Illustration

Speech-recognition model

VibeVoice-ASR

Model with documented structured transcription, speaker and timing output.

Illustration

Streaming recognition model

VibeVoice-ASR-Streaming

Recently released streaming branch of the VibeVoice family.

Illustration

Hosted voice platform

ElevenLabs

Hosted speech generation, voice design, cloning and other audio capabilities.

Illustration

Local voice application

Voicebox

Voice studio with cloning, story editing and additional voice input/output features.

Illustration

Multi-engine voice application

VoiceStudio

Multi-engine application for voice creation, transcription and dubbing.

Illustration

Audio workflow application

voice-pro

Web interface combining recognition, separation and speech-generation engines.

Illustration

Source-separation model

Demucs

Separates audio sources such as vocals and accompaniment.

Illustration

Hosted dubbing workflow

ElevenLabs Dubbing

Translates recorded audio/video while retaining speaker characteristics.

Illustration

Hosted agent platform

ElevenLabs Agents

Platform for building conversational voice agents.

Illustration

Realtime model API

OpenAI Realtime

API for low-latency audio conversations and application tools.

Illustration

Realtime multimodal API

Gemini Live

Realtime API for conversational audio and multimodal sessions.

Illustration

Realtime model API

Grok Voice Agent API

Realtime voice interface with configurable tools.

Illustration

Voice-agent framework

Pipecat

Framework connecting realtime transports and voice/AI services.

Reference capture

Reference application stack

Hugging Face speech-to-speech

Open-source assembly of components for voice agents.

Illustration

Dialogue model and framework

Moshi

Speech-text model and full-duplex spoken-dialogue research framework.

Illustration

Dialogue model

Nemotron VoiceChat

NVIDIA real-time conversational speech model.

Illustration

Speech engine or client

Kokoro

Compact text-to-speech model with supplied voices.

Illustration

Speech engine or client

Edge-TTS

Python client for Microsoft Edge’s online text-to-speech service.

Illustration

Speech engine or client

F5-TTS

Flow-matching text-to-speech system for reference-voice generation.

Illustration

Speech engine or client

CosyVoice

Multilingual speech-generation family with inference and deployment tooling.

Illustration

Speech-generation engine

Qwen3-TTS

Speech generation family with separate voice-design, custom-voice and cloning models.

Illustration

Speech-generation engine

Chatterbox

Open speech-generation model family with voice-reference and expressiveness controls.

Illustration

Speech-generation engine

IndexTTS 2 / 2.5

Controllable zero-shot speech-generation system.

Illustration

Speech-generation engine

AuK-Flash

Tencent's AuK (announced as "Nano Banana for audio"), here in its distilled four-step version: speech from a reference voice or a written voice description, plus editing, cleaning and separation of existing speech through written instructions.

Illustration

Unresolved product label

Meta Voice Transcribe

A name in the existing material whose exact product/API identity needs resolution.

Capability diagram

Image engine

Gemini image / Nano Banana

Generates and edits raster images through Google image-capable models.

Illustration

Image engine

GPT Image 2

Generates and edits raster images with text instructions and image inputs.

Capability diagram

Self-hosted image engine

FLUX.2 dev on RunPod

Open-weight FLUX image generation operated through the existing GPU workflow.

Illustration

Hosted image engine

FLUX.2 hosted models

BFL endpoints generate images and perform multi-reference edits.

Reference capture

Raster/vector image engine

Recraft

Provides generation, vector generation, vectorization and editing endpoints.

Reference capture

Image engine

Ideogram

Image generation and editing with typography-oriented features and structured prompts.

Illustration

Image engine

Seedream

ByteDance image-generation family exposed through BytePlus and selected providers.

Illustration

Image engine and editor

Midjourney

Generates visual interpretations from text and image references; web editor supports targeted changes.

Capability diagram

Image platform and model host

Krea

Image creation and enhancement platform with a documented developer API.

Reference capture

Multi-model platform

Higgsfield

Routes image and video jobs through an agent-accessible platform.

Reference capture

Workflow wrapper

HeliosGen

Visual canvas for chaining prompts, reference images, models and automation.

Illustration

Multi-model runner

WanGP / Wan2GP

GPU-oriented application supporting image models alongside video models.

Illustration

Studio recipe

concept-diagrams

Chooses a conceptual structure and visual material, then generates and judges illustrations.

Capability diagram

Diagram authoring recipe

diagram-design

Writes structured editorial diagrams as self-contained HTML and SVG.

Illustration

Diagram authoring and validation recipe

archify

Builds explorable system maps and supports validation and visual exports.

Illustration

Diagram language and renderer

Mermaid

Turns text definitions into diagrams through a JavaScript renderer.

Illustration

Isometric diagram editor and renderer

FossFLOW

Creates isometric infrastructure diagrams with reusable scene objects.

Illustration

Vector and layout editor

Figma Design

Edits design objects and exports selected content as image/vector assets.

Illustration

Programmable design editor

OpenPencil

Edits design documents through app, CLI and MCP.

Illustration

Vector and prototyping editor

Penpot

Design platform with vector editing, layouts and prototyping guidance.

Illustration

Drawing canvas

Koboyo

Browser canvas recorded for manual shapes, text and diagram drawing.

Illustration

Photography source

Unsplash

Source of real photographs under its published licence.

Capability diagram

Image presentation and video exporter

Animos

Arranges existing pictures into animated display patterns.

Illustration

Image engine

Qwen-Image family

Image generation and editing family with released model code and weights for specific variants.

Illustration

Image engine candidate

Meta Muse Image

Image capability mentioned in the existing Studio tool register.

Capability diagram

Visual reference source

Logobook

Gallery of logos, symbols and trademarks.

Reference capture

Icon asset library

Hugeicons

Library of icons for design and development.

Illustration

Hosted video model

Veo

Google video-generation model accessed through supported Google APIs and interfaces.

Illustration

Hosted video model

Seedance

ByteDance video-generation family with multimodal reference capabilities in newer releases.

Reference capture

Hosted video model

Grok Imagine Video

xAI video generation, distinct from Grok’s live conversational voice.

Illustration

Video/audio model

MiniMax H3

MiniMax multimodal video model with reference-based generation.

Illustration

Video-generation application

Hailuo

MiniMax’s user-facing video creation service.

Reference capture

Video model/platform family

Kling

Video-generation family named in the existing Studio routes.

Illustration

Open video model family

Wan video models

Open model family with text, image, speech-to-video and animation variants.

Illustration

Open video model family

LTX Video / LTX-2

Lightricks video models and associated generation workflows.

Illustration

Open video model family

HunyuanVideo

Tencent open video model family.

Illustration

Model-development interface

Google AI Studio

Google interface for exploring and building with its models.

Illustration

Hosted avatar platform

HeyGen

Hosted API platform for creating avatar videos and related presenter workflows.

Illustration

Portrait-animation model

LivePortrait

Transfers driving motion to a source portrait with retargeting controls.

Illustration

Lip-sync model

MuseTalk

Audio-driven lip synchronisation applied to a face image/video route.

Illustration

Lip-sync diffusion model

LatentSync

Audio-conditioned lip synchronisation for existing video.

Illustration

Media processing tool

FFmpeg

Command-line processing for video, audio, filters, subtitles and export.

Reference capture

Code-based video renderer

Remotion

Creates videos from React code: text, charts and layouts placed frame by frame, rendered to MP4.

Illustration

Timeline editor

Final Cut Pro

Apple video-editing application for assembling and finishing a film.

Illustration

Timeline editor

OpenShot

Open-source video editor with timeline editing and effects.

Illustration

Timeline/content editor

CapCut

Desktop video editor with editing, effects, search and AI-assisted content features.

Illustration

Restoration model

Real-ESRGAN

Image/video restoration and upscaling project.

Illustration

Automated video workflow

MoneyPrinterTurbo

Builds short videos through a pipeline of scripts, assets, narration and assembly.

Illustration

GPU hosting service

RunPod

Infrastructure for running GPU workloads.

Illustration

Media acquisition tool

yt-dlp

Command-line downloader for supported media sources.

Illustration

Hosted media platform

Magic Hour

Hosted platform grouping text/image/video generation and editing workflows.

Illustration

Video workflow application

Palmier Pro

Mac timeline editor with generation and agent editing through MCP.

Illustration

Vendor label

Wondershare (product unresolved)

Vendor name in the existing material; the exact editor/product is not specified.

Capability diagram

Internal orchestration recipe

Studio video toolkit

The local collection of scripts and skills that connects production steps.

Capability diagram

Visual reference library

StillsLab

Film and television frame library for selecting composition, lighting and visual references.

Illustration

Reference/prompt library

MotionSites

Website design and motion-prompt reference library.

Illustration

Agent skill for explainer videos

Hand-drawn explainer (Nikola)

A Codex skill that turns a topic, a script or a subtitle file into an explainer video drawn stroke by stroke, or animated as cards and diagrams.

Capability diagram

Agent skill for product films

Video Shotcraft

A Claude Code and Codex skill that turns a product's real screens into a short promo film on Remotion, using 157 shot recipes with tuned code, sound effects and optional music.

Reference capture

Open audio-driven avatar model

InfiniteTalk

Turns a portrait or a clip and an approved audio track into a speaking video with head and body motion. Open weights from MeiGen-AI.

Illustration

Open audio-driven avatar model

LongCat-Video-Avatar 1.5

Turns one portrait and an approved audio track into a speaking video, face and body born together. Open weights from Meituan.

Illustration

Claude Code editing skill

video-use

A Claude Code skill that edits talking footage from its transcript: picks takes, cuts filler words and dead air, grades, subtitles and renders with ffmpeg.

Illustration

React component library

Flapkit

Split-flap departure board for React: letters and digits flip over to their new value, with sound.

Reference capture

JavaScript animation library

Cube

Four ready motions for page elements: rise (entrance), leave (exit), morph (a label or icon changing state) and reveal (rise when scrolled into view). Durations, curves and staggers are fixed by the library.

Reference capture

3D map generator (web app, open source)

map3d

Turns any area of the world into a 3D city map: buildings extruded to their recorded height and roads, from OpenStreetMap, exportable as a GLB 3D model.

Illustration

Code-based video renderer

HyperFrames

HeyGen's open-source framework that turns an HTML page with timed animations into an MP4. Claude writes each scene as a web page and renders it; a change edits one line and re-renders.

Capability diagram

Interface component library

21st

A library of over 10,000 React and Tailwind interface components (buttons, cards, menus, sections) made by design engineers, searchable from Claude through its own connector.

Capability diagram

Reference video catalogue

What Ships

A free, curated catalogue of about 2,200 startup launch and demo videos posted on X, sorted by category, with duration and poster frames.

Capability diagram