> For the complete documentation index, see [llms.txt](https://ce-docs.keywordrush.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ce-docs.keywordrush.com/custom-templates/ai-template-creator.md).

# AI Template Creator

Describe the product layout you want, and an AI assistant writes the custom template file for you. It works in any assistant that can open web pages: ChatGPT, Claude, Gemini and others.

### How to Create a Custom Template with AI

1. **Load the Template Creator instructions:**
   * Start a new chat and paste the instructions line, followed by a description of your template:

     ```
     Read https://www.keywordrush.com/skills/content-egg-template-creator/SKILL.md and follow the instructions.

     Create a Content Egg template with three product cards per row on desktop
     and one per row on mobile. Show the image, title, merchant, current price,
     old price when discounted, and a View offer button. Keep the design minimal.
     ```
   * If the assistant can't open the link, download [**SKILL.md**](https://www.keywordrush.com/skills/content-egg-template-creator/SKILL.md) and attach it to the chat instead.
2. **Describe Your Desired Template or Use Screenshots for Reference:**
   * Describe the layout, the product fields to show, colors, button labels and any other details. The more specific you are, the closer the first result will be.
   * You can also attach a screenshot of a design you like, or paste an existing template you want to change.
3. **Save and Install the Template:**
   * Save the file under the name the assistant suggests. It must start with `block_`, for example `block_my_cards.php`.
   * [Install the template on your website](/custom-templates/how-to-install-a-custom-template.md). It appears in the template list with the `[custom]` label.
4. **Review and Refine:**
   * Check the result on a page with real products, on desktop and mobile.
   * If you need any changes, ask in the same chat. The assistant returns the complete updated file.

{% hint style="warning" %}
AI assistants can make mistakes and generate invalid code. Check that your site works properly after installing the template, and review the code if you can.
{% endhint %}

### Example with screenshot

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FMFKZsLO1yrK93HzjHgbB%2Fcustom-template.webp?alt=media&amp;token=413a1643-7d56-42c2-aeb1-2996f001cbc8" alt="" width="375"><figcaption></figcaption></figure>

### Prompt examples

Paste one of these after the instructions line from step 1.

1. **Compact list layout**

```
Template Name: My compact list

Layout: Compact list

Columns:
1. Product Image Column. Maximum height: 50px. Maximum width: 90px. Affiliate link on the image. Center the image.
2. Product Title Column. Affiliate link on the title. Truncate long product titles to 7 words max.
3. Product Price Column. Price color: red. Display old price (if available) below the current price. Old price color: grey, strikethrough.
4. Merchant Logo Column. Maximum logo height: 20px. Hide this column on mobile devices.
5. Buy Now Button Column. Button color: blue. Display merchant domain below the button. Merchant domain font: grey, small. Center the button and merchant domain.

Features:
- Center all content in columns for mobile devices.
- All affiliate URLs include `target="_blank"` and `rel="nofollow"`.
- Apply alt text for all images.
- Add a thin, light grey border at the bottom of each list item, except the last one.
- Ensure the template is responsive for mobile devices. One column on mobile devices.
- Add at the bottom (small font): "Prices and availability are subject to change. Last updated: [Last Update]".
```

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FSOjkiuZoznV8YO99KYtK%2Fimage.png?alt=media&amp;token=beafe6cc-d30b-46b0-a4d1-8bc45c720195" alt=""><figcaption></figcaption></figure>

2. **Price comparison**

```
Template Name: My price comparison

This template is designed for price comparison of the same product from different merchants. It features a clean and user-friendly layout to help users quickly compare prices and make informed purchasing decisions.

Layout:

1. Left column: 
- Displays the image of the first product.
- The image is clickable, leading to the product's affiliate link.

2. Right column:
- Product Title. Displays the title of the first product in an <h2> tag for prominence.
- Price Comparison Table. A compact table that lists all available offers. Each row contains: 
	- The merchant's small icon and domain name.
	- The price of the product in bold font.
	- A "See it" button.

Stylings:

Table Styling:
- The price comparison table is bordered.
- Each row has a hover effect.
- The price cell has a very light green background color to highlight it. Centered.
- Remove margin and padding from table cells.
- Remove the table header.
- Set buttons to full column width.
```

<figure><img src="https://4254262503-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M3fnB7iKYwDc1Xhr3H3%2Fuploads%2FkVZLtmQiWC5iDgrLOzD9%2Fimage.png?alt=media&amp;token=a12dfcd8-6804-4541-bed4-9b6c96faba11" alt=""><figcaption></figcaption></figure>