> For the complete documentation index, see [llms.txt](https://sketch2react.gitbook.io/marcode/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sketch2react.gitbook.io/marcode/learn/get-started-guide.md).

# Get started guide 🍕

## In Sketch or Lunacy

1. Create a **new file ⌘N**
2. Rename the *Page 1* page 👉 ***App***

![Rename the page from Page 1 to App. The App page is where the magic happens](/files/jumCtS7WsTTDPbAT53C3)

1. Create a new Artboard (A) size does not matter
2. Rename it from *Artboard* 👉 ***Start***

![You need one Artboard named Start or nothing will work](/files/S4Thb2EcUdgL1Qww5rSX)

1. Save your Sketch file
2. Open up Marcode app

## In Marcode

![Pretty obvious yes? 😺💪](/files/d4e5sopHAYCGU8hh1mJv)

1. Press on the ***Link a Sketch file*** area in our app
2. Locate your **newly created Sketch file** from the steps above
3. It should look like this 👇🤖<br>

![Blank, yes of course, we have not done anytyhing in Sketch yet](/files/FSlEnlq8fvE9fhNSKm5F)

1. Let's add a background color to our Start Artboard and see what happens
2. Ours looks like this 👇

![We added a Background color 🎉](/files/LNJoFnQYdFghU0U8qeMU)

1. Save in Sketch and now look inside Marcode app, should look like this 👇

![Great work!](/files/1Z7hKLPyzDaSjWz2eAtK)

## What have we learned?

1. How to create a blank Marcode starter template in Sketch
2. How to connect the Sketch file to Marcode app
3. How to add a background color to our first Artboard, that always need to be named *Start* (never ever take this one away, our app will break). *Start* is the index.html page.

## What do I do next?

1. Learn our markup, it's super easy
2. Add as many new Artboards as you might need, but always keep **Start** (index.html)
3. Start with our[ {prototype} components](/marcode/learn/components.md#rapid-prototyping-components), a very fast way of getting 1:1 designs out to iOS, Android and HTML apps
4. Have fun! 😺🧡

#### Download above Sketch file&#x20;

{% file src="/files/LUH7KZO5FD2pYC9SBz9O" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sketch2react.gitbook.io/marcode/learn/get-started-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.