Alex Z.
Staff Engineer · ex-Stripe, ex-Figma · dev tools & visual systems
10 years building the infrastructure that other developers build on top of. Spent 4 years at Stripe making payment APIs feel obvious, then 3 years at Figma on real-time collaboration and rendering. Now obsessed with AI-native developer tools — agents that can generate, visualize, and ship as fast as you can think.
Experience
Staff Software Engineer · Figma
2021 – 2024Real-time multiplayer rendering engine. Led the team that built FigJam's AI diagramming features from 0 to 2M weekly active users.
Senior Software Engineer · Stripe
2017 – 2021Developer experience and API design. Reduced median integration time from 6 days to under 1 day.
Education
- 2017
MIT
BS, Computer Science
Agents by Alex Z.
Diagram & Architecture Generator
Describe a system, a relationship, or a dataset, and get back a clean architecture diagram, flowchart, or ER diagram as SVG or PNG, ready to drop into docs or slides. ## What it does - **Architecture diagrams:** services, data stores, and the connections between them laid out clearly - **Flowcharts & process maps:** a described workflow turned into a readable top-down or left-to-right flow - **ER diagrams:** a schema or table description rendered as entities, keys, and relationships - **Export:** every diagram as SVG or PNG, ready for docs, wikis, or slides ## Where it fits - **An engineer writing a design doc:** "Diagram the request path from the gateway through to the database." A clean architecture figure to paste into the RFC. - **A product manager mapping a flow:** "Turn this onboarding sequence into a flowchart." A shareable diagram for the spec. - **A backend dev documenting a schema:** "Draw the ER diagram for these five tables." Entities and relationships ready for the wiki. ## How it works 1. **Describe it in words:** a system, a process, or a set of tables. 2. **It picks the diagram type:** architecture, flowchart, or ER, with a clean layout. 3. **You get a file back:** SVG or PNG to drop straight into docs or a deck. Built for engineers and product managers visualizing system design. Every diagram is a draft you can refine and re-export.
Web Slide Designer
Give it a topic or an outline and get back a polished HTML slide deck you can present straight from the browser. ## What it does - **Topic to deck:** a subject or outline expanded into a structured, presentable slide set - **Clean front-end design:** typography, spacing, and layout handled, no template wrestling - **Browser-native:** present directly from the browser, no export step - **Editable:** plain HTML you can tweak slide by slide ## Where it fits - **A developer prepping a tech talk:** "Build a 12-slide deck on our API design." A presentable deck to refine before the talk. - **A founder pitching:** "Turn this outline into slides." A clean deck ready for the room. - **A teacher building a lesson:** "Make slides explaining recursion with examples." A structured set to present from the browser. ## How it works 1. **Give it a topic or outline:** a subject or a bullet list. 2. **It builds the deck:** structured slides with consistent design. 3. **You get HTML back:** present from the browser or edit slide by slide. Built for tech talks and product demos. Every deck is a draft you can reorder and restyle.
Technical Diagram Studio
Describe a technical relationship and get back a production-grade diagram as SVG or PNG, in your pick of 7 styles including UML. ## What it does - **Technical diagrams:** components, flows, and relationships rendered at publication quality - **UML support:** class, sequence, and component diagrams from a plain description - **7 visual styles:** pick the look that fits your paper, doc, or deck - **Export:** clean SVG or PNG, sized for figures and slides ## Where it fits - **A researcher preparing a figure:** "Draw the model architecture as a UML component diagram." A paper-ready figure in your chosen style. - **An architect documenting a system:** "Show the service interactions as a sequence diagram." A clean SVG for the design doc. - **A writer polishing a deck:** "Render this flow in a minimal style." A diagram that matches the slide template. ## How it works 1. **Describe the relationship:** components, a sequence, or a class structure. 2. **Pick a style:** one of 7, including UML conventions. 3. **You get a file back:** SVG or PNG, ready for the paper or deck. Built for technical documentation and paper figures. Every diagram is a draft you can restyle and re-export.
Codebase to Course
Point it at a code repository and get back an interactive online course with exercises. ## What it does - **Repo to curriculum:** a codebase turned into a structured learning path - **Interactive pages:** lessons you click through, not a static README - **Hands-on exercises:** tasks tied to the actual code - **Teaching-ready:** output you can publish or assign ## Where it fits - **An open-source maintainer:** "Turn our repo into an onboarding course." A guided path for new contributors. - **An instructor building material:** "Make a course from this example project." Lessons with exercises. - **A team onboarding engineers:** "Teach our codebase interactively." A walkthrough new hires can do. ## How it works 1. **Point it at a repo:** the codebase to teach. 2. **It builds the course:** lessons and exercises mapped to the code. 3. **You get a course back:** interactive pages to publish or assign. Built for open-source teaching and technical training. Generated material is a draft to review before you teach from it.
Magazine-Style Slide Maker
Give it a topic and get back a polished, magazine-style HTML slide deck with horizontal page turns. ## What it does - **Magazine layout:** editorial typography and composition, not stock slide templates - **Horizontal page-turns:** a deck that reads like flipping through a magazine - **Topic to deck:** a subject expanded into a designed set - **Share-ready:** self-contained HTML you can present or send ## Where it fits - **A creator publishing an explainer:** "Turn this topic into a magazine-style deck." A designed set ready to share. - **A knowledge worker presenting:** "Make this report feel editorial." A polished page-turn deck. - **A founder telling a story:** "Lay out our vision as a flip-through." A share-ready narrative. ## How it works 1. **Give it a topic:** a subject or an outline. 2. **It designs the deck:** magazine layout with page-turn flow. 3. **You get HTML back:** present it or send the link. Built for content creators and knowledge sharing. Every deck is a draft you can restyle and re-share.
Google Cloud & Firebase Code Generator
Describe a Google Cloud, Firebase, or Android need and get back code and configuration that follows Google's official standards. ## What it does - **Standards-compliant code:** GCP code written to Google's documented best practices - **Firebase configs:** setup and rules aligned with official guidance - **Android guidance:** code and configuration following platform conventions - **Best-practice defaults:** the recommended way, not just a way that works ## Where it fits - **A developer on GCP:** "Set up a Cloud Run service the recommended way." Code and config to official standards. - **A mobile dev on Firebase:** "Configure Auth and Firestore rules correctly." A compliant setup to drop in. - **An Android engineer:** "Scaffold this feature following platform best practices." Conventional, reviewable code. ## How it works 1. **Describe the need:** a GCP, Firebase, or Android task. 2. **It applies the standards:** Google's official best practices. 3. **You get code and config back:** ready to review and integrate. Built for GCP developers. Every output follows documented best practices and is a draft for you to review before shipping.
React Code Doctor
Hand it your React code and get back a quality report: performance traps, anti-patterns, and likely bugs, each with a fix you can apply. ## What it does - **Performance diagnosis:** unnecessary re-renders, unstable references, and expensive work in render, traced to the component and line - **Anti-pattern flags:** effect misuse, derived-state-in-state, prop drilling, and key misuse, called out with why they bite - **Bug-risk review:** stale closures, missing dependencies, and races in async effects surfaced before they ship - **Fix suggestions:** every finding paired with a concrete code change, not just a warning - **Rule-based checks:** a configurable rule set (`inspect`, `why`, `rules`) you can run in CI or on demand ## Where it fits - **A front-end engineer in code review:** "Review this PR's components for re-render traps and stale effects." A prioritized report with line-level fixes before you approve. - **A lead onboarding a codebase:** "Audit src/ for React anti-patterns and rank by impact." A triaged list to work through. - **An engineer chasing a slow page:** "Why does this list re-render on every keystroke?" The offending reference traced, with the memo or split that fixes it. ## How it works 1. **Point it at your code:** a file, a component, a PR diff, or a directory. 2. **It runs the diagnosis:** rules and analysis flag performance traps, anti-patterns, and bug risks. 3. **You get a report back:** findings ranked by impact, each with an explanation and a suggested fix to review and apply. Built for front-end engineers and teams running React code review. Every finding is a suggestion for you to review; no code changes without your approval.
High-Fidelity UI Prototyper
Describe the interface you want and get back a high-fidelity HTML prototype you can open straight in the browser, animations included, built on 20 design principles. ## What it does - **Clickable prototypes:** a described screen or flow rendered as a working HTML page you can open in the browser - **High-fidelity UI:** layout, spacing, and type tuned against 20 built-in design principles, not a rough wireframe - **Animations:** transitions and micro-interactions included, so the prototype feels real - **Demo-ready output:** pages clean enough to drop into a pitch or a design review ## Where it fits - **A designer pitching a concept:** "Prototype the dashboard with a sidebar and three summary cards." A high-fidelity page to click through in the review. - **A founder prepping a demo:** "Mock up the signup flow end to end." A browser-ready prototype for the investor call. - **A PM validating an idea:** "Show me two layouts for this settings screen." Two polished options to compare. ## How it works 1. **Describe the interface:** a screen, a flow, or a full page. 2. **It applies the design system:** layout and interaction built on the 20 principles. 3. **You get HTML back:** open it in the browser, click through, and refine. Built for designers and product demos. Every prototype is a starting point for you to iterate on.