Skip to main content
The Inspiration Library has two tabs:
  • Inspirations: A curated universe of design references drawn from real brands. Use them as inspiration for your next design generation.
  • Templates: Production-ready templates that you can remix and craft an original design from.

​
Open the Inspiration Library

Click the Inspirations button below the chat input box. You can also access it from the Canvas Gallery or the Design System page by clicking the Inspiration Library button at the top-right of either page.

​
Browse inspirations

The Inspirations tab shows a grid of cards, each representing a different brand. Click on a card to open the detail page for that inspiration, or hover over the card and click the Use as style guide button to download and attach the inspiration’s Style Guide to the chat.

​
Inspiration detail page

Click any card to open its detail page. Here’s the list of actions and information you can find on the detail page:

​
Use as style guide

The primary action on the detail page is the Use as style guide button. Clicking it saves the inspiration’s color palette, typography, and other tokens as a new Style Guide in your workspace and attaches it to the Kombai chat so it’s applied to your next generation.

​
Preview

The top of the page shows a live preview of the brand’s site.

​
Design Reference

Below the preview is the Design Reference: A structured write-up of the brand’s visual system, covering colors, typography, layout, shapes, motion, iconography, dos & don’ts, and known gaps. Expand the Design tokens panel inside it to inspect raw token values (color variables, type ramp, radius scale, etc.).

​
Palette and Typography panels

The pallete and typography panels on the right side of the page list out the hex values of the colors used in the brand’s palette and the font families used in the brand’s typography.

​
Browse templates

Templates are production-ready tasteful designs that you can remix in Kombai to create original work. Unlike inspirations, which serve as visual references, a template is a complete design that lands directly on your canvas, ready to be customised with your own content and branding. To browse all the templates, switch to the Templates tab in the Inspiration Library.

​
Preview a template

Click any template card to open a full live preview of the template in a new browser tab. Use the preview to inspect the design at full fidelity, typography, imagery, layout, and interactions, before deciding to remix it.

​
Use a template

Hover over a template card to reveal the Use template button. Click Use template to download the canvas file of the template in your repo. This also attaches the canvas file to the chat input, along with the Remix Design chip, so you can immediately start customizing it. See Remix a template for what to do next.

​
Remix a template

Remixing takes an existing template and repurposes it for a different use case while keeping the design itself unchanged. The output is a brand new design that faithfully mirrors the source: same sections, same layout, same animations, same colors, same typography. Only the copy (text content) and the assets (images / videos / illustrations / icons) change, so the design now speaks to your product, audience, and value proposition.

​
How to remix

  1. Open the Templates tab and click Use template on the design you want to start from.
  2. The template canvas is added to your repo and attached to the chat with a Remix Design chip.
  3. Describe the new use case in your prompt, e.g.:
    “Remix this into a landing page for a meal-kit delivery service.”
  4. Before generating any new images or videos, Kombai will list the assets it plans to replace and ask for your approval (including cost). You can approve generation, choose stock alternatives, or fall back to neutral placeholders.
  5. Kombai generates a new design with your copy and assets in place. The original template node is never overwritten, so you can iterate or branch off it freely.

​
Resource Library

Kombai’s Resource Library contains external frontend resources for UI libraries, design inspirations, colors, typography, animations, and assets. Use it to discover high-quality resources and creative inspiration for building beautiful interfaces.

​
Get started

There are two ways to attach a resource:

​
@Resources command

  1. Launch Kombai extension in your IDE.
  2. Type @ in Kombai’s chat input box and select Resources from the list.
  3. Select a resource category from the list, e.g., Colors.
  4. Select the resource you want to attach, e.g., Color Hunt.
  5. Prompt Kombai to use the resource.
  6. Press Enter or click the button to send the message.

​
Resources button

  1. Launch Kombai extension in your IDE.
  2. Click the Resources button below Kombai’s chat input box.
  3. Click on the resource you want to access.
  4. Follow the instructions in the modal to use the resource.

​
Usage examples

Ask Kombai to search and use components from the attached UI library. It will navigate to the site, extract the component code and apply it to your app.

​
Example prompts

  • Use the <PixelImage /> component from @magicui for the cover image of my product cards.
  • @aceternityui What component can I use to highlight the product demo on my website?
  • Instead of a carousel, what can I use from @smoothui to showcase the client testimonials on my website?
Attach one of the resources and ask Kombai to search for design inspirations for a site, page, section or layout. Kombai will then navigate to the site and find relevant inspirations based on your task and apply it to your app.

​
Example prompts

  • @saasframe suggest some page inspirations that I can use for my website’s 404 pages
  • I want to add a Scheduled Maintenance banner to my app. Suggest some options from @mobbin
  • I want to create my portfolio website. Suggest some beautiful, modern portfolio websites from @framer
Ask Kombai to generate a color palette for your app or select from existing ones. It will use the browser to navigate to the site and retrieve options to choose from. It will then apply those colors to your app.

​
Example prompts

  • Recommend some color palettes that go with my green theme from @colorhunt
  • Explore @goodpalette and generate some color palettes for my e-commerce website.
  • @brandcolors Give me a color palette that is similar to the brand Adidas.
Ask Kombai to use a font from the attached font library. Or, ask Kombai to get a font pair for your app based on your theme and niche. Kombai will then navigate to the site, get/generate the font/font pairs and use it in your app.

​
Example prompts

  • @fontpair What font pair goes best for the title and description of my product card
  • Use Montserrat from @googlefonts for all headings in my codebase.
  • Generate a modern, minimal font pair from @fontpairstudio for the new blog post page.
Ask Kombai to search and use animations from the attached animation library. It will navigate to the site and find relevant options based on your task and apply it to your app.

​
Example prompts

  • Get card swipe animation from @motion and apply it to my product catalog cards.
  • Suggest some smooth page scroll animations from @CodePen GreenSock
  • Add a confetti animation from @GSAP when the user finishes their account wallet setup

​
Supported resources

Find the complete list of supported resources here.