design-reference
CommunityTranslate website inspiration into design guides.
Authorpeterbamuhigire
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill bridges the gap between a client's aesthetic preferences, often expressed through example websites, and actionable design specifications for a new website.
Core Features & Use Cases
- Analyze Reference Websites: Visits up to 5 client-provided URLs to identify design patterns, typography, color palettes, and interaction styles.
- Generate Design Guide: Creates a structured Markdown document (
docs/design-reference.md) detailing recommended design elements, layout patterns, and features. - Use Case: A client provides three links to websites they admire. This Skill analyzes them to understand their shared visual language and generates a guide that informs the design-system and page-builder skills, ensuring the new site aligns with the client's taste.
Quick Start
Analyze the provided reference websites and generate a design guide.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: design-reference Download link: https://github.com/peterbamuhigire/website-skills/archive/main.zip#design-reference Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.