Build a design system in an hour or less, then feed it into your AI coder and talk to create a website!

This method works whether starting with an existing live site that you want to transfer away from an expensive platform to a free one, or wanting to create a brand new design system and then a new site from that.

I recently copied my whole webflow portfolio to avoid the $328 annual subscription and am now using Claude + Github + Netlify which I can do within free limits for my design folio - whilst improving it and adding new sections really really fast!

I started with a unified design system, so that I could tell my AI what styles to use - and didn't even touch figma!

Here's the process

1. Start with a design system format. Find one with a structure you like — mine's here as an example and one you can use if you like. (It's a one page, a left-hand menu, with clear sections for logo, colour, type, buttons, components)
2. Feed that format into your AI and tell it to use it as the template with any live site — a client site, your portfolio, or any site whose style you love — Here's an example prompt "Use this design system [link] as a template to create a design system for [link] "
3. The AI pulls the actual colours, fonts and spacing in - adjust as you like any fonts, colours etc
4. Tell the AI to use that documented system for every new page from here on.
5. Once it's written down, changing one value is a single instruction — The AI finds every instance of the old one and updates it across the whole site.

​See my design system format as an example →

This video shows a value change working on the design system itself:

​

About Multi-Brand Design Systems

Companies often acquire or buy other companies and need to bring those under the brand umbrella of the main company.

I run two brands off one codebase — Artfuly (warm, educational, coral CTAs) and my own portfolio (black and white, teal accent only). Same typeface family, same nav bar, same colour-usage rules. Everything else — buttons, tone, imagery — is deliberately forked. The system is a short shared foundation, then two clear divergent branches.

Once you get over 5 brands, things get complex, so I've set out how to deal with that in this article:

If you want to try this with your own idea — a portfolio page, a side project, a tool for clients — that’s exactly what a 1:1 session is for.

20+ years of design. All yours for an hour.

​
​Freebies & tools I use (affiliate links)

• ​Claude Cowork — the desktop AI I use for writing, research and automating boring tasks. Free to try.
• ​Claude Code — the developer version. Free to start.
• ​Figma — you probably already have it, but if you're not using FigJam for whiteboards and workshops, it's worth a look.
• ​ElevenLabs — best AI voice tool going. Generous free tier.
• ​FramesX — great UI kits if you work in Figma.
• ​Wise — if you freelance internationally, this will save you a fortune on transfer fees.
• ​Creative Market — still the best place for quality design assets.

I only recommend tools I actually use.

Hit reply to ask me a question!

Rachael
​Designer since 1999. Learning something new every week — just like you.