Concept project · vLLM at PyTorch Conference North America 2026
30+ conference talks on one page, written for engineers and non-engineers
My Role: Solo designer and Webflow builder
Project: Self-initiated concept: a post-event recap page for vLLM at PyTorch Conference North America 2026
Tools: Figma, Webflow, Claude Code, Jitter
Timeline: 1 week (Oct 27 to Nov 2, 2026). Learned Webflow in 3 days.
Live site: amanda-vllm-pytorch-recap.webflow.io
Unofficial concept project. Not affiliated with or endorsed by vLLM, the PyTorch Foundation, or any company named.
View the live site →
vLLM splits each request in two: one set of machines reads the question, then passes its notes to another set that writes the answer, so each job runs at full speed.
The Problem
Anyone who missed the conference had nowhere to catch up on 30+ talks
vLLM is free, open-source software that runs AI models faster and cheaper, built by 2,000+ contributors. At PyTorch Conference 2026, companies including Red Hat, IBM, Google and Meta gave 30+ talks on it, but no single page showed what was presented or how to get involved.
The hardest part was explaining the main technique: reading the question (prefill) and writing the answer (decode) on separate machines. Engineers need that to be accurate, and everyone else needs to understand it in seconds.
How might we explain this technique on one page, accurately for engineers and clearly for everyone else, in a format a marketer could update alone?
Audience
One page had to work for engineers, contributors and non-engineers
Every fact comes from a public source: the PyTorch Foundation blog, the conference schedule, vLLM docs and GitHub. I then mapped who reads a recap page and what each reader looks for.
What each reader needs from the page
Reader
What they scan for
What the page gives them
ML engineer who missed the event
Which talks matter to my work
Sessions filtered by theme, with links
Open-source contributor
Credit and a way to join
Partner credits and a “join the community” CTA
Non-engineer (marketer, exec)
What vLLM is and why it matters
One diagram with a plain-English caption
I sorted the talks into three topics so readers can find what they need
Splitting the work: reading and writing on separate machines (Mistral AI, Amazon, Red Hat)
Any hardware: one model running on many types of chip (Meta, Google)
Speed work: faster, lighter code (IBM Research)
I chose “Splitting the work” for the main diagram because it had the best public sources and is the hardest idea to picture.
The Diagram
One animated diagram follows a single question through vLLM, step by step
This technique comes with a lot of jargon. I kept only the four parts a reader needs:
Prefill GPUs: all 16 cells light up at once, because prefill reads the whole question at the same time.
KV cache handoff: the notes passed between machines. It’s the brightest element because this handoff is the main idea.
Decode GPUs: pulse with each word, because decode writes the answer one word at a time.
Return path: a dashed loop that carries the answer back to the user.
Storytelling decision: my Figma version had three colour-coded users. I cut it to one request so there’s only one thing to follow. The motion shows why the two jobs sit on different machines: prefill works all at once and decode works step by step.
Squint test: with the diagram blurred, your eye should land on the handoff first. I sketched it by hand and checked the flow against the public talk before building.
Why it matters: vLLM can serve more people, faster and at lower cost.
The diagram stays sharp on any screen and can be edited directly in Webflow
I storyboarded 8 frames, then built each part as a reusable Webflow component with a looping animation. Live HTML keeps text sharp, adapts to mobile and can be edited without re-exporting. A scroll-driven version felt glitchy, so each step in the page body plays when you hover or tap its numbered card.
Visual Direction
The page looks like the tools developers use every day
Dark “Night Shift” palette. Developers work in dark editors and terminals, so a near-black page feels familiar and makes the bright handoff stand out.
ASCII art. I tested six directions. I chose the flame to represent PyTorch, and used the “vLLM” motif for the hero backgrounds. Art made from text looks like code and suits open-source culture.
Archivo for type. It looks strong at heading sizes and stays readable in long summaries.
I kept the text art faded, with small amber areas over grey, so it doesn’t compete with the diagram.
Each section answers the question a reader would ask next
The diagram sits in the middle on purpose: readers get the overview first, then the main idea, then a way to get involved.
Design System
Figma and Webflow use the same variable names
Colours, components and content use matching names in Figma and Webflow, so a developer or marketer can find the same thing in both.
Layer
Figma
Webflow
Colour
Colour variables (“Night Shift” palette)
Color variable collection, same names (bg/page, accent/amber…)
Components
Page and diagram components
13 Webflow components in 4 groups: Global, Layout, Cards, Diagram
Content
Session card component
Sessions CMS collection, bound to the Session card
Two visual rules keep the page consistent
Amber is the only action colour. Blue appears only in the diagram, so it’s always clear what you can click.
Sharp corners everywhere. Cards are 0px and buttons 2px. The square shapes suit the technical subject.
I left out company branding so the recap reads as a community project
vLLM is owned by its community, and Inferact is the company its creators started. A community recap shouldn’t look like it belongs to one company, so I left company branding out.
Colour, type and spacing are all variables, so a second brand could swap the palette and logo while keeping the same grid, type scale and components.
Names match across both tools. I adjusted some values and added a few variables in Webflow during the build, such as amber-hover for button states.
The Build
A marketer can add next year’s talks by filling in a form
Sessions live in a Webflow CMS collection, so adding next year’s talks only takes a form. I split each session name into Title and Short title: engineers get the official name and everyone else gets a heading they can scan.
Simple class names let another designer take over the build
I used my own small naming system, because Client-First is built for large sites and was more than a one-page recap needs.
Global classes do the work: container, section, button, card. Every value comes from a variable.
Modifiers use an is- prefix: is-surface, is-secondary, is-active, so base styles and variations are easy to tell apart.
Motion uses a dx- prefix: animation classes stay separate from layout, so restyling doesn’t break the animation.
I adjusted the layout at each screen size so it stays readable on phones
I designed at 1440 and 390, then adjusted each Webflow breakpoint by hand: cards stack, the H1 drops from 54px to 38px so the headline wraps to two lines, and buttons stay 44px tall for touch.
AI Workflow
Claude Code helped me learn Webflow in 3 days, and I made every design decision
I had never used Webflow before this project. I learned it in 3 days with Claude Code, using my Figma file as the reference. I made the decisions, AI helped me carry them out faster, and I checked every result in Webflow myself.
Area
What I decided
What AI did
How I checked it
CMS
Which fields exist, Title vs Short title, the help text
Set up the collection and entered items
Added a session myself through the CMS editor
Diagram
What to cut, what to show, how it moves
Helped me debug the looping interaction
Watched it at every breakpoint
Facts and copy
The three themes, tone and every claim
Summarised sources, drafted copy
Traced each fact to a public page
I sketched the diagram, set the motion and directed the art myself
Sketched the diagram by hand, then rebuilt it in Figma before starting in Webflow.
Decided how it moves. The motion matches how each step works.
Checked the details. I matched the diagram’s GPU cells to the theme cards and caught broken dashed lines and stuck animations that the tools reported as fine.
Art-directed the ASCII background. I set the direction and reviewed four rounds with AI.
My AI Experiment case study reached the same conclusion: the designer is responsible for what ships.
Outcome
I launched a live site in one week with no prior Webflow experience
3 days
From first Webflow login to a working CMS build
13
Reusable Webflow components, including 7 for the diagram
What I’d do next
Ask 3 to 5 non-engineers to explain the diagram back after 10 seconds, to see if the story works.
Add a second brand mode and a LinkedIn card from the same components, to test the system with a sister brand.
Get a developer and a designer to review the build.
Thank you =)
Product Designer
Amanda Keay
amanda.keay520@gmail.com