Ctrl+K - Edycja zaznaczonego kodu z AI

Witaj ponownie! Teraz pokażę Ci najważniejszy skrót w Cursorze: Ctrl+K (lub Cmd+K na Mac).

Co to jest Ctrl+K?

W Cursorze 3 Ctrl+K (tak samo jak Ctrl+L) dodaje zaznaczony kod do nowego czatu z Agentem AI. Dawna edycja w miejscu (inline edit) została zastąpiona właśnie tym przepływem. Zamiast pisać kod ręcznie, opisujesz co chcesz zmienić, AI zmienia kod, a Ty przeglądasz zmiany i je akceptujesz albo odrzucasz.

Jak używać Ctrl+K - Krok po kroku

Metoda 1: Edycja zaznaczonego kodu

1. Zaznacz kod który chcesz zmienić
2. Naciśnij Ctrl+K (lub Cmd+K na Mac)
3. Opisz co chcesz zmienić w czacie, który się otworzy
4. AI zaproponuje zmiany
5. Accept (zaakceptuj) lub Reject (odrzuć)

Metoda 2: Dodanie nowego kodu

1. Postaw kursor w miejscu gdzie chcesz dodać kod (albo zaznacz linię, pod którą ma się pojawić)
2. Naciśnij Ctrl+K, żeby otworzyć czat
3. Opisz co i gdzie chcesz dodać
4. AI wygeneruje kod
5. Accept lub Reject

Praktyczne przykłady

Przykład 1: Zmiana koloru

Masz kod:

<h1>Ahoj Piraci!</h1>

Chcesz: Czerwony kolor tekstu

Co robisz:

1. Zaznacz <h1>Ahoj Piraci!</h1>
2. Ctrl+K
3. Wpisz: "dodaj czerwony kolor"
4. AI zaproponuje:

<h1 style="color: red;">Ahoj Piraci!</h1>

5. Accept!

Przykład 2: Dodanie obrazka

Masz kod:

<h1>Witaj na statku!</h1>

Chcesz: Dodać obrazek pirata pod nagłówkiem

Co robisz:

1. Postaw kursor na końcu linii z h1
2. Ctrl+K
3. Wpisz: "dodaj obrazek pirata z URL unsplash"
4. AI doda:

<h1>Witaj na statku!</h1>
<img src="https://images.unsplash.com/photo-pirate" alt="Pirat">

5. Accept!

Przykład 3: Refactoring

Masz kod:

<p>Statek</p>
<p>Kotwica</p>
<p>Mapa</p>

Chcesz: Zmienić na listę

Co robisz:

1. Zaznacz wszystkie 3 paragrafy
2. Ctrl+K
3. Wpisz: "zmień na listę ul z li"
4. AI zaproponuje:

<ul>
  <li>Statek</li>
  <li>Kotwica</li>
  <li>Mapa</li>
</ul>

5. Accept!

Zaznaczenie + Ctrl+K vs pytanie w AI Chat - Kiedy co używać?

Oba sposoby otwierają czat z AI. Różnica polega na tym, czy zaczynasz od zaznaczonego fragmentu kodu (Ctrl+K), czy od ogólnego pytania w AI Chat (Ctrl+L bez zaznaczenia).

Zasada: Jeśli wiesz GDZIE w kodzie chcesz zmianę → zaznacz ten fragment i użyj Ctrl+K. Jeśli nie wiesz od czego zacząć → użyj AI Chat.

Wskazówki Pro

1. Bądź konkretny

"zmień to" "zmień kolor tła na czarny i tekstu na złoty"

2. Używaj języka technicznego (gdy go znasz)

"zrób ładny przycisk" "dodaj button z padding 10px i border-radius 5px"

3. Iteruj

Pierwsze Accept → Zobacz efekt → Ctrl+K ponownie → Dopracuj

4. Eksperymentuj

Nie bój się! Zawsze możesz:

• Reject - odrzucić zmiany
• Ctrl+Z - cofnąć
• Ctrl+K ponownie - poprawić

Ćwiczenie praktyczne

Czas na własne eksperymenty! Otwórz Cursora i:

1. Stwórz nowy plik pirate.html
2. Wpisz: <h1>Mój statek</h1>
3. Zaznacz tę linijkę
4. Ctrl+K → "dodaj czarne tło i biały tekst"
5. Accept
6. Ctrl+K ponownie → "dodaj border 2px czerwony"
7. Accept

Gratulacje! Właśnie użyłeś Ctrl+K dwa razy pod rząd!

Częste pytania

Q: Co jeśli AI nie zrozumie mojej instrukcji? A: Reject i spróbuj bardziej szczegółowo opisać. Np. zamiast "ładniej" napisz "większy font i wyśrodkowany".

Q: Czy mogę używać Ctrl+K na wielu liniach? A: Tak! Zaznacz dowolną ilość kodu.

Q: Co jeśli chcę dodać coś na początku pliku? A: Naciśnij Ctrl+K i napisz, że zmiana ma trafić na początek pliku.

Q: Czy Ctrl+K działa tylko z HTML? A: Nie! Działa z każdym językiem: JavaScript, Python, CSS, wszystko!

Podsumowanie

Ctrl+K wysyła zaznaczony kod do czatu z AI Używaj do szybkich zmian w kodzie Możesz edytować zaznaczony kod lub dodawać nowy Zawsze możesz Reject i spróbować ponownie Im bardziej konkretny, tym lepszy efekt

To jest TWOJA MAGICZNA RÓŻDŻKA, piratu!

W następnym module zaczniemy budować prawdziwe statki (aplikacje) z Next.js!

Ale najpierw musisz przejść przez kilka zadań, żeby utrwalić umiejętności.

Do zobaczenia na morzach kodu!

Kapitan Redbeard out.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Piracki Statek</title>
    <style>
        body {
            background-color: #0f172a;
            color: #fef3c7;
            font-family: 'Courier New', monospace;
            padding: 30px;
        }
        h1 {
            color: #f59e0b;
            text-align: center;
            font-size: 36px;
        }
        .ship {
            border: 3px solid #dc2626;
            background-color: #78350f;
            padding: 20px;
            margin: 20px 0;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <h1>Mój Piracki Statek</h1>

    <div class="ship">
        <h2>Czarna Perła</h2>
        <p><strong>Kapitan:</strong> Redbeard</p>
        <p><strong>Załoga:</strong> 50 piratów</p>
        <p><strong>Skarby:</strong> 1000 złotych monet</p>
    </div>

    <p>To jest mój pierwszy statek! Zmień nazwę, kapitana, dodaj więcej!</p>
</body>
</html>