From 8fb7b22843339e379e769899cf40c40721dcb873 Mon Sep 17 00:00:00 2001 From: Aman Ktyr <96657823+AmanKtyr@users.noreply.github.com> Date: Mon, 9 Jun 2025 16:03:40 +0530 Subject: [PATCH] redesign homepage for better UX and professional look What Changed Completely redesigned the documentation homepage to make it more professional and user-friendly. Key Improvements Modern Design: Added hero section with gradient background and card-based layout Better UX: Improved navigation, responsive design, and clear call-to-action buttons Professional Look: Consistent color scheme, better typography, and visual icons Content Structure: Reorganized sections for logical flow from basic to advanced features Impact More engaging first impression for new users Easier navigation and feature discovery Better mobile experience Professional brand appearance Files Modified Documentation homepage Related styling/layout files No breaking changes - purely visual and content improvements. --- docs/index.mdx | 614 +++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 544 insertions(+), 70 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 7fb5f4e..84d3a04 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -1,82 +1,556 @@ ---- -sidebar_label: Welcome ---- + + + + + + Kilo Code Documentation - AI-Powered VS Code Extension + + + + + + + +
+
+
+

+ Kilo Code +

+

+ The ultimate open-source AI agent VS Code extension that revolutionizes your coding experience with intelligent automation, code generation, and smart assistance +

+
+ + +
+
+
+
-import { DISCORD_URL, REDDIT_URL, GITHUB_ISSUES_MAIN_URL, GITHUB_FEATURES_URL, YOUTUBE_URL } from '@site/src/constants.ts' -import Image from '@site/src/components/Image'; + + -# Kilo Code Documentation + +
+ + +
+
+

What Can Kilo Code Do?

+

+ Harness the power of AI to transform your development workflow with these powerful capabilities +

+
+ +
+
+
+ +

Generate Code

+

Transform natural language descriptions into functional code with advanced AI understanding

+
+
+ +
+
+ +

Refactor & Debug

+

Intelligent code optimization and systematic debugging assistance for cleaner, more efficient code

+
+
+ +
+
+ +

Documentation

+

Automatically write and update comprehensive documentation for your codebase

+
+
+ +
+
+ +

Answer Questions

+

Get instant, intelligent answers about your codebase with contextual understanding

+
+
+ +
+
+ +

Automate Tasks

+

Eliminate repetitive tasks with intelligent automation and workflow optimization

+
+
+ +
+
+ +

Create Projects

+

Generate new files, projects, and complete application structures from scratch

+
+
+
+
-Kilo Code is an open source AI agent VS Code extension. It helps you write code more efficiently by generating code, automating tasks, and providing suggestions. + +
-## What Can Kilo Code Do? + +
+
+
+

+ Quick Start Guide +

+

Get up and running with Kilo Code in just three simple steps

+
+ +
+
+
+ 1 +
+

Install Kilo Code

+

Download and install the extension from the VS Code marketplace

+ + Installation Guide + +
+ +
+
+ 2 +
+

Set up Kilo Code

+

Configure your preferences and connect your AI model provider

+ + Setup Instructions + +
+ +
+
+ 3 +
+

Try Your First Task

+

Start with a simple task to experience the power of AI-assisted coding

+ + First Task Tutorial + +
+
+
+
-- 🚀 **Generate Code** from natural language descriptions -- 🔧 **Refactor & Debug** existing code -- 📝 **Write & Update** documentation -- 🤔 **Answer Questions** about your codebase -- 🔄 **Automate** repetitive tasks -- 🏗️ **Create** new files and projects + +
+
+

+ Intelligent Modes +

+

+ Kilo Code adapts to your specific needs with specialized modes designed for different development scenarios +

+
+ +
+
+

+ Code Mode + Default +

+

Perfect for general-purpose coding tasks, feature implementation, and everyday development work

+
    +
  • Code generation and completion
    • +
  • Bug fixes and optimization
    • +
  • Feature implementation
    • +
