Design and Component Strategies

Copy and Match Designs

Adapting Designs You Love

Found a design you love? Here’s how to use it:

1. Find and copy component code (or screenshot)
2. Show it to your favourite vibe coding tool:

Make my navigation menu look like this style:
[paste component code/screenshot]
Keep the same visual style but change it to include these menu items:

- Home
- Products
- About Us

Reference: TailwindCSS Layout

Style Pattern Library

Save working components and styles. Use these prompt formats:

For New Components:

Using this button style:
[paste button code]
Create matching components for:
- Form inputs
- Cards
- Alert messages


For Design Systems:

Look at this card design:
[paste code]
Create a product grid using the same:
- Shadow effects
- Border styles
- Color scheme
- Spacing patterns

Reference: TailwindCSS Card