Zaai Dev

Structured brand reference capture for design teams working with AI tools. Page, element, palette, and animation metadata.

Zaai Dev captures structured design references from any web page, full-page screenshots, viewport shots, or individual elements, with rich metadata that AI design tools can actually use. WHAT GETS CAPTURED Every capture stores far more than a screenshot: • Page-level captures include the page palette (6 dominant colors), fonts in use, sections (header / hero / nav / footer), full HTML, meta description, og:image, and a complete motion vocabulary — every CSS @keyframes name, every animation library detected (Framer Motion, GSAP, AOS, anime.js, Lottie, Lenis, Locomotive). • Element captures include the element's outerHTML, computed CSS across ~47 properties, animation data (CSS transitions, keyframe animations, hover/focus/active state diffs, live event-driven motion observation), and media (videos with sources / posters / autoplay flags, images with srcset, background-image URLs, carousel detection with slide counts). • Composite captures bundle multiple elements into one reference, pick a hero + a feature row + a footer with Shift+click, commit the set as one capture. USE IT WITH AI DESIGN TOOLS Built for designers, agencies, and developers using Claude, Cursor, v0, Lovable, and Figma. Every capture exports cleanly as JSON or HTML, ready to paste into your AI tool's prompt or attach as reference. ORGANIZE WHAT YOU CAPTURE • Tags (autocomplete + create-on-Enter) and collections (free-form named groups). • Filter the library by search, by tag, or by collection — AND semantics across all filters. • Per-capture notes for the rationale behind each pick. INSPECT MODE FOR PRECISION A designer-grade element picker: dim backdrop, animated outline, readout chip with selector + component type + dimensions. Walk parent / child with up and down. Tab to lock the selection so you can move your mouse off the page. Alt-hold to sample colors as a custom palette via eyedropper. Bottom-center layer carousel shows the selection's parent + current + child as clickable wireframe tiles. LOCAL-FIRST, OPTIONAL CLOUD WORKSPACE Capture, organize, and export references entirely on your own device — no account required, exportable as a single JSON file any time. To organize captures across projects and devices, you can connect a Zaai Dev workspace at zaaidev.com (optional). Connection is one click; once connected, each capture has a "Send to project" button you choose to use per-capture. No background sync, no auto-upload — every push is your explicit action. PRIVACY Read the full privacy policy at https://zaaidev.com/privacy/extension. Summary: by default everything stays on your device. The optional workspace connection only transmits the captures you explicitly push. No analytics SDKs, no third-party tracking inside the extension.