+
+ +
+

+ Architect Mode +

+

Strategic planning and high-level system design with technical leadership perspective

+
    +
  • System architecture planning
    • +
  • Technical decision guidance
    • +
  • Scalability recommendations
    • +
+
+ +
+

+ Ask Mode +

+

Intelligent Q&A for code explanations, concept clarification, and learning assistance

+
    +
  • Code explanation and analysis
    • +
  • Concept clarification
    • +
  • Best practices guidance
    • +
+
+ +
+

+ Debug Mode +

+

Systematic problem diagnosis and debugging with advanced error analysis capabilities

+
    +
  • Error analysis and resolution
    • +
  • Performance debugging
    • +
  • Systematic problem solving
    • +
+
+
+ +
+

+ Custom Modes +

+

+ Create unlimited specialized personas for security auditing, performance optimization, documentation, or any other task specific to your workflow +

+
+
-## Quick Start + +
+
+
+

+ Powerful Tools & Extensions +

+

Comprehensive toolkit for enhanced development experience

+
+ +
+
+

+ Core Tools +

+
    +
  • + + File reading and writing operations +
    • +
  • + + Terminal command execution +
    • +
  • + + Browser automation and control +
    • +
  • + + Intelligent codebase search +
    • +
+
+ +
+

+ Extensions +

+
    +
  • + + MCP (Model Context Protocol) integration +
    • +
  • + + Local AI models support +
    • +
  • + + Database connectivity +
    • +
  • + + External API integration +
    • +
+
+
+
+
-1. [Install Kilo Code](/getting-started/installing) -2. [Set up Kilo Code](/getting-started/setting-up) -3. [Try Your First Task](/getting-started/your-first-task) + +
+
+

+ Customization Options +

+

Tailor Kilo Code to match your unique development workflow

+
+ +
+
+ +

Settings Management

+

Configure your experience with granular control

+
+ +
+ +

Custom Instructions

+

Global plugin-wide instructions for personalized behavior

+
+ +
+ +

Project Rules

+

Define project-specific rules and guidelines

+
+ +
+ +

API Profiles

+

Multiple configuration profiles for different model providers

+
+ +
+ +

Auto-Approval

+

Streamlined workflows with intelligent automation

+
+ +
+ +

Interface Themes

+

Personalize the visual experience to your preference

+
+
+
-## Features + +
+
+
+

+ Resources & Community +

+

Everything you need to master Kilo Code and connect with other developers

+
+ +
+
+

+ Documentation +

+
+ + +
+

Using Kilo Code

+

Learn the basics and fundamental concepts

+
+ + + + +
+

Core Concepts

+

Master key features and capabilities

+
+ + + + +
+

Advanced Usage

+

Take your skills to the next level

+
+ + + + +
+

FAQ

+

Get answers to common questions

+
+ +
+
+ +
+

+ Community +

+
+ + +
+

Discord Server

+

Real-time help and discussions

+
+ + + + +
+

Reddit Community

+

Share experiences and tips

+
+ + + + +
+

YouTube Channel

+

Hands-on tutorials and guides

+
+ + + + +
+

GitHub

+

Report issues and request features

+
+ +
+
+
+
+
-GIF showing some of the capabilities of Kilo Code + +
+
+

Ready to Transform Your Development Experience?

+

Join thousands of developers who are already using Kilo Code to write better code faster

+
+ + +
+

+ Open source • Community driven • Developer focused +

+
+
+
-### Basics + + -You interact with Kilo Code through [the chat interface](/basic-usage/the-chat-interface) - just type what you want and Kilo Code will use the latest coding-optomized AI models to fulfill the request. You can change [modes](/basic-usage/using-modes) to have Kilo Code act in different ways, control what [actions](/features/auto-approving-actions) Kilo code can take, and interact with your code directly with [code actions](/features/code-actions). + + +