Four (or two, or five) distinct things, each doing a different job, handing off to the next. The connector is a › on desktop and rotates to a ↓ under 640px — same markup, no separate mobile layout.
Stage 1Prompt
The instruction the reader wrote — one verb, one target.
›Stage 2Agent
Interprets the prompt, decides which tool answers it.
›Stage 3Tool call
The actual side effect — a read, a write, a search.
›Stage 4Result
What comes back, shown to the reader as the answer.
Flow chain
Grid row + rotating connector
Equal-width cards on grid-template-columns: 1fr auto 1fr auto ..., an <i> connector between each. One breakpoint flips columns to 1fr and rotates the connector 90°.
On-brand: border-top color rotates through the vibrant set per card — same trick the card grid on the index page already uses to mark distinct categories.
AuthorDraft›ReviewerReview
Flow chain · minimum
Two stages is still a chain
The same primitive at its smallest: one handoff. Don't reach for a different component just because there are only two boxes.
Above ~5 stages, split the chain across two rows or reconsider whether it's really one process.
✓
Connect
2
Import
3
Publish
Not this — the Stepper
Different job, similar shape
The Stepper (Teaching Elements page) tracks one thing's position — done, current, upcoming — in a fixed sequence, like a form wizard.
Flow chain = distinct named stages, each doing different work. Stepper = where am I in one journey. Don't swap them for variety.
Created for you, with ❤️ by Robert Evans· The AI Design Architect