> ## 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.

# Inspirations

> Inspirations is a curated, regularly updated collection of production-ready designs, screens, and animations. Use it to remix real, polished designs into your own project instead of starting from a blank canvas.

Inspirations has four tabs:

* **Landing Pages:** Production-ready, full-page designs that you can remix and craft an original design from. Each one ships with its own complete Design System.
* **App Pages:** Real product/app pages (dashboards, settings, onboarding, etc.) that you can remix as a starting point.
* **Sections:** Individual sections and screens (sign-in, pricing, hero, etc.) that you can reuse on their own.
* **Animations:** Curated motion and interaction patterns you can apply to a design you're already working on.

To open the Inspirations page, click the **Inspirations** button below the chat input box.

## Landing Pages

Landing Pages are production-ready, full-page designs that you can remix in Kombai to create original work. A landing page lands directly on your Canvas as a complete design, ready to be customized with your own content and branding.

### Browse landing pages

Switch to the **Landing Pages** tab, then use the category chips to narrow down the list. The available categories are drawn from the library and are updated over time; when there are more than fit in the row, the extras collapse under a **More** menu.

### Landing page detail page

Click any card to open its detail page in a new tab. The detail page shows:

* The design's name, a short description of its aesthetic, and a stat row with its **core colors**, **typefaces**, and total **tokens**.
* A live preview. Scroll within it to explore the entire page, exactly as it will land on your Canvas.
* The full Design System: a **Palette** section with every color token and where it's used, a **Typography** section with the type scale, a **Spacing & Shape** section, a **Border Radius** section, and a bundled **`design.md`** file, readable by AI agents, that documents the whole system in prose (overview, colors, typography, layout, elevation, iconography, do's and don'ts, and known gaps). Click **copy file** to copy the `design.md` contents.
* A **Visit site** link to open the original reference site in your browser.

### Remix a landing page

Hover over a card, or click the primary button on its detail page, to reveal **Remix page** (shown as **Remix** in the compact view). Click it to download the canvas file into your repo. This also attaches the canvas and a **Remix Design** skill to the chat input, so you can immediately describe how you want to repurpose it. The Design System is saved alongside it, so Kombai can keep any new pages consistent with it. See [Remix a design](#remix-a-design) for what to do next.

## App Pages

App Pages are real product/app pages — dashboards, settings, onboarding flows, and the like — that you can remix as a starting point for your own app.

### Browse app pages

Switch to the **App Pages** tab. Use the **Web / iOS** toggle to switch platform, and the category chips to narrow down the list. The categories are drawn from the library and are updated over time; extra chips collapse under a **More** menu.

### Remix an app page

Hover over a card, or click the primary button on its detail page, to reveal **Remix page**. Click it to download the canvas file into your repo. This also attaches the canvas and a **Remix Design** skill to the chat input, so you can immediately describe how you want to repurpose it. See [Remix a design](#remix-a-design) below.

## Sections

Sections are individual sections and screens — a sign-in form, a pricing table, a hero, a settings panel — that you can reuse on their own rather than an entire page.

### Browse sections

Switch to the **Sections** tab. Use the **Web / iOS** toggle to switch platform, and the category chips to narrow down the list.

### Section detail page

Click any card to open its detail page in a new tab. The preview here shows only that specific section — there's no additional content to scroll to. Click **Visit site** to open the original reference site in your browser.

### Use a section

Hover over a card, or click the primary button on its detail page, to reveal **Use section**. Click it to download the canvas file into your repo. This also attaches the canvas and a **Remix Design** skill to the chat input, so you can immediately describe how you want to repurpose it. See [Remix a design](#remix-a-design) below.

## Animations

Animations are curated motion and interaction patterns, e.g. a hero scrub, a spotlight reveal, or a page scrub, drawn from real, polished sites. Use them to apply a specific piece of motion to a design you're already working on, without describing the interaction from scratch.

### Browse animations

Switch to the **Animations** tab, then use the pattern chips to narrow down the list. The animation patterns include **Marquee**, **Fan Carousel**, **Page Scrub**, **Scroll Deck**, **Scroll Float**, **Wipe Reveal**, **Spotlight Reveal**, and **Hero Scrub**. The chips shown are drawn from the library and are updated over time.

### Animation detail page

Click any animation card to open its detail page in a new tab. It shows the animation's name, a short description of what it does, and a live preview, scroll within it to trigger and watch the animation play out exactly as it behaves on the source site. Click **Visit site** to open the original reference site in your browser.

### Use an animation

Hover over an animation card, or click the primary button on its detail page, to reveal **Use animation** (shown as **Use** in the compact view). Click it to attach that animation's skill to the chat input. Unlike the other tabs, this doesn't download a canvas, since it's meant to be applied to a design you already have open. Describe where you want to apply the animation and send the prompt.

## Remix a design

Remixing takes an existing landing page, app page, or section 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. On the **Landing Pages**, **App Pages**, or **Sections** tab, click **Remix page** or **Use section** on the design you want to start from.
2. The canvas is added to your repo and attached to the chat with a **Remix Design** skill.
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 design node is never overwritten, so you can iterate or branch off it freely.
