Getting Started/Quick Start

Quick Start

Get up and running with Craft in just a few minutes. This guide will walk you through creating your first project and understanding the basics of AI-powered development.

Prerequisites#

Before you begin, make sure you have:

  • A Craft account (sign up at app.craft.fast)
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • An idea for what you want to build!

Step 1: Create a New Project#

  1. Log in to your Craft dashboard
  2. Click the "New Project" button
  3. Give your project a descriptive name
  4. Click "Create" to initialize your project

Step 2: Start a Conversation#

Once your project is created, you'll see the chat interface. This is where you'll communicate with the AI assistant.

Try starting with a simple prompt:

Create a landing page for a coffee shop called "Bean There"
with a hero section, menu preview, and contact form.

Step 3: Watch the Magic Happen#

The AI will:

  1. Analyze your request
  2. Generate the necessary code
  3. Create the file structure
  4. Update the preview in real-time

You'll see files being created in the sidebar and the live preview updating as the AI works.

Step 4: Iterate and Refine#

Don't like something? Just ask for changes:

Change the color scheme to warm earth tones
and add a photo gallery section.

The AI will understand context from your previous messages and make the requested changes.

Step 5: Preview Your Work#

Click on the Preview tab to see your application in action. You can:

  • View on different screen sizes
  • Test interactive elements
  • Share the preview link with others

Example Prompts to Try#

Here are some prompts to get you started:

Landing Page#

Create a modern SaaS landing page with:
- Animated hero section
- Feature highlights with icons
- Pricing table with 3 tiers
- FAQ accordion
- Newsletter signup footer

Dashboard#

Build an admin dashboard with:
- Sidebar navigation
- Stats cards showing key metrics
- Recent activity feed
- User table with search and pagination

E-commerce#

Design a product page with:
- Image gallery with zoom
- Size and color selectors
- Add to cart button
- Customer reviews section
- Related products carousel

Tips for Better Results#

Be Specific#

The more details you provide, the better the result:

❌ "Make a website"
✅ "Create a portfolio website for a photographer with a grid gallery, about page, and contact form"

Use Reference Points#

Mention styles or sites you like:

Create a pricing page similar to Stripe's design,
with a clean white background and subtle shadows.

Iterate Gradually#

Build up complexity over time:

  1. Start with basic structure
  2. Add styling and polish
  3. Implement interactivity
  4. Add final touches

Next Steps#

Now that you've created your first project:

Previous
Introduction
Next
Installation