Reusable components, not clones
How do I reuse website components across clients without every site looking the same?
Keep a kit of tested components driven by design tokens and content, then make each site specific to the client through its brief, photos, copy and layout choices.
What you will be able to do
Build a small kit of tested components you reuse on every project, and use design tokens, real content and deliberate layout choices so each site clearly belongs to its client.
Before you start
- At least one site built or started, as in Build with an AI coding assistant.
- Comfort with CSS custom properties (variables like
--color-primary). - The AI website prompt pack
Why this matters
There are two ways to go fast. A component kit is a set of well built pieces that already handle phones, accessibility and performance. Cloning is copying last month's site and swapping the logo. The first is a craft. The second is a liability: local businesses notice when a competitor's site looks like theirs, and a clone ignores the brief.
A kit solves the boring parts once, so you spend your time on what makes this client different: their message, photos, proof and layout priorities.
Step by step
Tick each step as you do it. Your ticks are saved in this browser.
Pull your best components out of a finished project
Pick the pieces that were hardest to get right and are needed almost everywhere: header with mobile menu, hero, service cards, review strip, call to action band, contact block, footer. Copy each into a new
component-kitrepository, one folder per component.Strip out every client specific value
Replace hard coded colours, fonts, spacing and radius with design tokens. Replace text with slot names like
{{headline}}. Remove client images. Search the kit for the old client's name and phone number.Define a token file that drives the whole look
One
tokens.csswith colours, fonts, type scale, spacing, radius and shadow. Every component reads only from tokens. Changing ten lines in that file should make the kit look like a different brand. If it does not, a component is still hard coding values.Give each component variants, not copies
A hero can be "text left, photo right," "full width photo with overlay," or "text only." Build these as variants of one component, not three heroes. Same for cards and call to action bands.
Test the kit once, properly
Put every component and variant on one demo page. Check it at 375px, 768px and 1280px. Tab through it with the keyboard, check contrast and run a performance check. Fix issues in the kit, so every future site inherits the fix.
Start each new site from the brief, not from the kit
Decide each page's section order from the ideal customer and their objections. Only then pick components to fill those sections.
Make the visual identity specific
Set the tokens from the client's real brand. If they have none, choose a palette and type pairing that suits the industry and customer, and write the reasoning in the project instructions file.
Make the content specific
Real photos of their place and people, headlines for their customer and service area, their own reviews with permission, their answers to the three objections. This is most of what makes a site theirs.
Change at least one structural thing per site on purpose
A different hero variant, a different section order, or a component only this client needs, like an insurance checker for a clinic. Write down why it fits. If you cannot name a reason, you are probably cloning.
Feed improvements back into the kit
Port fixes and better variants back with a commit message saying where they came from. Tag kit versions (
git tag v1.3) so you know which version each site started from.
Example
Two fictional sites from the same kit: a family dental clinic in Austin and an emergency roofing company in Columbus, Ohio.
Austin Family Dental Columbus Storm Roofing
Primary action Book a new patient visit Call now (24/7 line)
Hero variant Text left, clinic photo right Full width photo of real crew,
dark overlay, phone number huge
Header on phones Book button + call icon Sticky call bar at the bottom
Tokens Calm teal, warm yellow, High contrast navy and orange,
rounded corners, airy spacing square corners, tight spacing
Section order Reviews, services, insurance Service area map, how fast we
answers, how booking works arrive, insurance claims help,
licences and real job photos
Unique component "Do you take my insurance?" "Storm damage photo checklist"
lookup list for the insurance claim
And a prompt for adapting a kit component to a client:
Read CLAUDE.md, docs/brief.md and kit/hero/README.md.
Use the hero component from kit/hero with the "photo overlay" variant.
Do not change files in kit/. Copy it into src/components/hero.
Set content from docs/content.md "Home / hero", word for word.
On phones under 600px, the phone number must be the largest element
and be a tap to call link. Use only tokens from css/tokens.css.
Tell me every place you had to change the component's structure.
Same kit, same speed, two sites no customer would mistake for each other.
Common mistakes
- Copying the last client's repository. Old analytics IDs and phone numbers leak in.
- Letting the kit decide the page order. If every site has the same sections in the same order, the brief is not driving the design.
- Stock photos everywhere. The same stock imagery makes two sites look identical. Push for real photos.
- Selling a template as custom work. If your offer is a templated site at a lower price, say so. If you sell custom, deliver custom.
Try it yourself
Start a component-kit repository. Extract or build three components: a header with a mobile menu, a hero with two variants, and a call to action band. Move every colour, font and spacing value into tokens.css. Make two token files for two fictional businesses in different industries and screenshot the same demo page with each.
Time: about 60 minutes.
Deliverable: the repository and two screenshots that look like two different brands.
Resources
- AI website prompt pack prompts for extracting and adapting components
- Build with an AI coding assistant project files and commit habits the kit relies on
- Plan the sitemap and content where section order really comes from
- Managing many client sites keeping a kit and many sites in sync
Finished this lesson?
Mark it complete to track your progress through the course.
Last reviewed October 18, 2026. Prices, laws and tool terms change, so check current terms before you rely on any figure.