Azuki — Design Spec Extractor

Analyze the current site's design and generate a DESIGN.md spec and design tokens for AI agents.

Azuki — Design Spec Extractor Simplify your design-to-code workflow with Azuki! Azuki is a powerful developer tool that instantly analyzes the visual design of any webpage (colors, typography, spacing, components, accessibility) and automatically generates a comprehensive DESIGN.md specification document and design tokens ready for AI coding agents. ✨ Key Features Instant Extraction: Extract exact colors, typography, spacing, and layout properties from the current site seamlessly with a single click. Markdown & Token Generation: Automatically formats the extracted design data into a clean, readable DESIGN.md file, alongside tokens.css and tokens.json ready for your repository. Developer & AI-Friendly: Perfect for documenting UI systems, bridging the gap between designers and developers, and providing accurate context for AI coding assistants. 🚀 How to Use Navigate to the website you want to analyze. Click the Azuki extension icon in your toolbar to open the side panel. Download your newly generated DESIGN.md, tokens, and visual assets instantly! 🔒 Privacy & Data Safety We value your privacy. Azuki operates with complete data safety: 100% Local Processing: All analysis runs strictly locally within your browser. Zero Data Collection: We do not collect, store, transmit, or sell any personal data, user behavior, or site information. There are zero external network requests made by this extension. 🛡️ Required Permissions Justification Azuki only requests the minimum permissions necessary to function: activeTab & scripting: To read the computed styles of the specific page you choose to analyze (only activated upon your click). downloads: To save the generated spec files, tokens, and screenshots to your local device. sidePanel: To display the clean analysis result UI. storage: To save your language preferences and local session results entirely on your device.