Getting started with Faces

Hi, in this tutorial I'm going to show you how to get started with faces to get the most out of it. Let's jump in.

Okay, so faces is the best way to create sites, slides, and docs with AI.

Everything in the same platform, and you'll get amazing results with a very, very low effort. Let's see how it works.

I'm going to start by clicking this button to create a new project.

As you can see, the first thing is to pick a style. Styles are not to be confused with templates in the traditional sense. These are more like

traditional sense. These are more like inspirations, so the AI knows which vibe you're going for. Some are clean like

this one. Others are bold and strong

this one. Others are bold and strong like this one. We have for all sorts of use cases. So, while this are more like

use cases. So, while this are more like traditional websites, this is a little more like a presentation.

And this will be more like a document.

There are tons to choose from and you can further customize them by changing the theme up here. So there's a lot of options.

Okay. So I'm going to start by picking this one which I really like. Uh and I'm going to leave it as it is clean and white.

Once we've selected a style, we get this box where we can dump all our context.

So in here, I'm going to explain them doing a course on pottery. Uh, and they need a deck for it. We can add as much context

as we want. We can paste text. We can

attach files. The more context, the more customized your your site deck or dock will look like. And then once you're done, you can click this button to create the first draft. Let's see how it

goes.

So now the AI is thinking of all the context we gave it, the style we picked, the theme, and it's creating a new structure just for me to tell my story

in the best possible way. As you can see, it already created the sections on the left. Every project in faces has

the left. Every project in faces has sections because websites, slides, and documents often have sections. And it's

way easier to work bit by bit and to be able to iterate or delete an independent section than having to work in a full big project. So that's why we always

big project. So that's why we always will have sections. You can move them around, you can delete them, or you can create new ones.

On the right hand side, as you can see, there is a chat. This chat is omnipresent. It's always there and you

omnipresent. It's always there and you can ask it to do whatever you want. For

example, um I kind of like the style on this one, but it would be better if it had a cooler animation um when the page

loads. So, I can ask it to do that. Add

loads. So, I can ask it to do that. Add

a more dramatic animation to this. And as you can see, I have it

to this. And as you can see, I have it selected as context. So, the AI knows that I'm referring to this one.

in faces. Every section, every slide, every bit of your project is real code from behind. So, we can benefit from

from behind. So, we can benefit from that and build anything you want. You

are not tied by rigid templates or by predefined blocks that we may have come up with in each section. The sky is the limit and you can do whatever you want.

As you can see, it already created a way more dramatic and cool animation when this loads, which is pretty cool. Now,

let me walk you through the rest of the interface. The first thing is this top

interface. The first thing is this top bar here. As you can see, there are

bar here. As you can see, there are three different sections. The first one is the chat we already covered. The

second one is the content tab. When I

click any of these sections, the content tab will display all the images or text in the section and I can

easily do direct edits here. So for

example, I could change this to pottery course and it will change it automatically without having to go through the AI. The

same thing happens with images or other texts. For more complex text, it will

texts. For more complex text, it will use tables just to make information more clear.

The next section is controls.

So controls are an easy way to tweak those little details about your site without having to chat your way into everything and having to ask the AI for

changes. So, for example, in this case,

changes. So, for example, in this case, while creating this section, the AI figured it would be useful to have a control for the overlay opacity of the

background. This is not available in

background. This is not available in every section, the AI just added it to this section because it makes sense. It

also when I asked it to add the dramatic animation, it seems like it kept the the other one. Um, and now I can pick if I

other one. Um, and now I can pick if I want the regular one or if I want the dramatic one.

As you will discover, each section will have its own controls and you can always ask the AI to create more controls for you. It's very, very cool. Okay, so now

you. It's very, very cool. Okay, so now I will do a quick overview of a few tricks that will make using faces much much easier. The first one is preview

much easier. The first one is preview mode. When you click preview mode, you

mode. When you click preview mode, you will enter in full screen where you can see um how your project will see once it's polished like this. If you go to

the upper part or the bottom part, you will see this menu where you can see how it looks in mobile or desktop. And if

your face is a presentation, you can see each slide separately.

We can exit preview and we are back in the editor.

Another thing is design. So with design, you can change at any time if you want the layout of your project to be regular

as in a regular website. If you want it to be inside a card, which will mimic more of a document, or if you wanted the slides, which will divide each section

into an individual slide that will use the full screen. You can also change the width of each section at any time and

you can change the themes as we saw previously even after you've created your project which is pretty pretty cool. Okay, so the last bit that I will

cool. Okay, so the last bit that I will show you today is publish. When you

click this button, this will publish your project into the web and it will create a unique link that you can share with people so that they can see your

site slide or document.

There are a ton of features in terms of security, SEO, etc. that we will cover in further episodes. That was it for today. I hope you find it useful and

today. I hope you find it useful and I'll see you in the next one.