> ## Documentation Index
> Fetch the complete documentation index at: https://www.macaly.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Näin rakennat ensimmäisen projektisi

> Ensimmäinen verkkosivustosi tai sovelluksesi valmiiksi jo tänään

Kerrot omin sanoin, mitä haluat, ja Macaly rakentaa sen puolestasi. Se on vähän kuin lähettäisi tekstiviestin erittäin taitavalle kehittäjälle, joka tekee työn saman tien.

<iframe width="100%" height="420" src="https://www.youtube.com/embed/videoseries?list=PL_6FnllPMh1G-XbXlylnuEJk9yUGBGEHn" title="Macalyn oppaat" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

## Ennen kuin aloitat

Tarkkaa suunnitelmaa ei tarvita. Jos et kuitenkaan tiedä, mistä aloittaa, nämä ovat hyviä ensimmäisiä projekteja:

<CardGroup cols={2}>
  <Card title="Laskeutumissivu" icon="browser">
    Yksinkertainen, kohdennettu ja nopea rakentaa. Sopii hyvin idean testaamiseen.
  </Card>

  <Card title="Henkilökohtainen portfolio" icon="user">
    Muutama sivu sinusta, töistäsi ja siitä, miten sinuun saa yhteyden.
  </Card>

  <Card title="Yrityksen verkkosivusto" icon="building">
    Etusivu, tietoa meistä, palvelut ja yhteystiedot. Toimiva perusrakenne.
  </Card>

  <Card title="Sisäinen kojelauta" icon="table-columns">
    Yksinkertainen työkalu, jolla tiimisi seuraa tehtäviä tai näyttää dataa.
  </Card>
</CardGroup>

**Mitä kannattaa valmistella:**

* Lyhyt kuvaus siitä, mistä sivustosi kertoo (yksi lause riittää)
* Logosi, jos sinulla on sellainen
* Brändivärit tai esimerkkisivusto, jonka ulkoasusta pidät

<Note>
  Älä jää miettimään liikaa. Kaiken voi muuttaa myöhemmin, joten ensimmäisen version ei tarvitse olla täydellinen.
</Note>

## Rakenna ensimmäinen projektisi

