What kind of data does this skill extract?

It extracts specific design elements including hex color codes, typography weights and sizes, layout hierarchy, and call-to-action (CTA) patterns.

How many websites does the skill analyze per session?

The workflow is optimized to research approximately 6 to 8 industry-specific websites to provide a comprehensive cross-section of design trends and standards.

Can I use this for competitive analysis?

Yes, it is specifically designed for competitive research, identifying where competitors succeed or fail in their user interface and content presentation.

Does it work with other website auditing skills?

Yes, it is designed to be paired with accessibility and usability auditing skills to provide a complete evaluation of a website's frontend quality.

Website Design Research

Name: Website Design Research
Author: qte77

byqte77

0•

Design Tools

Analyzes industry-leading websites to extract design patterns, typography, and UI strategies using first-principles thinking.

This skill enables Claude to perform deep competitive design analysis by examining 6-8 industry-specific websites. It moves beyond superficial aesthetic reviews to identify structural breakthroughs, specific brand assets like hex codes and font pairings, and contrarian UX insights that challenge standard conventions. By applying first-principles thinking, it helps developers and designers understand not just what competitors are doing, but why specific layouts work, providing actionable data points and quick wins for immediate implementation in any frontend project.

Key Features

01Automated competitive design analysis across 6-8 industry-specific sites

02Extraction of technical design specs including hex codes and typography

030 GitHub stars

04First-principles evaluation of layout hierarchy and content strategy

05Cross-referenced source tracking to determine industry authority levels

06Identification of contrarian UX insights and high-impact design breakthroughs

Use Cases

01Establishing a new design system by researching successful industry-standard patterns

02Auditing an existing UI against modern design trends to identify optimization opportunities

03Conducting competitive analysis during the discovery phase of a new web project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add qte77/claude-code-utils-plugin researching-website-design

For use in Claude.ai and ChatGPT

Key Features

01Automated competitive design analysis across 6-8 industry-specific sites

02Extraction of technical design specs including hex codes and typography

030 GitHub stars

04First-principles evaluation of layout hierarchy and content strategy

05Cross-referenced source tracking to determine industry authority levels

06Identification of contrarian UX insights and high-impact design breakthroughs

Use Cases

01Establishing a new design system by researching successful industry-standard patterns

02Auditing an existing UI against modern design trends to identify optimization opportunities

03Conducting competitive analysis during the discovery phase of a new web project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add qte77/claude-code-utils-plugin researching-website-design

For use in Claude.ai and ChatGPT