Every team building an AI product has to design the same operations dashboard: monitoring agents, reading traces, handling conversations, tracking costs and evaluating quality. OhShot Agents packages all of it - a complete UI kit for AI agent operations, designed in Figma and shipped as production-ready code, then sold as a real product.
I ran this one end to end - as designer, developer and maker: from the market research and the design system, to the coded implementation, to the store, the pricing and the free sample that feeds it.
The AI-agent space is exploding, but the tooling around it is repetitive to build. The market had a clear gap:
The challenge was to design a system that is both complete and coherent - every screen, in every state - and to ship it as something people can buy, deploy in five minutes, and extend with their own AI coding tools.
Tokens: a two-tier variable system (primitive to semantic) with full light and dark modes, so the whole kit re-themes by swapping tokens - never hard-coded colors.
Foundations: a 12-column responsive grid and an accessible type scale (16px body minimum, 44px touch targets, AA contrast) - built on real web-design rules, not just aesthetics.
Components: 90+ components and 72 icons built with auto layout, including the AI-native pieces no other kit covers - tool calls, trace nodes, chat bubbles with citations, token meters, eval scores, agent status and human handoff.
I designed the full system in Figma, then rebuilt it 1:1 as a Next.js codebase (App Router, TypeScript, Tailwind) - the design tokens map directly to CSS variables, so design and code stay in sync.
Every screen ships in four states: default, empty, loading and error. The kit is responsive - a sidebar on desktop, a bottom tab bar on mobile - and runs with no backend, on typed mock data.
The AI-Ready layer is the differentiator: the kit includes machine-readable docs and ready-made prompts, so tools like Cursor and Claude Code can read the system and build new pages that match it - you don't have to write the code yourself.
OhShot Agents is live and for sale: 50+ screens across every state, 90+ components, light and dark, Figma plus deployable code. It ships with a public live demo and a free Figma sample that works as the funnel.
Beyond the design, this project was about shipping a product solo - research, design, code, packaging, pricing and distribution - and turning a design skill into something that stands on its own. Design in Figma, ship with AI.
The command center: live KPIs, run activity, top agents and recent runs at a glance. The whole dashboard is driven by design tokens, so it re-themes to dark mode without touching a single component.
The most differentiating screen: an interactive trace tree of every step an agent takes - LLM calls, tool calls, retrievals - with a side panel showing input, output, tokens and cost for the selected node.
An inbox where AI and humans share the same thread: tool calls and citations inline, a customer context panel, and a clean handoff when the agent escalates to a person.
The "ops" side: cost, token, latency and quality dashboards with budgets, per-model and per-agent breakdowns, and eval scores - the numbers a team actually needs to run agents in production.
A deep configuration surface: system prompt editor, tools with toggles, guardrails, model settings and connected knowledge bases - the kind of density that shows the kit is built for real products.
One system, two themes - driven entirely by tokens. And every screen ships in its default, empty, loading and error states, so the kit holds up the moment it meets real data.
50+ screens across monitoring, agents, runs, conversations, analytics, evals and settings - a complete, coherent system, ready to design with and ship.
Like this project? Let's work together.
Get in touch →