Documentation Index
Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
Use this file to discover all available pages before exploring further.
Why use it
Starting a design from a blank prompt often produces generic results. The Inspiration Library gives Kombai a concrete visual reference — so instead of describing abstract qualities like “modern” or “clean”, you show exactly what you mean.- Faster direction-setting: Skip lengthy style descriptions. Attach an inspiration and Kombai immediately understands the aesthetic direction.
- Production-quality starting points: Every inspiration is drawn from a real, polished brand, so the resulting designs reflect professional-grade visual standards.
- Reusable design tokens: Copy an inspiration’s color palette and typography as a Style Guide and apply it consistently across all your future designs.
- Learn from real design systems: The Design tokens panel and brand analysis on each detail page are a practical reference for understanding how high-quality brands structure their visual identity.
Use cases
Generate a design that matches a brand's aesthetic
Generate a design that matches a brand's aesthetic
Find an inspiration whose visual style resonates with your project. Click Use as inspiration to attach it to the chat, then describe what you want to build. Kombai will generate a design that captures the same look and feel — color temperature, typographic rhythm, spacing density — without copying the brand’s content or layout.Example prompt: “Create a pricing page” (with a dark, high-contrast inspiration attached)
Explore design directions before committing
Explore design directions before committing
Browse and filter the library to find two or three inspirations representing different directions — for example, one minimalist light design and one bold dark design. Use each as inspiration in separate generations to quickly produce side-by-side design explorations before deciding on a direction.
Study a brand's design tokens
Study a brand's design tokens
Open any inspiration’s detail page and expand the Design tokens panel to inspect its exact color values, surface system, and accent choices. Use this as a reference when building a custom Theme or when you want to understand what makes a particular visual identity work.
Open the Inspiration Library
Click the icon (before the send button) to open the Inspiration Library page. 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 library displays inspirations as a grid of cards. Each card shows a screenshot of the brand’s website, a short description on hover, and the brand name below.Filter by style
Use the filter tabs at the top to narrow down inspirations by visual style:| Filter | Description |
|---|---|
| All | Shows all available inspirations |
| Modern | Clean, contemporary aesthetics |
| Light | Light-background designs |
| Minimalist | Stripped-back, low-noise layouts |
| Uses Animations | Designs that feature notable motion and animation |
| Dark | Dark-background designs |
Card actions
Hover over any card to reveal the Use as inspiration button. Click the arrow on the button to expand the dropdown:| Action | Description |
|---|---|
| Use as inspiration | Attaches the inspiration to the Kombai chat as design context for your next prompt |
| View details | Opens the full detail page for the inspiration |
Inspiration detail page
Click View details on a card, or click the card itself, to open the detail page for an inspiration. The detail page shows:- Title and description: The brand name and a summary of its visual identity.
- Action button: Use as inspiration button to attach the inspiration to the Kombai chat.
- Design Reference panel: A collapsible Design tokens section showing the brand’s color palette and other tokens in a structured format. Expand it to inspect individual token values.
- Live preview: A live render of the brand’s website, shown alongside the design reference.
- Brand analysis: A detailed written breakdown of the brand’s visual system, including typography, spacing, surface choices, and key design decisions.
Use as inspiration
Click Use as inspiration to attach the inspiration to the Kombai chat. Kombai will use it as a visual reference when generating your next design, matching the brand’s overall aesthetic, color palette, and typographic style without copying it directly.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
- Launch Kombai extension in your IDE.
- Type
@in Kombai’s chat input box and select Resources from the list. - Select a resource category from the list, e.g., Colors.
- Select the resource you want to attach, e.g., Color Hunt.
- Prompt Kombai to use the resource.
- Press Enter or click the button to send the message.
Resources button
- Launch Kombai extension in your IDE.
- Click the Resources button below Kombai’s chat input box.
- Click on the resource you want to access.
- Follow the instructions in the modal to use the resource.
Usage examples
UI Libraries
UI Libraries
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@magicuifor the cover image of my product cards. @aceternityuiWhat component can I use to highlight the product demo on my website?- Instead of a carousel, what can I use from
@smoothuito showcase the client testimonials on my website?
Design Inspirations
Design Inspirations
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
@saasframesuggest 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
Colors
Colors
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
@goodpaletteand generate some color palettes for my e-commerce website. @brandcolorsGive me a color palette that is similar to the brand Adidas.
Typography
Typography
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
@fontpairWhat font pair goes best for the title and description of my product card- Use Montserrat from
@googlefontsfor all headings in my codebase. - Generate a modern, minimal font pair from
@fontpairstudiofor the new blog post page.
Animation Libraries
Animation Libraries
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
@motionand apply it to my product catalog cards. - Suggest some smooth page scroll animations from
@CodePen GreenSock - Add a confetti animation from
@GSAPwhen the user finishes their account wallet setup