tool⁽¹⁹⁾

Automatic CSS and Tailwind code generator for modular typographic scales. Visual preview with customizable ratios and base sizes — outputs production-ready code in seconds.

macOS app for turning code snippets into shareable images, with syntax highlighting for 180+ languages, 80+ themes, and controls for type, padding, shadows, and social formats.

Figma plugin adding timeline-based keyframe animation directly in Figma. Creates motion prototypes and exports without leaving your design file — the closest thing to After Effects inside Figma.

Browser extension that identifies fonts on any website — name, size, line height, color — with AI pairing suggestions and variable font discovery. Essential for reverse-engineering great typography.

Motion design tool for animated social content, UI animations, and marketing video with a timeline-based interface. No After Effects required — ideal for designers who need motion output fast.

Modern color picker using the OKLCH color space for perceptually uniform palettes. Prevents the harsh jumps in lightness that plague HSL — essential for anyone building systematic color scales.

Native Mac utility for batch-converting and compressing images, video, audio, RAW files, and PDFs locally. Includes presets, watched folders, clipboard optimization, and Finder actions.

Fast timeline-based Mac tool for creating screen transitions and app flows. Intuitive and opinionated — the fastest way to prototype motion for presentations without writing code.

No-code prototyping tool for realistic app behavior with variables, conditions, and sensors. Ideal for testing microinteractions and complex flows that Figma can't replicate.

Generates accessible color combinations that meet WCAG contrast requirements. Instant random pairings with AA/AAA compliance indicators — useful for quickly finding accessible text/background combos.

Visualizes color palettes on actual website mockups in real-time. Select neutrals, primary, secondary, accent colors and instantly see how they feel together — exports as CSS, SCSS, or PNG.

Real-time interactive animation tool with state machines for user input, complex logic, and UI transitions. Exports production-ready runtimes for web, iOS, and Android — the most powerful tool for shipping interactive animation.

Native macOS menu bar tracker for usage, costs, and rate limits across Codex, Claude, Cursor, Copilot, Gemini, and other coding tools. Useful for planning long agent sessions.

Web-based 3D design tool for creating interactive scenes with real-time collaboration and AI assistance. Embeds 3D directly into websites — lowers the barrier to adding 3D to product UIs significantly.

Advanced palette builder with manual hue/saturation sliders supporting OKHSL/LCH color spaces, image import, contrast checks, and exports up to 24 colors. For designers who want precise control over perceptual uniformity.

Free tool and Figma/XD/Penpot plugin that generates balanced typography systems using mathematical ratios. Creates consistent hierarchies for web and UI design — input your base size and get a full scale with CSS ready to copy.

3D and AR design tool for product visuals and web 3D with drag-and-drop interface and real-time rendering. Good for non-3D designers who need compelling product shots.

Browser-native 3D modeling with an intuitive sculpting approach. Exports to Figma/Illustrator for UI mockups, supports PBR materials and 4K renders — no 3D experience required.

Compares your installed fonts and Google Fonts in a grid with your own text, allowing tracking adjustments and quick exports. Faster than previewing fonts one at a time in any design tool.