DESIGN.md Style Generator - Tokens for Claude, Antigravity, Cursor & Codex

Extract CSS variables, typography, and layout into clean DESIGN.md files for Claude Code, Antigravity, Cursor, and Codex.

Extract CSS variables, webpage design tokens, font families, and color palettes from any site using this advanced webpage UI style extractor and design system generator. Instantly generate clean, structured DESIGN.md and SKILL.md styling instructions optimized to teach AI coding assistants like Claude Code, Antigravity, Cursor, and Codex exactly how to write consistent, component-compliant frontend code. Create production-ready Tailwind configs, Shadcn/ui stylesheets, and WCAG contrast audit checklists directly in your browser. ✦ CORE MISSION: BRIDGING WEBSITES AND AI FRONTIEND AGENTS DESIGN.md Style Generator is a professional webpage UI stylesheet scanner and design system extractor. It solves a critical problem for modern developers building websites with AI code assistants. While AI models like Claude, Cursor, Antigravity, and Codex are incredibly powerful, they do not have access to your active styling rules, spacing scales, or typography context. This lack of visual context causes AI agents to write front-end code with style drift, wrong colors, random margins, and layout shifts. By running a deep DOM CSS scan, this extension generates structured context files (DESIGN.md and SKILL.md) that you can feed directly to your LLM workspace. This teaches your AI coding assistant the exact styling parameters of your project, guaranteeing it outputs clean, consistent front-end code on the very first try. ✦ IN-DEPTH FEATURE BREAKDOWN & FUNCTIONALITY 1. DEEP WEB DOM SCANNER & STYLESHEET PARSER Our advanced page inspector runs directly in your active tab to extract a comprehensive design system. It bypasses complex stylesheet overrides to capture computed values in real-time. - Extract CSS Variables: Scan and extract raw CSS custom properties, root CSS variables, and global component themes. - Typography & Font Extractor: Identify active font families, weights, font-sizes, line-heights, and typography scale constraints. - Color Palette Capture: Automatically grab primary, secondary, background, text, and border colors in HEX, HSL, and RGB formats. - Spacing & Layout Auditor: Map out margins, paddings, border radius values, box shadows, and transition durations. 2. STRUCTURED AI STYLING INSTRUCTION GENERATORS Teach your AI model your exact styling rules without wasting token limits on redundant context. - DESIGN.md Document Generator: Create a structured markdown style guide summarizing your colors, spacing scales, font hierarchies, and border properties. - SKILL.md AI Agent Rules: Create a instructions file designed for Claude, Antigravity, Cursor, and Codex. It teaches the AI how to implement components matching your styling guide. - Drastically Reduce Visual Bugs: Keep your AI-generated React, Vue, HTML, and Tailwind code aligned with your core brand guidelines. 3. PRODUCTION-READY CODE CONFIGURATION EXPORTERS Convert scanned webpage styles into production-ready code configurations for your favorite front-end frameworks. - Tailwind Config Generator: Export a copy-pasteable tailwind.config.js complete with your scanned colors, custom spacing scale, and border-radius tokens. - Shadcn/ui Theme Exporter: Output CSS variable themes pre-configured for direct use inside Shadcn ui tailwind stylesheets. - CSS Variable Exporter: Generate raw CSS root properties to immediately set up your global styling tokens. - Framework Support: Generate custom theme definitions for Material UI (MUI) and Chakra UI systems. 4. REAL-TIME STYLE REFINER PLAYGROUND Refine and test design systems in real-time inside the extension panel before exporting files. - Color Customizer: Tweak primary brand colors and global border radii in the customizer panel. - Live Palette Visualizer: Instantly see color adjustments, generate Dark/Light mode color palettes, and preview changes. - Save Custom Configurations: Save edited design tokens directly back to your local files. 5. WCAG CONTRAST COMPLIANCE AUDITOR Audit your page styles for accessibility compliance to ensure your design is usable and meets legal requirements. - Automatic Contrast Analyzer: Read text-to-background color combinations on the page to calculate contrast ratios. - WCAG 2.1 AA & AAA Validation: Check compliance against accessibility guidelines. - Compliant Color Suggestions: Get recommended, brand-compliant replacement colors to satisfy accessibility requirements. 6. PRO FEATURE: MULTI-PAGE SYSTEM MERGING Create a single, unified design system across complex multi-page web applications. - Scan Multiple Pages: Collect style tokens from different sections of your web app. - Smart Merging: Resolve conflicting variable values and merge everything into a unified design system. 7. PRO FEATURE: DEVELOPER THEME WEBHOOKS Connect your scanned webpage styles to external automation pipelines. - JSON Theme Dispatcher: Send scanned style guide JSON payloads directly to your API server or local developer environment. - Automated Integration: Instantly update your codebase with fresh design configurations. ✦ OPTIMIZED WORKFLOW INTEGRATION FOR AI DEVELOPERS Using DESIGN.md Style Generator in your daily web development cycle is simple and highly efficient: 1. Scan: Navigate to any live website, open the Chrome side panel, and run a scan. The extension parses the DOM to gather all active typography, layout variables, and colors. 2. Refine & Audit: View the WCAG contrast audit to identify accessibility issues. Adjust primary colors and border radius values in the Playground to refine the palette. 3. Export: Copy the generated DESIGN.md and SKILL.md files. Place them into the root directory of your project (e.g., in your Cursor, Claude Code, or Codex workspace). 4. Prompt Your AI: Simply instruct your AI agent: "Read DESIGN.md and SKILL.md in the root directory. Build a new dashboard component using these exact styles." 5. Enjoy Consistent Code: The AI reads the styling context and generates compliant code without style drift. ✦ PRIVACY & SECURITY BY DESIGN This extension operates under strict privacy and security standards to protect your proprietary code: 1) 100% Local DOM Parsing: Scanning, token extraction, and code generation occur entirely inside your browser sandbox. Your source code and designs are never uploaded to our servers. 2) Safe Chrome Identity OAuth Integration: Authentication and plan sync are handled securely through Google's native services. 3) No External Data Storage: Scanned styling tokens, palettes, and configurations are kept private to your local browser environment.