buildwithclaude

The Inspiration Analyzer is a specialized skill designed for developers, UI/UX designers, and product creators who need to translate web inspiration into actionable technical requirements. By leveraging integrated browser control tools, this skill visits target URLs to perform an automated audit of visual and structural elements. It is particularly useful when beginning a new design project, benchmarking competitors, or gathering components for a design system, as it removes the need for manual screenshotting and style inspection.

• Automated browser navigation and viewport management including mobile (375x812) and desktop states.

• Comprehensive color palette extraction, identifying primary, secondary, background, and accent hex codes.

• Deep typography analysis including font-family, font-weights, letter spacing, and hierarchical scale documentation.

• Layout pattern decomposition, identifying grid systems, spacing philosophy, navigation styles, and structural sectioning.

• Automated screenshot capture of heroes, scrolled content, and interactive UI states like hover effects.

• Generation of structured, markdown-formatted inspiration reports ready for inclusion in design docs or moodboards.

• The skill functions optimally when given specific URLs; it automates site exploration, saving significant time on manual CSS inspection.

• Expected output includes a tabulated color palette, typography recommendations, and layout insights that guide subsequent development.

• In scenarios where browser access is restricted, the skill enters a fallback mode, prompting the user for manual screenshots and descriptive input to continue the analysis.

• It is highly recommended to provide high-fidelity URLs; the tool performs best on modern, responsive websites where CSS computed styles are clearly defined.

• Users should monitor terminal output for browser feedback and can refine analysis by providing specific sections or elements of interest during the process.