Tag: Design Mode

  • Tryb projektowania i raport kontekstu — Cursor ułatwia edycję canvasów

    Tryb projektowania i raport kontekstu — Cursor ułatwia edycję canvasów

    Cursor wprowadził dwie zmiany, które przyspieszają pracę z canvasami: Design Mode do bezpośredniej edycji elementów wizualnych oraz Context Usage Report, który pokazuje, na co schodzi budżet tokenów. Obie funkcje zostały dodane do changeloga 4 czerwca 2026 i wywołały dyskusje wśród zespołów używających agentów do generowania interfejsów.

    Co dokładnie się zmieniło

    • Design Mode umożliwia klikanie i zaznaczanie elementów UI bezpośrednio w canvasie, co eliminuje potrzebę opisywania każdej zmiany słowami.
    • Context Usage Report rozkłada zużycie tokenów na składniki, takie jak prompt systemowy, definicje narzędzi, reguły i skille.
    • Raport działa jako interaktywny canvas, co pozwala na zadawanie pytań uzupełniających i szukanie oszczędności.
    • Przycisk „Debug with Agent” otwiera nową konwersację, w której agent analizuje, co zużywa kontekst.

    Design Mode — klikasz, a agent rozumie kontekst

    Jednym z głównych problemów przy edycji canvasów było precyzyjne opisanie, który element UI należy zmienić. Użytkownicy musieli pisać „zmień padding w trzecim przycisku od lewej w drugim rzędzie” lub zgadywać nazwy klas. Design Mode eliminuje tę potrzebę.

    Teraz można zaznaczyć element bezpośrednio w canvasie, dodać adnotację, a agent otrzymuje dokładny kontekst wizualny. Cursor opisuje to jako sposób na szybszą iterację — użytkownik wskazuje zmianę, agent ją wykonuje, a następnie można przejść do kolejnej. To oszczędza czas, eliminując konieczność pisania długich instrukcji tekstowych.

    Dla zespołów budujących dashboardy, narzędzia wewnętrzne czy prototypy w trybie vibe codingu to konkretna oszczędność czasu. Agent nie musi zgadywać intencji — dostaje wizualne wskazanie, które jest znacznie bliższe temu, co widzi człowiek.

    Context Usage Report — gdzie przepalasz tokeny

    Context Usage Report — gdzie przepalasz tokeny
    Źródło: cursor.com

    Druga nowość rozwiązuje problem osób intensywnie pracujących z agentami: brak wiedzy na temat tego, co zużywa limit kontekstu. Prompt systemowy, definicje narzędzi, reguły projektu i skille sumują się w tle, a agent przestaje działać, gdy zabraknie miejsca.

    Raport użycia kontekstu przedstawia to w formie interaktywnego podziału. Użytkownicy widzą słupki tokenów rozbite na kategorie, co pozwala szybko zorientować się, czy to reguły zespołowe są problemem, czy może skill wciąga za dużo danych. Ponieważ raport jest canvasem, można kliknąć „Debug with Agent” i poprosić o analizę — agent przejrzy składniki i zaproponuje, co można odchudzić.

    To narzędzie jest szczególnie przydatne w pipeline'ach DevOps, gdzie agenci działają długo i na dużych projektach. Gdy sesja urywa się przed czasem, raport pokazuje przyczynę bez konieczności przeszukiwania logów.

    Dlaczego ma to znaczenie przy generowaniu UI

    Dlaczego ma to znaczenie przy generowaniu UI
    Źródło: cursor.com

    Obie funkcje odpowiadają na typowe problemy związane z agentowym kodem front-endowym. Design Mode skraca pętlę feedbacku między człowiekiem a agentem — z kilku zdań opisu do jednego kliknięcia. Context Usage Report dostarcza wgląd w ekonomikę sesji, co jest istotne przy złożonych projektach, gdzie prompt może być rozbudowany.

    Cursor nie ograniczył Design Mode do konkretnego typu agenta — działa przy edycji canvasów, niezależnie od tego, czy używasz Cloud Agents, czy lokalnego Cursor Agent. Raport kontekstu jest uniwersalny, więc zespoły na różnych planach mogą audytować swoje sesje.

    To nie są rewolucyjne koncepty — selekcja elementów UI i raportowanie tokenów istniały już w innych narzędziach. Jednak Cursor zintegrował je w spójny workflow: zaznaczasz w canvasie, otrzymujesz zmianę, a gdy agent zwalnia — sprawdzasz raport i debugujesz w tej samej przestrzeni.

    Podsumowanie

    Cursor wprowadził dwie funkcje, które powinny być standardem — umożliwił wskazywanie UI zamiast jego opisywania oraz pokazał, gdzie przepalają się tokeny. Dla osób spędzających godziny na iterowaniu canvasów z agentem, to realna oszczędność czasu i mniej frustracji związanej z ograniczeniami kontekstu.


    Źródła

  • Tryb Design w Cursorze z zaznaczaniem wielu elementów i komendami głosowymi bez czekania

    Tryb Design w Cursorze z zaznaczaniem wielu elementów i komendami głosowymi bez czekania

    Cursor wprowadził dwie nowe funkcje do Trybu Design: możliwość zaznaczania wielu elementów interfejsu jednocześnie oraz ciągłe sterowanie głosowe, które działa nawet podczas przetwarzania wcześniejszych poleceń. Aktualizacja została wprowadzona na początku czerwca i zmienia sposób interakcji z interfejsem użytkownika z tekstowych poleceń na bezpośrednie wskazywanie i mówienie.

    Kluczowe informacje

    • Tryb Design umożliwia klikanie w elementy przeglądarki, rysowanie po nich lub opisywanie zmian głosem.
    • Multi-select pozwala na zaznaczenie dwóch lub więcej elementów jednocześnie, co umożliwia agentowi wprowadzenie skoordynowanych edycji w grupie komponentów.
    • Mikrofon pozostaje aktywny podczas działania agenta, co pozwala na ustawianie kolejnych zadań bez przerywania pracy.
    • Agent analizuje nie tylko kod zaznaczonych elementów, ale także otaczający układ strony i relacje wizualne między nimi.
    • Funkcja ta jest skierowana na codzienne poprawki UI oraz bardziej złożone zmiany w layoucie, a nie tylko na demonstracyjne przykłady.

    Co właściwie zmieniło się w Trybie Design

    Tryb projektowy w Cursorze istniał wcześniej, ale opierał się głównie na opisywaniu zmian słowami. Nowe podejście koncentruje się na interakcji „wskaż i edytuj”. Użytkownik klika w przeglądarce element, który chce zmienić, a Cursor odczytuje jego kod źródłowy i rozumie kontekst, w którym dany element się znajduje, zanim przystąpi do edycji.

    Wprowadzenie multi-select to istotna zmiana. Na przykład, jeśli masz kartę produktu z ceną, przyciskiem „kup teraz” i ikoną koszyka, możesz zmienić ich wspólny styl — odstępy, kolory, wyrównanie. Zamiast opisywać każdy z osobna, zaznaczasz wszystkie trzy elementy, a Cursor widzi ich wzajemne relacje i może edytować je jako spójną grupę. To oszczędza czas i eliminuje ryzyko, że zmiana w jednym komponencie wpłynie na resztę.

    Drugą nowością jest kolejkowanie głosowe. Wcześniej po wydaniu komendy trzeba było czekać, aż agent zakończy, zanim można było podyktować następną. Teraz mikrofon działa bez przerwy. Mówisz: „zmień kolor nagłówka na granatowy”, a gdy agent jeszcze nad tym pracuje, dodajesz: „potem zmniejsz logo o 20% i przesuń menu na prawo”. Cursor układa te zadania w kolejkę i wykonuje je jedno po drugim.

    Jak agent rozumie kontekst strony

    Jak agent rozumie kontekst strony

    Cursor nie tylko odczytuje pojedynczy fragment kodu. Gdy zaznaczasz elementy, agent analizuje ich kod źródłowy oraz otaczający layout, a także to, jak te elementy wyglądają w relacji do siebie. Dzięki temu rozumie, że przycisk znajduje się wewnątrz kontenera z flexboxem, a nie luzem na stronie, co pozwala mu odpowiednio dostosować sugestie.

    To ważne przy bardziej złożonych projektach, gdzie jeden komponent może wpływać na pozycję kilku innych. Agent nie działa w próżni — widzi cały układ, a nie tylko pojedynczy znacznik HTML. Dla programisty oznacza to mniej ręcznego sprawdzania, czy zmiana w jednym miejscu nie wpłynie na inne elementy na stronie.

    Dla kogo to ma znaczenie

    Dla kogo to ma znaczenie

    Te usprawnienia są przydatne nie tylko dla osób, które nie potrafią kodować. Doświadczeni frontendowcy mogą dzięki nim szybciej prototypować i poprawiać interfejsy bez przerywania pracy. Zamiast przełączać się między kodem a podglądem, klikają bezpośrednio w element i mówią, co zmienić.

    Szczególnie przydatne jest to przy iteracyjnych poprawkach, gdy klient prosi o serię drobnych zmian w layoucie, a każda z nich dotyczy kilku powiązanych ze sobą komponentów. Multi-select i kolejka głosowa sprawiają, że cały proces przypomina bardziej rozmowę z drugim programistą niż wprowadzanie poleceń w oknie czatu.

    Cursor rozwija również wersję na iPada, gdzie Tryb Design zyskuje dodatkowy wymiar dzięki Apple Pencil. Umożliwia to rysowanie bezpośrednio po zrzutach ekranu, wskazując palcem lub rysikiem konkretne miejsca do poprawy. To pokazuje kierunek, w którym zmierza edytor — od tekstowych interfejsów do multimodalnej pracy z kodem.

    Podsumowanie

    Nowy Tryb Design w Cursorze to przemyślane udoskonalenie istniejącego rozwiązania. Multi-select i ciągłe sterowanie głosowe eliminują przeszkody w codziennej pracy przy UI, pozwalając skupić się na realizacji zadań, a nie na ich opisywaniu. Agent otrzymuje więcej kontekstu, a programista traci mniej czasu na poprawki — co tworzy efektywny system pracy.


    Źródła

  • Cursor zyskuje tryb Design Mode i raport zużycia kontekstu – edycja UI bez pisania kodu

    Cursor zyskuje tryb Design Mode i raport zużycia kontekstu – edycja UI bez pisania kodu

    Cursor wprowadził dwie nowe funkcje w obszarze canvases, które zmieniają sposób interakcji z interfejsem użytkownika. Tryb Design Mode umożliwia zaznaczanie elementów bezpośrednio na podglądzie strony i wskazywanie agentowi, co ma zmienić, bez potrzeby opisywania wszystkiego słowami. Dodatkowo, dostępny jest interaktywny raport zużycia kontekstu, który pokazuje, gdzie dokładnie idą tokeny podczas pracy agenta.

    Co nowego w pigułce

    • Design Mode umożliwia zaznaczanie, rysowanie i wybieranie głosowe elementów UI w canvasach Cursora.
    • Wielokrotny wybór pozwala zaznaczyć kilka elementów naraz, aby agent mógł je dopasować lub usunąć w jednym kroku.
    • Raport kontekstu rozbija zużycie tokenów na kategorie: system prompt, narzędzia, reguły i umiejętności.
    • Edycja głosowa działa nawet gdy agent przetwarza poprzednie polecenie, co przyspiesza iteracyjne poprawki.
    • Obie funkcje są dostępne dla użytkowników w ramach aktualizacji Cursor.

    Jak działa Design Mode w praktyce

    Dotychczas, aby zmienić wygląd komponentu w canvasie, użytkownik musiał opisać, co i gdzie należy poprawić. Design Mode zmienia tę sytuację. Użytkownik klika element bezpośrednio na podglądzie, może dodać kilka referencji, narysować po interfejsie lub powiedzieć na głos, co chce zmienić.

    Agent otrzymuje nie tylko zaznaczony fragment. Cursor przekazuje mu kod elementu, układ strony oraz wizualne relacje między komponentami. Dzięki temu edycja staje się bardziej precyzyjna, ponieważ agent rozumie kontekst przestrzenny, a nie tylko abstrakcyjny opis.

    Wielokrotny wybór to kolejna nowość. Użytkownik zaznacza kilka przycisków, kart lub sekcji i mówi agentowi: „zrób, żeby wyglądały tak samo jak ten pierwszy” lub „usuń duplikaty”. Wcześniej wymagałoby to kilku osobnych poleceń. Teraz wystarczy jedna komenda.

    Co istotne, tryb głosowy nie blokuje agenta. Użytkownik może mówić, co zmienić, nawet gdy Cursor pracuje nad poprzednim zadaniem. To przyspiesza proces wprowadzania poprawek, ponieważ nie trzeba czekać na zakończenie wcześniejszej instrukcji.

    Raport kontekstu – tokeny pod lupą

    Raport kontekstu – tokeny pod lupą

    Drugą nowością jest interaktywny raport zużycia kontekstu. Użytkownicy wcześniej widzieli głównie całkowitą liczbę tokenów. Teraz Cursor rozbija to na kategorie: system prompt, narzędzia, reguły i umiejętności.

    Raport pokazuje nie tylko liczby, ale także proporcje. Dzięki temu łatwiej zdiagnozować, dlaczego kontekst się powiększa – czy to przez rozbudowane reguły, czy może przez narzędzia ładujące zbędne dane. Jeśli coś wygląda podejrzanie, dostępna jest opcja „Debug with Agent”, która pozwala przeanalizować problem bardziej szczegółowo.

    Dla zespołów pracujących z dużymi bazami reguł i rozbudowanymi promptami systemowymi to istotna zmiana. Zamiast zgadywać, co zużywa tokeny, można to sprawdzić w kilka sekund i odpowiednio zoptymalizować konfigurację agenta.

    Co to oznacza dla codziennej pracy

    • Design Mode i raport kontekstu to nie są jedynie kosmetyczne dodatki. Pierwsza funkcja znacznie skraca czas potrzebny na wizualne poprawki, szczególnie przy generowanych dashboardach, raportach i innych artefaktach UI, które Cursor tworzy w canvasach. Zamiast pisać szczegółowe instrukcje, użytkownik może wskazać elementy i powiedzieć, co zmienić.

    Druga funkcja daje kontrolę nad kosztami i wydajnością. W świecie agentów AI, gdzie tokeny wpływają na czas odpowiedzi i wydatki, świadomość, gdzie one idą, jest kluczowa. Raport kontekstu wpisuje się w szerszy trend – narzędzia dla deweloperów coraz częściej pokazują nie tylko co robi agent, ale także ile go to kosztuje.

    Obie funkcje są już dostępne dla użytkowników. Design Mode można znaleźć bezpośrednio w interfejsie canvasów, a raport kontekstu pojawia się jako interaktywny widok w panelu agenta.


    Źródła