Workflow · 24 tools
Workflow
Tools for designing, prototyping, building and working with agents, organised by stage.
The staging and the descriptions are Compound Design's own. danilodoamaral.vercel.app/tools
Design
Deciding the form: canvas, color, icon, curve.
4- easing.devVisual catalog of easing curves for comparing animation timing and copying ready-made code for CSS, Motion, SwiftUI.Easing curves
- FigmaCollaborative interface editor in the browser, where layout, type, and color get decided before any code exists.Design
- oklch.fyiPicks, converts and generates OKLCH colors, building palettes with even lightness that export straight to CSS or Tailwind.Colors
- Central IconsIcons with adjustable weight and corner radius, available in Figma and as React packages.Icons
Prototype
Proving it works before it counts.
3- PaperDesign canvas built on real HTML and CSS, exporting as code and connecting to agents through MCP.Prototyping
- CleanShot XCaptures, annotates and records the Mac screen, with cloud links for showing what already works to others.Screenshots
- ComprestoNative macOS compressor that shrinks videos, images, GIFs and PDFs offline, keeping screen recordings light enough to share.File compression
Build
Writing and running the code.
5- MotionAnimation library for React, JavaScript and Vue: springs, gestures, layout and scroll transitions written directly in interface code.Animation library
- DiaChromium browser with AI in the sidebar: chat with open tabs, summarize pages, speed up research.Browser
- CursorAI-native editor built on VS Code: completion, multi-file edits, and agents that read the whole codebase.IDE
- GhosttyFast, GPU-accelerated terminal emulator with native UI on each platform, where commands, builds and agent CLIs run.Terminal
- Easing GradientsTailwind plugin that eases gradient stop distribution, softening the hard edges in fades and overlays.Gradients
Agents
Working with AI agents.
3- cmuxNative macOS terminal with vertical tabs and a built-in browser for running several coding agents in parallel.Terminal built for agents
- Claude CodeAnthropic's coding agent that lives in the terminal, understands the whole codebase, edits files and runs commands.Agent
- AgentationClick an element on screen, add a note, and your coding agent gets the exact selector and file.AI
Ship
Putting it live and getting paid.
6- LoopsEmail platform for SaaS: transactional, marketing and lifecycle sequences on one audience and one API.Email
- VercelGit-connected hosting: every push becomes a deploy with a preview URL, custom domains, and a global CDN.Hosting
- ResendEmail API for developers: sends a product's transactional and marketing mail, with templates written in React.Email
- PolarBilling platform and merchant of record: checkout, subscriptions and usage-based pricing, with sales tax handled.Billing
- SupabasePostgres-based backend giving each project a database, auth, file storage and serverless functions without managing infrastructure.Database
- StripePayment infrastructure behind an API: how a shipped product starts charging for subscriptions and one-off sales.Payments
Run the day
Keeping the day standing.
3- InterfereWatches the app in production, catching broken behavior before users report it and tracing the cause to code.Observability
- Notion CalendarFast, fully keyboard-navigable calendar that gathers Google, Outlook and Notion databases into the same agenda.Calendar
- ThingsTask manager for Mac, iPhone, and iPad: keeps ideas, deliverables, and deadlines organized by project.Tasks