You Downloaded a UI Kit. Now What?

Step 1: Unzip it in its own folder

Make a new, empty folder, for example ui-kits/juniper-kit/, and unzip the file there. Do not unzip it inside your project yet. You want to look at it first.

Step 2: Find out what is inside

Most downloads have some of these:

• A Figma file (.fig) or a link to Figma. This is the design.
• Code files (.html, .css, .jsx, .svelte, .vue). This is a version you can run.
• Images and icons (.png, .svg, .webp).
• Fonts or a list of the fonts used.
• A README file. Read this first. It explains the rest.
• A license file. It says how you are allowed to use the kit.

Write down what you have. You will need this list in step 6.

Step 3: Read the license

Look for a file called LICENSE, license.txt, or a "License" section in the README or on the product page. Find the answers to these questions:

• Can I use it in a client project?
• Can I use it in a product I sell?
• Can I share the files with my team?
• Do I need to credit the author?

If you are not sure, ask the seller before you publish anything.

Step 4: Check the fonts

Missing fonts are the most common reason a kit "looks wrong".

1. Open the Figma file. If Figma shows a message about missing fonts, write down their names.
2. Look for those fonts on Google Fonts or on the font maker's website. Some fonts are free, some are paid.
3. Install them on your computer for Figma, and add them to your project for the website.

If you cannot get a font, choose one replacement and use it everywhere. Tell your agent which one.

Step 5: Open it the right way

For a Figma file:

• In Figma, go to your files and use "Import" to open the .fig file.
• Look at the pages on the left. Kits often have a "Components" or "Styles" page. That page is the most important one.

For code:

• If there is a package.json, the README will tell you how to install and start it. Usually it is two commands, for example npm install and then npm run dev.
• If there are only .html files, open them in your browser.

Look at it on a computer and with a narrow window, so you see the phone version too.

Step 6: Give it to your agent

This is where most people go wrong. They put the kit in the project and say "use it". The agent often ignores it and builds something new.

Do this instead:

1. Copy the kit into your project, in a clear folder, for example src/ui-kit/.
2. Add this to your instructions file (see A Small Instructions File Your AI Agent Will Read):

## UI kit
- Our UI kit is in src/ui-kit/.
- Always use its components, colors, fonts and spacing.
- Before creating any new component, check if the kit already has one.
- If the kit does not have what we need, tell me before creating something new.

3. Start with a small test. Ask:

Build a simple page that uses the button, the card and the input from src/ui-kit/. Do not create new styles. List which kit files you used.

4. Compare the page with the kit. If the agent invented new colors or buttons, remind it of the rule and ask it to use the kit's version.

If you use Figma with your agent

Some agents can read Figma files directly through an MCP connection. If yours can, you can send a link to one frame and ask the agent to build only that frame with your kit's components. See the HorizonX docs on Figma to code with AI for a reusable prompt.

Step 7: Change it to make it yours

A kit is a starting point. Change these first:

1. Colors: replace the main and accent colors with your brand colors.
2. Logo and name.
3. Text: replace all sample text. Never publish "Lorem ipsum".
4. Images: replace sample photos with your own or ones you have the right to use.

Change these in one central place (the colors file or the Figma styles), not one by one on each screen.

Common problems

• "It looks different from the preview." Usually missing fonts or missing images. Check step 4.
• "The agent keeps making new buttons." The instructions file does not mention the kit, or the folder name is unclear. Check step 6.
• "It breaks on phones." Some kits are designed for desktop only. Check the kit's pages for a mobile version before you start.

Check before you build

• I read the README and the license.
• I have all the fonts, or chose one replacement.
• The kit is in a clear folder in my project.
• My instructions file tells the agent to use it.
• A small test page used the kit's components correctly.