Style Clone Skill - Usage Guide

Quick Start

This skill automatically activates when you mention wanting to copy or replicate a website's design. You can trigger it with phrases like:

• "Copy the design from [website URL]"
• "Extract the style guide from [website]"
• "Help me replicate the UI from [website]"
• "Create a design system based on [website]"

Prerequisites

1. Chrome MCP must be installed and running

   • This skill depends on Chrome DevTools MCP to extract CSS and interact with websites
   • Make sure Chrome MCP is configured in your MCP settings

2. Working Directory

   • The skill will create output files in your current working directory
   • Make sure you're in the right project folder before starting

Example Workflow

Example 1: Clone a Website Style

User: "I want to copy the design style from https://motherduck.com"

Claude will:
1. Open the website in Chrome
2. Extract all CSS styles and HTML structure
3. Create a reference HTML file (motherduck-reference.html)
4. Iterate with you to achieve pixel-perfect recreation
5. Generate a comprehensive style-guide.md
6. Offer to create new UI components using the style

Example 2: Create New UI with Extracted Style

User: "Now use this style to create a dashboard page"

Claude will:
1. Reference the generated style-guide.md
2. Apply all design principles (colors, typography, spacing)
3. Create a new HTML/React component matching the style
4. Ensure 100% consistency with the original design

Example 3: Build a Full Application

User: "Build a Next.js todo app using this style"

Claude will:
1. Create a Next.js project structure
2. Break down the style into reusable React components
3. Apply the style guide throughout the application
4. Implement responsive design with the extracted breakpoints

Output Files

After running this skill, you'll get:

1. [sitename]-reference.html - A pixel-perfect recreation of the original page

2. style-guide.md - Comprehensive design system documentation including:

   • Color palette
   • Typography scale
   • Spacing system
   • Component styles
   • Animations
   • Responsive breakpoints

3. extracted-styles.css (optional) - Raw CSS extracted from the website

Tips for Best Results

1. Start with a Specific Page

Instead of: "Copy the entire website" Better: "Copy the homepage hero section from [URL]"

2. Iterate on Details

The first recreation might be 80-90% accurate. Don't hesitate to point out:

• "The blue color should be slightly darker"
• "The spacing between items feels too tight"
• "The font weight doesn't match"

3. Use the Style Guide for Consistency

Once generated, always reference the style guide:

• "Create a login form using the style guide"
• "Design a new page section following the style guide"

4. Extend Beyond Web UI

The style guide can be used for:

• Slide decks: "Create a pitch deck using this style"
• Animations: "Make a product demo animation with Framer Motion"
• Email templates: "Design an email newsletter with this style"

Common Issues & Solutions

Issue: CSS Extraction Fails

Symptom: Empty or incomplete styles extracted Solution: Some websites block CSS extraction due to CORS. Claude will automatically switch to extracting computed styles from individual elements.

Issue: Colors Don't Match

Symptom: Colors look similar but not exact Solution: Ask Claude to inspect specific elements and extract exact color values. Be specific: "Check the exact color of the primary button"

Issue: Layout Feels Off

Symptom: Elements don't align properly Solution: Request inspection of spacing and layout properties: "Extract the exact padding and margin values from the original"

Advanced Usage

Custom Design Principles

You can add your own design requirements:

"Copy the style from [URL] but make it more accessible with higher contrast ratios"
"Extract the style but adapt it for a mobile-first design"

Partial Style Extraction

You don't need to copy everything:

"I only want the button styles from [URL]"
"Extract just the color palette and typography from [URL]"

Style Mixing

Combine multiple sources:

"Use the color scheme from [URL A] and the typography from [URL B]"

Integration with Other Tools

With Next.js/React

"Create a Next.js component library based on this style guide"

With Tailwind CSS

"Generate a Tailwind config file from this style guide"

With Framer Motion

"Create animated components using this style and Framer Motion"

FAQ

Q: Does this work with any website? A: Yes, but some websites with heavy JavaScript rendering might require additional steps. Static sites work best.

Q: Can I modify the extracted style? A: Absolutely! The style guide is your starting point. You can ask Claude to adjust colors, spacing, or any other aspect.

Q: How accurate is the extraction? A: With proper iteration, you can achieve 100% pixel-perfect accuracy. The key is co-creating and refining together.

Q: Can I use this for commercial projects? A: The skill extracts design patterns and styles. Always ensure you have the right to use the design system you're replicating. This tool is best used for learning, inspiration, or recreating your own designs.

Q: Do I need design experience? A: No! The skill guides you through the entire process. You just need to provide feedback on what looks right or wrong.

Next Steps

After creating your style guide:

1. Test Consistency: Ask Claude to create multiple different components
2. Build Real Features: Start building your actual application
3. Share with Team: The style-guide.md can be shared with designers and developers
4. Iterate: Keep refining the style guide as your product evolves

Support

If you encounter issues:

1. Check that Chrome MCP is running properly
2. Ensure you're in the correct working directory
3. Try with a simpler webpage first to verify the setup
4. Provide specific feedback during the iteration process

Happy cloning! 🎨