# Quickstart

***

{% embed url="<https://vimeo.com/1097293538?share=copy#t=0>" %}

### Starting your project

<details>

<summary>Create a New Project</summary>

* Click **New Project** in the sidebar or type a prompt.
* (Optional) Select a **Brand Style** from the dropdown.
* Click on the arrow to proceed.

</details>

<details>

<summary>View the Live Preview</summary>

After a few seconds, your project will appear in the preview pane.

* Toggle between mobile/desktop viewports.
* Click on the “open in new tab” to **preview the project** in full screen.

</details>

<details>

<summary>Creating a Project without Brand Guidelines</summary>

* Click **+ New Project**.
* Choose **No Style Guide** from the dropdown.
* Name and **Create**.
* Maker AI will apply a clean, unbranded palette and font set.

</details>

<details>

<summary>Creating a Project that Follows Your Brand Guidelines</summary>

* Click **+ New Project**.
* Select your **Style Guide** from the dropdown.
* Name your project and **Create**.
* All generated code and components will automatically adhere to your saved styles.

</details>

***

### Edit your project

<details>

<summary>Write Your First Prompt</summary>

Type your desired project description into the prompt box. For example:

“Create a hero banner for my homepage with parallax animation. “

Press **Enter** or click the **→** button.

</details>

<details>

<summary>Prompting &#x26; AI Behavior</summary>

* **Can I control the tone or layout Maker uses?**

  Yes—be explicit in your prompt. Example:

  “Create a minimal product page with large headlines, small body copy, and a calm, editorial tone.”
* **Can Maker adhere to my brand's voice and tone?**

  Yes, as long as the[ style guide](https://docs.maker.co/features/style-guide) is set up and you have references shared when creating the style guide, along with clear instructions, Maker will adhere to the brand's voice and tone.
* **Can I prompt in other languages?**

  Currently, we support only prompts in English and will be adding other language support.

</details>

<details>

<summary>Iterate &#x26; Customize</summary>

* Edit the project directly in the editor.
* Ask Maker follow-up prompts, e.g.:
  * “Add a blue background to the header.”
  * “Include a footer with © 2025 My Company.”
* Each change updates the live preview in real time

</details>

<details>

<summary>What Is Remix?</summary>

Remix is Maker’s “fork” feature:

1. Open any project.
2. Click **Remix** in the top toolbar.
3. A copy appears in your **Projects** list.
4. Changes to the remix don’t affect the original—ideal for experimentation or sharing a template.

</details>

<details>

<summary>How can I delete or rename a project</summary>

To **delete** a project, click the **delete icon** on the project thumbnail.

To **rename** a project, open the **dropdown menu** in the top-left corner of the project and select the rename option.

</details>

<details>

<summary>How Style Guides work in Maker</summary>

* This feature is available only on premium plans, such as Pro and Team.&#x20;
* Uses a **Style Guide** to define colors, fonts, and imagery.
* Every component and template reads from the active style.
* **Style Guides** live in **Settings** → **Style Guide**.
* You can **edit**, **duplicate**, or **delete** a style guide at any time—changes cascade through existing projects.
* Prompt inline overrides (e.g., “Use a red button instead of primary”) temporarily supersede the style guide.

</details>

<details>

<summary>How Do I Duplicate a Maker Project?</summary>

* From **Projects**, hover over the project card.
* Click the **••** menu → **Duplicate Project**.
* A copy will appear immediately for you to modify.

</details>

<details>

<summary><strong>Can I create content in dark mode?</strong></summary>

Yes! You can prompt Maker to design your component or page in dark mode.

Example:

> “Create a dark-mode pricing page with white text on a black background and clear CTAs.”

You can even ask Maker to include a **light/dark mode toggle** in the design.

</details>

***

### Publish and go live

<details>

<summary>Publish Your Project</summary>

* Click **Publish** in the top-right corner.
* Choose **Publish Now** to make your project public, or **Make Private** to restrict access.
* (Optional) Under **Publish**, connect a custom domain.
* Use the “Live” link to share the project with teammates and stakeholders

</details>

<details>

<summary>Updating Maker Content</summary>

* Open the project you want to update.
* Choose either the ["Select to edit"](https://docs.maker.co/features/select-to-edit) option or add a prompt with the updates you’d like to make.
* Press **Enter**
* Review the updated preview in the editor. It’s always advisable to preview the full-screen preview by clicking on “open in new tab,”
* Click **Publish** again to push your updates to the public (or private) URL.

</details>

<details>

<summary>Connecting a Custom Domain</summary>

* Inside your project, click **Publish**
* Click on **+ Connect Custom Domain**.
* This will redirect you to the domain settings page.
* [Follow the instructions to connect.](https://www.notion.so/Hosting-Updates-done-214866387a5380878f82cfb7f28dd079?pvs=21)
* Wait up to 24 hours for DNS propagation.
* Once verified, your Maker project will be accessible at your custom URL.

</details>

<details>

<summary>Embedding Maker Content on Your Site</summary>

* In your Maker project, click **Publish.**
* Copy the provided **embed** code—choose between a Simple Embed or an Iframe Embed.
* Paste it into your site’s HTML where you want the Maker project to appear.
* Save and deploy your site. Your live Maker project will load in place of the embed.

</details>

<details>

<summary>Embeds, CMS &#x26; Integration</summary>

* **Can I export HTML or code?**

  Yes — you can download your project by clicking the **Download project as ZIP** icon located next to the **Publish** button.

<figure><img src="https://16034713-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2xSzN6C9hL2ozNM8Yx0%2Fuploads%2FJqJt1YQXthSli4l95WKY%2Fimage%20(14).png?alt=media&#x26;token=56e2201d-ac1b-4695-942e-6364495d5c67" alt=""><figcaption></figcaption></figure>

* **Can I connect APIs or a CMS?**

  We don’t have built-in support for any specific CMS or API. But you can always try to ask Maker and provide it with an API endpoint or an RSS feed, and in many cases, the Maker will be able to use it. That especially applies to well-known, popular, and documented CMS or API platforms.
* **Can I embed Maker content in another platform (Webflow, Shopify, etc.)?**

  Yes. Use the **Publish > Embed** option to generate a simple embed or iframe embed you can drop into most platforms.

</details>

***