Astro Website for AI Agent Runtime - Runlog
Pavlo Zhydkykh
Runlog is a concept product site I designed and built in Astro for an AI agent runtime, the kind of developer tool that has to earn trust in the first scroll.
Challenge
Explain a technical product (plan, act, verify, replay) to engineers without turning the page into documentation.
What I did
Hero with a live-looking run log that shows every agent step, timing and cost, so the product is understood before any copy is read.
Plan, Act, Verify section built as a step sequence, plus code tabs for TypeScript, Python and cURL with copy buttons.
Run ledger table, tools grid, security block with an approval demo, metrics, testimonial and changelog.
Static Astro build deployed on Cloudflare Pages, almost no client JavaScript, fast on mobile.
Every page comes in a light and a dark theme, both from one set of design tokens.
Pricing with a sticky comparison table: plan names, prices and buttons stay in view while you scroll the rows.
Docs with a sidebar, search and a "Copy as Markdown" button for AI agents, next to an llms.txt file.
The blog and changelog are Markdown content collections that the team edits in Keystatic CMS.
On a phone the menu opens full screen and the pricing table shows one plan at a time.
Result
A developer-first SaaS site that reads like the product itself. The design is also sold as an Astro theme, Runlog Pro, with the Figma file included: https://contra.com/products/QETiOjxd-runlog-pro-ai-agent-and-dev-tool-saa-s-astro-theme
Live demo: https://runlog-astro.pages.dev/
Like this project
Posted Oct 19, 2026
Concept product site for an AI agent runtime, designed in Figma and built in Astro. The hero shows a live-looking run log with every step, its timing and cost, so an engineer sees how the product works before reading any copy. Light and dark themes, 12 pages.
