mirror of
https://github.com/cline/cline.git
synced 2026-09-24 23:20:16 +08:00
Juan Pablo Flores
7692adacf5
* Remove Windows setup accordion and streamline instructions for finding Claude Code path * fix: update image source for Cline chat prompt to use a public URL
116 lines
3.5 KiB
Plaintext
116 lines
3.5 KiB
Plaintext
---
|
|
title: "Build Your First Project"
|
|
description: "Build your first project with Cline in under a minute."
|
|
---
|
|
|
|
Ready to see Cline in action? This hands-on tutorial will walk you through building a website in under a minute. You'll experience how Cline understands your requirements, creates files, and iterates on your feedback—all through natural conversation.
|
|
|
|
By the end of this guide, you'll have built a working website and learned the fundamentals of working with Cline.
|
|
|
|
## Prerequisites
|
|
|
|
- **Cline installed** in your editor ([Install Guide](/getting-started/installing-cline))
|
|
- **AI model selected** ([Model Setup](/getting-started/selecting-your-model))
|
|
- **Any folder open** in your editor (or create a new empty folder)
|
|
|
|
## Step 1: Open Cline
|
|
|
|
Click the Cline icon in your editor's sidebar (left side). The chat panel will open.
|
|
|
|
<Info>
|
|
**Quick Tip:** You can also use `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux) and search for "Cline: Open In New Tab"
|
|
</Info>
|
|
|
|
## Step 2: Give Cline a Task
|
|
|
|
Copy and paste this prompt into Cline's chat:
|
|
|
|
```
|
|
Create a simple website in a single HTML file. It should have:
|
|
- A welcome message saying "Hello from Cline!"
|
|
- A colorful gradient background
|
|
- A button that cycles through different color themes when clicked
|
|
- Modern, clean design
|
|
- All CSS and JavaScript should be included in the same HTML file
|
|
```
|
|
|
|
<Frame>
|
|
<img src="https://storage.googleapis.com/cline_public_images/chat-prompt.png" alt="Cline Chat Prompt"/>
|
|
</Frame>
|
|
|
|
Press Enter and watch Cline work!
|
|
|
|
## Step 3: What Happens Next
|
|
|
|
Cline will:
|
|
|
|
1. **Create a single file:**
|
|
- `index.html` - A complete webpage with embedded CSS and JavaScript
|
|
|
|
2. **Ask for approval** (unless you've enabled auto-approve)
|
|
- Click "Approve" to let Cline create the file
|
|
- You can review what it plans to do first
|
|
|
|
3. **Complete the task** within seconds
|
|
|
|
## Step 4: View Your Website
|
|
|
|
Once Cline finishes:
|
|
|
|
1. **Find `index.html`** in your editor's file explorer
|
|
2. **Right-click it** and select:
|
|
- "Reveal in Finder/Explorer" then double-click to open in your browser
|
|
3. **Click the button** to see the color themes change!
|
|
|
|
## Try Making Changes
|
|
|
|
In the same chat, try asking:
|
|
|
|
```
|
|
Add a counter that shows how many times the button has been clicked
|
|
```
|
|
|
|
or
|
|
|
|
```
|
|
Make the welcome message fade in when the page loads
|
|
```
|
|
|
|
Cline understands the context from your previous conversation and will update the file accordingly.
|
|
|
|
<Tip>
|
|
**You now know how to:**
|
|
- Give Cline a task with a clear prompt
|
|
- Review and approve Cline's actions
|
|
- Build a complete project in seconds
|
|
- Iterate and improve on existing work
|
|
</Tip>
|
|
|
|
## Next Steps
|
|
|
|
Now that you've experienced Cline's capabilities, explore more:
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="@ Mentions" href="/features/at-mentions/overview" icon="at">
|
|
Reference specific files, folders, and URLs in your prompts
|
|
</Card>
|
|
|
|
<Card title="Plan & Act Modes" href="/features/plan-and-act" icon="diagram-project">
|
|
Master planning vs. execution for complex tasks
|
|
</Card>
|
|
|
|
<Card title="Cline Rules" href="/features/cline-rules" icon="list-check">
|
|
Set project-specific guidelines for consistent results
|
|
</Card>
|
|
|
|
<Card title="Prompting Guide" href="/prompting/prompt-engineering-guide" icon="wand-magic-sparkles">
|
|
Learn to write prompts that get the best results
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Need Help?
|
|
|
|
- **Stuck?** Try starting fresh with `/new` in the chat
|
|
- **Found a bug?** Use `/reportbug` to help us improve
|
|
- **Have questions?** Join our [Discord community](https://discord.gg/cline)
|