Workflow · 24 ferramentas
Workflow
Ferramentas para desenhar, prototipar, construir e trabalhar com agentes, organizadas por etapa.
A ordem por etapa e as descrições são do Compound Design. danilodoamaral.vercel.app/tools
Desenhar
Decidir a forma: canvas, cor, ícone, curva.
4- easing.devCatálogo visual de curvas de easing: você compara o ritmo da animação e copia o código pronto.Easing curves
- FigmaEditor colaborativo de interface no navegador: é onde layout, tipografia e cor são decididos antes de existir código.Design
- oklch.fyiEscolhe, converte e gera cores em OKLCH, montando paletas de luminosidade uniforme para exportar em CSS ou Tailwind.Colors
- Central IconsÍcones com peso e raio de canto ajustáveis, disponíveis no Figma e como pacotes React.Icons
Prototipar
Provar que funciona antes de valer.
3- PaperCanvas de design feito de HTML e CSS reais, que exporta código e conversa com agentes via MCP.Prototyping
- CleanShot XCaptura, anota e grava a tela no Mac, com link na nuvem para mostrar o que já funciona.Screenshots
- ComprestoCompressor nativo de macOS que reduz vídeos, imagens, GIFs e PDFs, deixando gravações de tela leves para compartilhar.File compression
Construir
Escrever e rodar o código.
5- MotionBiblioteca de animação para React, JavaScript e Vue: springs, gestos, layout e scroll direto no código da interface.Animation library
- DiaNavegador com IA na barra lateral: conversa com as abas abertas, resume páginas e acelera a pesquisa.Browser
- CursorEditor baseado no VS Code, com autocomplete, edições em vários arquivos e agentes que leem o repositório.IDE
- GhosttyEmulador de terminal nativo e acelerado por GPU: onde rodam comandos, builds e as CLIs de agentes.Terminal
- Easing GradientsPlugin do Tailwind que aplica easing aos stops do gradiente, suavizando bordas duras em fades e overlays.Gradients
Agentes
Trabalhar com agentes de IA.
3- cmuxTerminal nativo do macOS com abas verticais e navegador embutido para rodar vários agentes de código em paralelo.Terminal built for agents
- Claude CodeAgente de codificação da Anthropic que roda no terminal, entende o repositório inteiro, edita arquivos e executa comandos.Agent
- AgentationMarca o elemento na tela, escreve a nota e o agente de código recebe seletor e caminho exatos.AI
Publicar
Colocar no ar e cobrar.
6- LoopsPlataforma de e-mail para SaaS: transacional, marketing e fluxos de ciclo de vida na mesma base e API.Email
- VercelHospedagem conectada ao Git: cada push vira um deploy com URL de preview, domínio e CDN global.Hosting
- ResendAPI de e-mail para quem programa: dispara transacionais e marketing do produto, com templates escritos em React.Email
- PolarPlataforma de cobrança e merchant of record: checkout, assinaturas e cobrança por uso, com impostos resolvidos.Billing
- SupabaseBackend em cima do Postgres: banco, autenticação, storage e funções serverless para o produto ir ao ar.Database
- StripeInfraestrutura de pagamentos via API: é como um produto lançado passa a cobrar assinaturas e vendas avulsas.Payments
Tocar o dia
Manter o dia em pé.
3- InterfereMonitora o app em produção, detecta comportamentos quebrados antes dos usuários reclamarem e aponta a causa no código.Observability
- Notion CalendarCalendário rápido e todo navegável por teclado; reúne Google, Outlook e bases do Notion na mesma agenda.Calendar
- ThingsGerenciador de tarefas para Mac, iPhone e iPad: mantém ideias, entregas e prazos organizados por projeto.Tasks