mirror of
https://github.com/cline/cline.git
synced 2026-09-24 23:20:16 +08:00
Juan Pablo FloresandCopilot
8f8c4561a6
* style(docs): update background color scheme to neutral tones Update documentation background colors from purple-tinted theme to neutral gray tones. Changed light mode from lavender (#F0E6FF) to off-white (#fafaf9) and dark mode from pure black (#000000) to dark gray (#0f0f0f) for improved visual consistency. * refactor(docs): remove gradient decoration from theme config Remove the "decoration": "gradient" property from the documentation theme configuration. This simplifies the theme settings by removing the gradient decoration option from the color configuration object. * docs: change documentation font family to Geist Mono Replace Roboto with Geist Mono as the default font family in the documentation configuration. This updates the visual styling of the documentation to use a monospace font, which may improve readability for code-heavy content. * docs: update branding and restructure navigation - Replace robot panel logos with new Cline brand logos - Add icons to navbar links (Docs, GitHub, Discord) - Restructure navigation from groups to tabs format - Add icons to navigation items for improved UX - Include new Docs link in navbar with book icon This update modernizes the documentation appearance and improves navigation hierarchy for better user experience. * docs: restructure navigation with hierarchical groups and pages Restructured documentation navigation from flat menu to organized groups: - Removed redundant "Docs" link from navbar - Migrated from "menu" to "groups/pages" structure - Added comprehensive page organization with nested groups: * Introduction, Getting Started, Features * Prompting Skills, Cline's Tools, Enterprise Solutions * MCP Servers, Provider Configuration - Organized features into logical subgroups (@ Mentions, Commands, Customization, Slash Commands) - Improved documentation discoverability and hierarchy This change provides better content organization and easier navigation for users exploring different aspects of Cline documentation. * docs: remove contextual options from documentation config Remove the contextual configuration section containing the "copy" option from docs.json. This simplifies the documentation configuration by removing unused contextual menu options. * docs(multiroot): improve workspace documentation with limitations and technical details - Add important note about experimental limitations affecting Cline rules and checkpoints - Add "How it works" section explaining automatic workspace detection and tracking - Reorganize technical behavior section with detailed subsections for workspace detection, path resolution, and command execution - Document workspace hint syntax for explicit file references (@workspaceName:path) - Standardize heading capitalization to sentence case for consistency - Improve overall content organization and clarity for better user understanding This update provides users with clearer information about the multiroot feature's current state, its limitations, and how to effectively use workspace hints when working with multiple project folders. * docs: restructure overview page with enhanced visual layout - Convert plain markdown sections to CardGroup and Card components with icons - Add tabbed interface for Plan & Act Mode explanation - Update description from "development assistant" to "coding agent" - Reorganize content for improved readability and visual hierarchy - Enhance feature presentations with icon-based cards Improves user experience by transforming the overview documentation into a more visually appealing and scannable format using modern documentation components. * docs: improve installation guide with enhanced structure and UX Restructure the Cline installation documentation to improve readability and user experience: - Add prominent note highlighting 2-minute installation time - Convert prerequisites into visual card components for better clarity - Transform installation steps into structured Step components for easier following - Add manual installation instructions for JetBrains IDEs - Include feature compatibility accordion for JetBrains users - Enhance visual hierarchy with improved component usage (CardGroup, Steps, Accordion) - Simplify language and improve descriptions throughout This makes the installation process clearer for new users and reduces friction during onboarding. * style(docs): remove text opacity reduction for better readability * docs: refactor model selection guide with visual step-by-step instructions - Replace tab-based layout with linear step-by-step flow - Add screenshots for each configuration step (config, provider, API, model) - Reorganize content structure for improved clarity and user experience - Add quickstart options and streamlined provider recommendations - Improve navigation with visual aids to help users configure Cline faster * docs: add installation screenshots and context management guide * docs: flatten provider config structure in documentation Remove the "Alternative Providers" grouping and move all provider configuration pages (OpenRouter, Cerebras, DeepSeek, Groq, xAI Grok, Mistral AI, Doubao, Fireworks, and ZAI) to the main provider configuration list. This simplifies the documentation navigation by treating all providers equally rather than categorizing some as alternatives. * docs: restructure context management docs and improve content clarity **Changes:** - Reorganized documentation structure by moving context management from `/best-practices` to `/prompting` section for better categorization - Added URL redirect to maintain backward compatibility for old links - Updated navigation references in welcome page to point to new location - Improved readability of context management explanations with more narrative, conversational prose - Enhanced context window documentation by adding cache tokens indicator and using emoji-based formatting for better visual clarity - Streamlined Cline Memory Bank setup instructions from 4 to 3 steps - Updated context bar screenshot to use newer image asset **Why:** Better documentation organization and improved user experience through clearer explanations of how Cline builds and manages context during tasks. * docs(context-management): convert Quick Reference to Info component Replace blockquote formatting with Info component for the Quick Reference section in the context management documentation. This improves visual presentation and maintains consistency with documentation standards. Also removes trailing whitespace at the end of the file for cleaner formatting. * docs: add Cline Enterprise overview and restructure enterprise section - Add comprehensive enterprise overview documentation covering security, governance, observability, and developer experience features - Rename "Enterprise & Security" navigation group to "Enterprise" - Consolidate enterprise documentation by replacing 4 pages with 2: new overview page and security concerns - Document BYOI (Bring Your Own Inference), SSO authentication, and role-based access control capabilities This restructuring provides a clearer entry point for enterprise users and consolidates previously scattered enterprise information into a cohesive overview document. * docs(enterprise): streamline enterprise overview and update font - Change documentation font from Geist Mono to Geist Sans - Add enterprise website link card for detailed information - Remove Developer Experience, Proven at Scale, and Pricing sections - Consolidate Flexible Inference section content - Simplify enterprise overview to focus on core capabilities These changes reduce redundancy by directing users to the enterprise website for pricing and detailed features while keeping the docs focused on technical implementation and core capabilities. * clean-images * Update docs/getting-started/installing-cline.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/styles.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(cline-cli): add platform availability warning to overview Add a prominent warning callout indicating that Cline CLI is currently in preview and only supports macOS and Linux, with Windows support coming soon. This sets clear expectations for users about platform compatibility. Also remove redundant introductory text in the "What you can build with this" section to improve content clarity. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
116 lines
3.4 KiB
Plaintext
116 lines
3.4 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="/assets/installation/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)
|