Skip to main content
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)
  • AI model selected (Model Setup)
  • 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.
Quick Tip: You can also use Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and search for “Cline: Open In New Tab”

​
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
Cline Chat Prompt
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.
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

​
Next Steps

Now that you’ve experienced Cline’s capabilities, explore more:

@ Mentions

Reference specific files, folders, and URLs in your prompts

Plan & Act Modes

Master planning vs. execution for complex tasks

Cline Rules

Set project-specific guidelines for consistent results

Prompting Guide

Learn to write prompts that get the best results

​
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
⌘I