<Steps>
  <Step title="Avaa Macaly ja aloita uusi projekti">
    Kirjaudu sisään osoitteessa [macaly.com](https://www.macaly.com/). Kehotekenttä on heti etusivun keskellä.

    <img src="https://mintcdn.com/macaly-41b1d3e9/3b1-nExOoaeiOJYq/images/guides_first-project_01.png?fit=max&auto=format&n=3b1-nExOoaeiOJYq&q=85&s=a5862e0e462ab210eb18f1cad269d7b1" alt="Uuden keskustelun aloittaminen" width="1500" height="1000" data-path="images/guides_first-project_01.png" />
  </Step>

  <Step title="Kerro, mitä haluat rakentaa">
    Kerro Macalylle, mitä mielessäsi on, samaan tapaan kuin selittäisit sen ystävälle. Mikä tahansa kieli käy.

    Jos sinulla on valmiita materiaaleja (logo, brändiohjeet, PDF-tiedosto sisällöstä), liitä ne mukaan heti. Mitä enemmän Macaly saa taustatietoa alussa, sitä parempi ensimmäisestä tuloksesta tulee.
  </Step>

  <Step title="Odota, että agentti valmistuu">
    Macaly aloittaa rakentamisen heti. Se voi esittää työn aikana kysymyksen tai pari, jos jokin vaatii tarkennusta.

    Ensimmäinen versio voi viedä muutaman minuutin. Näet päivitykset keskustelussa agentin työskennellessä.

    <img src="https://mintcdn.com/macaly-41b1d3e9/3b1-nExOoaeiOJYq/images/guides_first-project_02.png?fit=max&auto=format&n=3b1-nExOoaeiOJYq&q=85&s=27c4c4e309eee0cd13430043d516eaec" alt="Agentin suunnitelma" width="1500" height="1000" data-path="images/guides_first-project_02.png" />
  </Step>

  <Step title="Tarkista tulos">
    Katso esikatselua oikealla. Tarkista asettelu, tekstit, kuvat ja yleisilme. Laitevalitsimella esikatselun yläpuolella näet heti, miltä sivusto näyttää mobiilissa, tabletilla ja tietokoneella.

    Täydellinen tulos ei synny ensimmäisellä kerralla, ja se on täysin normaalia. Jatka hiomista lähettämällä keskusteluun jatkoviestejä tai tee tarkkoja muutoksia suoraan sivulle <Tooltip headline="Visuaaliset muokkaukset" tip="Muokkaa elementtiä suoraan esikatselun päällä olevalla työkalupalkilla, kirjoita tekstiä uusiksi paikan päällä tai merkitse, mitä tarkoitat." cta="Lue visuaalisista muokkauksista" href="/docs/fi/features/visual-edits">esikatselun päällä olevalla työkalupalkilla</Tooltip>.

    <img src="https://mintcdn.com/macaly-41b1d3e9/3b1-nExOoaeiOJYq/images/guides_first-project_03.png?fit=max&auto=format&n=3b1-nExOoaeiOJYq&q=85&s=4b655dc218595353d9741bba7e8ec71e" alt="Tuloksen tarkistaminen" width="1500" height="1000" data-path="images/guides_first-project_03.png" />
  </Step>
</Steps>

## Näin puhut Macalylle

Puhu Macalylle kuin ystävälle. Komentoja tai teknistä sanastoa ei tarvita. Sano vain, mitä haluat.

Aloita jostain konkreettisesta:

```
I want to create a website for my café called Dusk. It's a small,
cozy place in Prague. Great coffee, homemade pastries, live jazz
on weekends. Warm colors, lots of food photography.
```

Jatka sitten keskustelua. Jokainen viesti rakentaa sen päälle, mitä on jo tehty:

```
I found a site I really like the vibe of: https://example.com
Can we do something similar for the homepage?
```

```
Swap the Google Maps reviews for a photo gallery.
```

```
Can you add a menu section? I have our full menu as a PDF,
I'll upload it. Can you pull the items and prices from it?
```

Macaly säilyttää koko projektisi kontekstin koko keskustelun ajan, joten se ei kadota sitä, mitä olet jo rakentanut.

### Muutama vinkki

* **Hyvä tulos alkaa kontekstista.** Jaa esimerkkisivusto, lataa logosi tai kerro, kenelle sivusto on tarkoitettu. Mitä enemmän Macaly tietää, sitä parempi lopputulos on.

* **Kuvaile tulos, älä vaiheita.** Keskity siihen, miltä haluat sivuston näyttävän tai tuntuvan. Macaly keksii, miten se toteutetaan.

* **Lähetä yksi pyyntö kerrallaan.** Kohdennetut viestit tuottavat parempaa jälkeä kuin pitkät listat. Jos haluat tehdä useita muutoksia, lähetä ne yksi kerrallaan, niin Macaly käy ne läpi järjestyksessä.

* **Kysy ennen kuin rakennat.** Etkö ole varma, onko jokin mahdollista? Kysy rohkeasti. Macaly voi käydä vaihtoehdot läpi ennen kuin mitään tehdään.

* **Kerro, mikä on pielessä, älä vain että jokin on pielessä.** "Fontti tuntuu liian muodolliselta" antaa Macalylle jotain konkreettista. "Yritä uudelleen" ei anna.

## Kun jokin menee pieleen

Eikö jokin näytä oikealta? Se on täysin normaalia, etenkin alussa. Näin toimit:

* **Pyydä agenttia kumoamaan muutos.** Kuvaile, mikä muuttui, ja sano, että haluat sen takaisin. Toimii parhaiten, kun vain yksi asia meni pieleen.
* **Palauta aiempi versio.** Jos useampi asia meni pieleen kerralla, palauttaminen on nopeampaa kuin kumoaminen vaihe vaiheelta. Avaa **Versiohistoria** yläpalkin kellokuvakkeesta, esikatsele haluamasi versio ja valitse **Palauta**. Katso [Versiohistoria](/docs/fi/chat/overview#versiohistoria).
* **Muokkaa aiempaa kehotetta.** Palaa mihin tahansa aiempaan viestiin ja muokkaa sitä. Macaly palauttaa projektin siihen hetkeen ja rakentaa sen uudelleen päivitetyn kehotteesi pohjalta.
* **Aloita turvakopiosta.** Ennen suuria muutoksia valitse minkä tahansa viestin alta "Monista". Näin sinulla on aina varmuuskopio, johon palata.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.