> ## Documentation Index
> Fetch the complete documentation index at: https://help.trickle.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Assets & Image Generation

> Learn how to manage assets in Trickle by uploading custom visuals, generating images with AI, using Unsplash references, or sketching wireframes. Create high-quality visuals and MVP websites seamlessly.

<Tip>
  If you have any questions or need further assistance, don’t hesitate to [join our Discord](https://discord.com/invite/AD44k7hVSY) community. We’re always there to connect with you and offer support!
</Tip>

## Assets

When building a website or application, assets are an indispensable part of the process. In Trickle, you can not only upload brand visuals, portfolio pieces, or product photos, but also use the built-in AI image generation features to create and refine the visuals you need—all in one place—making the creative workflow more efficient.

### **Uploading Assets**

You can upload and customize design assets to give your project a unique style. Follow these steps to add and manage assets:

<img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a1-1.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=5b40ce9a07ab3f56af9fd0540e5c122a" alt="A1 1 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a1-1.png" />

<Steps>
  <Step title="Upload Assets">
    * Add your own images, stickers, or GIFs directly into the project;
    * Or browse the built-in library and use high-quality professional photos from Unsplash.
  </Step>

  <Step title="Use AI to Generate Custom Visuals">
    * Enter a prompt and let AI generate exclusive designs based on your ideas.
  </Step>

  <Step title="Place and Adjust Assets">
    * Use intuitive prompts to place assets precisely in the designated position within the project;
    * Make detailed adjustments to ensure the design matches your goals perfectly.
  </Step>
</Steps>

<img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/asset2.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=280b4efd821f4b73adcec849f15aea4f" alt="Asset2 Pn" width="1920" height="1080" data-path="Assets/assetsimage/asset2.png" />

By combining your creativity with Trickle’s tools, you can easily create a fully personalized design.

### **Using AI for Asset Generation and Creation**

**Method 1: Prompt to Image**

You can enter both website prompts and image prompts in a single request. AI will instantly generate results and place them directly into the page. **Batch image generation** is supported. You can also enter prompts directly in Asset to quickly generate and insert visuals.

**Option 1: Website + Image Prompt**

<Steps>
  <Step title="Step 1">
    Enter a website prompt + an image prompt (optional: add a reference image).
  </Step>

  <Step title="Step 2">
    AI generates results in one step and automatically places them in the project.
  </Step>

  <Step title="Step 3">
    Supports batch output of multiple images.
  </Step>
</Steps>

<img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a3.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=64ac2440ad09f3c96d8459732d35c092" alt="A3 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a3.png" />

**Option 2: Generate from Asset**

<Steps>
  <Step title="Step 1">
    In Asset, click **Generate with AI**.
  </Step>

  <Step title="Step 2">
    Enter a prompt, and AI quickly generates images and places them in the specified location.
  </Step>
</Steps>

<img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a4.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=687ac28a99f12f7766237a22a459e1f0" alt="A4 Pn" width="1920" height="2089" data-path="Assets/assetsimage/a4.png" />

**Method 2: Get Reference Images from Unsplash**

You can search Unsplash images directly within Asset, choose a reference image, and then use the built-in AI image generator to create a clearer, more unique version.

<Steps>
  <Step title="Step 1">
    Open Unsplash search in Asset;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a5.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=41a3f97e8b918a59deb2ece21325228c" alt="A5 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a5.png" />
  </Step>

  <Step title="Step 2">
    Select an image you like;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a6.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=739d3185dad66fa93c955126daba7996" alt="A6 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a6.png" />
  </Step>

  <Step title="Step 3">
    Click the **Compose** icon;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a7.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=dfc8e93ee1e4c66224334ec01d65d5af" alt="A7 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a7.png" />
  </Step>

  <Step title="Step 4">
    Enter a prompt to generate new variations;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a8.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=194b5fa745969236adea859dd9aa34ff" alt="A8 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a8.png" />
  </Step>

  <Step title="Step 5">
    Insert the generated results directly into the project.

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a9.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=fc44228acd87b71ae2041115f959859b" alt="A9 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a9.png" />
  </Step>
</Steps>

You can also upload your own images into Asset for secondary creation. For example, upload a living room photo and use prompts to generate different styled scenes—perfect for advertising or e-commerce visuals.

<img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a10.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=41ef32ee243dea17753e3568744f891d" alt="A10 Pn" width="1920" height="2062" data-path="Assets/assetsimage/a10.png" />

**Method 3: Whiteboard Drawing**

You can freely sketch on the whiteboard, and AI will transform your drawings into finished images—or even a complete website—bringing imagination instantly to life.

**Option 1: Hand-Drawn Sketch → AI Image**

<Steps>
  <Step title="Step 1">
    Open Whiteboard Drawing;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a11.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=7cd1431b0ad2a0a67b0f92090478d181" alt="A11 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a11.png" />
  </Step>

  <Step title="Step 2">
    Draw your creative sketch on the whiteboard;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a12.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=908a831a8c1150fdb3a61b6d3821339a" alt="A12 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a12.png" />
  </Step>

  <Step title="Step 3">
    Add style or layout instructions;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a13.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=dea0ddea8eb5847be6e957c1413e7719" alt="A13 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a13.png" />
  </Step>

  <Step title="Step 4">
    AI generates the corresponding image, which can be inserted directly into the project.

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a14.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=554eb1917c5ba6ec05cb7f582e6d8824" alt="A14 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a14.png" />
  </Step>
</Steps>

**Option 2: Wireframe → MVP Website**

<Steps>
  <Step title="Step 1">
    Open Whiteboard Drawing and enter website style/design requirements;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a17.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=b5b175db732d0be224e5ba9cd83770a6" alt="A17 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a17.png" />
  </Step>

  <Step title="Step 2">
    Draw the website wireframe on the whiteboard;

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a15.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=dee70c07ecaa70bdbc1c8af6478833db" alt="A15 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a15.png" />
  </Step>

  <Step title="Step 3">
    AI generates a functional MVP website based on the wireframe and prompts.

    <img src="https://mintcdn.com/trickle/DvCF27jKOSe_PcFR/Assets/assetsimage/a16.png?fit=max&auto=format&n=DvCF27jKOSe_PcFR&q=85&s=db0db494f4a911cc477002747f96c322" alt="A16 Pn" width="1920" height="1080" data-path="Assets/assetsimage/a16.png" />
  </Step>
</Steps>
