AI2Expert
Poświęcasz kilka godzin na przygotowanie materiału. Układasz myśli, dobierasz przykłady, poprawiasz tekst. Wysyłasz go klientowi albo uczestnikom szkolenia i liczysz na to, że ktoś poświęci mu uwagę. Tymczasem po drugiej stronie twój dokument trafia między kolejną wiadomość, telefon i sprawę, którą trzeba załatwić na już. Nawet dobry materiał łatwo wtedy odłożyć na później.
Znasz to pewnie również z własnej strony. Otwierasz coś, co cię zainteresowało, ale za chwilę uwagę zabiera powiadomienie albo następna otwarta karta. Mamy wokół siebie tyle treści, że samo przekazanie informacji nie oznacza jeszcze, że ktoś zdąży się z nią zapoznać. Dlatego kiedy przygotowuję artykuł, warsztat czy materiał dla klienta, myślę również o tym, jak ułatwić drugiej osobie wejście w temat i pozostanie przy nim.
Dużo może zmienić już sposób pokazania treści. W instrukcji od razu widać kolejne kroki. W opisie strategii można zobaczyć, co z czego wynika. Na szkoleniu uczestnik szybko odnajduje ćwiczenie i jednym kliknięciem kopiuje polecenie do AI. Odbiorca ma wtedy mniej pracy z samym dokumentem i może skupić się na tym, co chcę mu przekazać.
Dobry materiał powinien ułatwiać czytelnikowi zrobienie następnego kroku: zrozumienie przykładu, porównanie możliwości albo wykonanie zadania. Właśnie dlatego korzystam z interaktywnych dokumentów HTML. Z pomocą AI mogę przygotować taką formę na podstawie gotowego tekstu, opisując zwykłym językiem, dla kogo jest materiał i do czego ma służyć.
Zobacz, ten artykuł jest przykładem takiej pracy. Najpierw powstał jako tekst, a potem dostał wygląd, który widzisz teraz. W ten sposób buduję artykuły na swojej stronie i przekazuję wiedzę klientom podczas szkoleń. Przygotowałem sobie do tego skill Markdown to Interactive HTML i postanowiłem się nim podzielić, żebyś mógł wykorzystać ten sam sposób u siebie.
Poniżej pokażę ci zastosowania w firmie, na szkoleniu i w życiu prywatnym, a potem przeprowadzę cię przez przygotowanie pierwszego dokumentu. Dostaniesz gotowe polecenia do skopiowania oraz drugi skill, który pomoże ci wybrać własne kolory. Możesz zacząć od jednego materiału, który już masz, i sprawdzić, jak zmieni się sposób korzystania z niego.
01
Zacznijmy od dwóch nazw, bo będą się tutaj pojawiać. Markdown to prosty sposób zapisania tekstu z nagłówkami, listami, linkami i przykładami. Taki dokument ma zwykle końcówkę .md. HTML to format, który przeglądarka wykorzystuje do wyświetlania strony. Gotowy plik .html możesz otworzyć w przeglądarce podobnie jak stronę internetową.
Przygotowując materiał, pracujesz więc najpierw nad treścią w Markdownie. Potem AI tworzy z niej dokument HTML, dobierając układ, kolory i funkcje ułatwiające korzystanie. Kod potrzebny do wyglądu i interakcji powstaje po stronie agenta. Nie musisz pisać go ręcznie.
Załóżmy, że przygotowałeś materiał na warsztat. Masz wprowadzenie, pięć etapów pracy i dwa prompty, które uczestnicy mają wypróbować. W wersji HTML można pokazać mapę tych etapów, dodać przejścia do poszczególnych części i umieścić przyciski kopiowania przy promptach. Osoba na szkoleniu otwiera materiał, znajduje właściwe ćwiczenie i z niego korzysta.
Treść może pozostać dokładnie taka sama. Zmienia się sposób jej przedstawienia oraz poruszania się po niej. Właśnie ten efekt chcę uzyskać, kiedy zamieniam dokument w HTML.
02
W artykułach i materiałach szkoleniowych zależy mi na kilku rzeczach naraz. Chcę, żeby dobrze się je czytało, żeby ważne elementy były widoczne i żeby odbiorca mógł łatwo skorzystać z przykładów. Jednocześnie chcę zachować to, co napisałem. Szczególnie wtedy, gdy w tekście znajduje się gotowy prompt, instrukcja albo warunek, którego nie wolno zgubić.
Samo polecenie „zrób z tego ładną stronę” zostawia AI bardzo dużo miejsca na interpretację. Może wybrać ciekawy układ, ale może też skrócić jakiś fragment, zmienić kolejność albo dodać coś, czego nie było w materiale. Dlatego chciałem zapisać sposób pracy, do którego agent będzie wracał przy kolejnych dokumentach.
Skill to taki zestaw instrukcji do określonego zadania. Może zawierać również przykłady i narzędzia pomagające sprawdzić wynik. Codex odczytuje go, gdy z niego korzysta. W tym przypadku instrukcje opisują, jak przejść od dokumentu Markdown do gotowego HTML i co po drodze sprawdzić. Taką budowę skilli opisuje też dokumentacja OpenAI.
W moim skillu zapisałem więc zasady dotyczące zachowania treści, dobierania układu do materiału, interakcji, kolorów, telefonu i druku. Dołączyłem również narzędzie porównujące treść źródłową z wynikiem. To pomaga utrzymać jakość kolejnych dokumentów, choć nadal trzeba obejrzeć to, co AI przygotowało.
03
Najłatwiej zacząć od materiału, który już masz i który komuś przekazujesz. Wtedy od razu możesz porównać, czy nowa forma rzeczywiście coś ułatwia.
| Materiał | Co może dać wersja HTML |
|---|---|
| Instrukcja dla pracownika | Wyraźne etapy i szybkie przejście do potrzebnej czynności |
| Materiał szkoleniowy | Ćwiczenia, czytelne przykłady i kopiowanie promptów |
| Opis strategii lub plan działania | Pokazanie kolejności, zależności i miejsc wymagających decyzji |
| Oferta dla klienta | Czytelny zakres, porównanie wariantów i wyróżnienie warunków |
| Prywatny plan podróży | Podział na dni, uporządkowane informacje i linki pod ręką |
Te elementy mają wynikać z treści. Jeżeli piszesz spokojny artykuł, może wystarczyć dobra typografia, kilka wyróżnień i spis treści. Jeżeli przygotowujesz instrukcję, większe znaczenie będzie miała kolejność kroków. Z kolei przy porównaniu rozwiązań warto zadbać o to, żeby kryteria dało się łatwo zestawić obok siebie.
Nie każdy dokument potrzebuje dodatkowych funkcji. Przy krótkiej informacji kilka dobrze napisanych akapitów może być najlepszą formą. HTML szczególnie przydaje się tam, gdzie odbiorca ma wracać do fragmentów, porównywać informacje albo coś na ich podstawie robić.
04
Cały proces można podzielić na pięć części. Piszę o nich dlatego, żebyś wiedział, co zlecasz AI i czego oczekiwać po wyniku.
Agent sprawdza, o czym jest dokument i jak został ułożony. Rozpoznaje nagłówki, przykłady, listy, tabele oraz fragmenty do kopiowania. Ma zrozumieć, z czego odbiorca będzie korzystał i w jakiej kolejności.
Warto mu przy tym powiedzieć, dla kogo przygotowujesz materiał. Ta sama treść używana na szkoleniu i czytana spokojnie po pracy może wymagać innych rozwiązań. Jedno zdanie o odbiorcy często daje więcej niż długa lista wymagań dotyczących wyglądu.
Na tej podstawie projektuje układ strony. Ustala hierarchię nagłówków, szerokość tekstu, odstępy i miejsca, które zasługują na mocniejsze wyróżnienie. Może pokazać proces jako połączone etapy, a porównanie jako tabelę.
Skill zostawia tutaj przestrzeń na projektowanie. Kolejne dokumenty nie muszą wyglądać identycznie. Stałe są zasady czytelności i wybrana kolorystyka, a kompozycja powinna pasować do konkretnego materiału.
Przy długim dokumencie może to być spis treści. Przy promptach przyciski kopiowania. Przy materiale do pracy lista czynności do zaznaczenia, jeśli takie czynności rzeczywiście są w źródle. Uzupełniające informacje mogą dostać rozwijany fragment, ale główna treść powinna pozostać dostępna.
Ważne jest rozróżnienie między możliwością a obowiązkiem. Skill nie ma dodawać wszystkich tych elementów do każdej strony. Każdy z nich powinien ułatwiać coś konkretnego.
To jedna z najważniejszych zasad, które w nim zapisałem. Podczas konwersji agent ma zachować słowa autora, kolejność informacji, liczby, linki, zastrzeżenia i przykłady. Prompty oraz kod powinny pozostać dokładne, razem z podziałem na linie i wcięciami.
Dlatego najpierw warto dopracować sam tekst. Jeśli chcesz zmienić treść, zrób to jako osobne zadanie. Łatwiej wtedy ocenić, czy jesteś zadowolony z tego, co dokument mówi, a później z tego, jak wygląda.
Kontrola ma obejmować zgodność ze źródłem, działanie strony i jej wygląd. To trzy różne sprawy. Tekst może być kompletny, a przycisk niesprawny. Strona może wyglądać dobrze na komputerze, ale mieć zbyt szerokie elementy na telefonie.
W instrukcjach jest więc sprawdzanie treści, otwarcie strony w przeglądarce, kontrola interakcji, wersji mobilnej i druku. Jeśli w danym środowisku brakuje narzędzia do wykonania któregoś sprawdzenia, agent powinien powiedzieć ci to wprost. Sam komunikat, że plik został zapisany, nie potwierdza jeszcze jakości całego dokumentu.
05
Przygotowałem dwa osobne narzędzia. Pierwsze służy do tworzenia dokumentów, a drugie pomaga wybrać i zapisać ich kolorystykę.
Markdown to Interactive HTML zamienia gotowy tekst Markdown w HTML. Wersja dla ciebie ma paletę Petrol i miedź: petrol jako kolor prowadzący, ciemna miedź do wyróżnień, ciepła biel jako tło i grafitowy tekst. Możesz zacząć od tych ustawień i niczego nie zmieniać.
HTML Skill Update prowadzi przez wybór kolorów. Możesz opowiedzieć mu, jaki wygląd ci się podoba, poprosić o propozycje, obejrzeć podgląd i dopiero wtedy zdecydować o zapisaniu zmian.
Kolory tej sekcji to dokładnie ta paleta, którą dostaniesz w skillu do pobrania. Reszta artykułu jest w barwach AI2Expert, więc twoje dokumenty nie będą domyślnie wyglądały jak materiały mojej marki. Możesz dopasować kolory do siebie, korzystając z drugiego skilla poniżej.
Do pobrania
Na początek wystarczy pierwszy skill. Drugi przyda ci się, gdy zechcesz zmienić kolory na stałe. Pobranie ZIP zapisuje pliki na komputerze; kolejnym krokiem jest dodanie skilla do Codex.
06
Ten zestaw przygotowałem do pracy w Codex. Jeśli używasz Claude Code, możesz poprosić go o dostosowanie pobranych skilli do swojego środowiska. Główna idea pozostaje taka sama: agent czyta instrukcje zapisane w SKILL.md i korzysta z dołączonych plików. Adaptacji mogą wymagać miejsce instalacji, sposób uruchamiania oraz odwołania do narzędzi, na przykład przeglądarki. Claude Code również obsługuje skille oparte na tym formacie, co opisuje jego oficjalna dokumentacja.
Udostępnij Claude Code cały rozpakowany folder, razem z plikami pomocniczymi. Samo wklejenie treści SKILL.md może nie wystarczyć, ponieważ instrukcje odwołują się także do innych plików. Następnie wklej poniższą instrukcję do rozmowy. Nie musisz zmieniać ustawień systemowych narzędzia.
W folderze [wskaż rozpakowany folder] znajduje się skill przygotowany do pracy w Codex. Chcę korzystać z niego w Claude Code. Przeczytaj cały skill wraz z plikami pomocniczymi. Sprawdź aktualne zasady obsługi skilli w Claude Code i dostosuj do nich kopię tego narzędzia. Oryginał dla Codex zachowaj bez zmian. Zachowaj cel skilla, jego nazwę, kolorystykę i zasady działania, w tym ochronę treści, jakość wizualną, interaktywność, dostępność oraz sprawdzanie gotowego wyniku. Dostosuj tylko elementy zależne od środowiska: metadane, lokalizację, sposób uruchamiania i odwołania do dostępnych narzędzi. Jeśli czegoś nie da się obsłużyć, wyjaśnij to i zaproponuj rozwiązanie. Nie usuwaj kontroli jakości tylko po to, żeby zakończyć adaptację. Jeśli adaptujesz html-skill-update, dopilnuj, żeby odnajdywał i aktualizował właściwą kopię markdown-to-interactive-html dla Claude Code. Zachowaj podgląd, akceptację kolorów i kopię bezpieczeństwa przed zapisem. Zainstaluj dostosowaną kopię we właściwym miejscu dla Claude Code. Jeżeli istnieje już skill o tej nazwie, ustal ze mną, którą wersję zachować, zanim cokolwiek nadpiszesz. Sprawdź, czy skill jest wykrywany, i przeprowadź krótką próbę działania. Na końcu wyjaśnij, co zmieniłeś, jak mam go uruchomić i czy pozostały jakieś ograniczenia.
Tego polecenia możesz użyć osobno dla każdego z dwóch skilli. Jeśli przenosisz oba, zacznij od generatora HTML, a potem dostosuj updater, żeby wiedział, gdzie szukać generatora. Po adaptacji poproś o odpowiednik poleceń z dalszej części artykułu w składni używanego narzędzia.
W przypadku innego rozwiązania zastąp nazwę Claude Code nazwą swojej aplikacji i poproś najpierw o sprawdzenie, czy obsługuje takie skille. Zakres adaptacji zależy od jej możliwości. Próbę na krótkim dokumencie warto wykonać przed użyciem własnych materiałów dla klientów.
07
Poniżej opisuję pracę w Codex na komputerze. Potrzebujesz dostępu do Codex, pobranego skilla i pliku z treścią. Osoba, która później otworzy gotowy HTML, potrzebuje już tylko przeglądarki.
Rozpakuj pobrany ZIP. Zachowaj cały folder skilla razem z jego zawartością. W środku znajduje się plik SKILL.md oraz pliki pomocnicze. Samo otwarcie SKILL.md w edytorze nie jest jeszcze instalacją.
Możesz zlecić przygotowanie instalacji Codex. Udostępnij mu rozpakowany folder w projekcie albo wskaż jego rzeczywistą lokalizację. W poniższym poleceniu zastąp tekst w nawiasach miejscem, w którym masz pliki.
W folderze [wskaż rozpakowany folder] znajdują się skille, które chcę dodać do Codex. Sprawdź ich zawartość i ustal właściwe miejsce instalacji na moim komputerze. Chcę korzystać z nich w różnych projektach. Sprawdź też, czy nie mam już kopii o tych samych nazwach. Wyjaśnij mi krótko, co zrobisz. Jeżeli istnieje wcześniejsza kopia, nie nadpisuj jej bez uzgodnienia. Po instalacji sprawdź, czy skille są dostępne, i powiedz mi, jak je uruchomić.
Jeśli Codex zgłosi, że nie widzi folderu, wskaż mu pliki ponownie. Jeśli po instalacji skill nadal nie pojawia się jako dostępny, uruchom ponownie Codex. Sposób wykrywania lokalnych skilli jest opisany w oficjalnej instrukcji.
Wybierz krótki materiał, którego treść znasz. Może to być instrukcja, którą już wysyłasz pracownikom, albo fragment szkolenia. Przy pierwszej próbie łatwiej ocenić kilka sekcji niż kilkudziesięciostronicowy dokument.
Jeśli masz tekst, ale nie masz pliku Markdown, Codex może go dla ciebie przygotować. Oto polecenie:
Zapisz poniższy tekst jako material.md w tym projekcie. Zachowaj jego treść i kolejność. Użyj Markdownu do oznaczenia nagłówków, list oraz fragmentów do kopiowania. Na tym etapie przygotuj tylko plik Markdown. Treść: [wklej swój materiał]
Otwórz zapisany plik i przeczytaj go przed kolejnym krokiem. Jeśli dopiero tworzysz treść razem z AI, najpierw ją uzgodnij. Zatwierdzony Markdown będzie źródłem do przygotowania strony i punktem odniesienia podczas sprawdzania wyniku.
Masz już skill i gotowy tekst. Teraz podaj nazwę pliku oraz krótko opisz odbiorcę. Dla naszego przykładu warsztatowego polecenie może wyglądać tak:
Użyj $markdown-to-interactive-html i przygotuj stronę HTML na podstawie pliku material.md. To materiał dla uczestników warsztatu. Będą wracać do kolejnych etapów i kopiować prompty podczas ćwiczeń. Część osób będzie korzystać z telefonu. Użyj domyślnej kolorystyki skilla. Zachowaj całą treść źródłową. Zapisz wynik jako material.html i wykonaj sprawdzenia opisane w skillu. Na końcu pokaż plik i powiedz, co zostało sprawdzone, a czego nie udało się zweryfikować.
Fragment o warsztacie zastąp opisem własnej sytuacji. Możesz napisać: „To instrukcja dla nowego pracownika” albo „To porównanie trzech wariantów oferty, które klient ma spokojnie przejrzeć”. Dzięki temu agent wie, do czego ma służyć układ.
Otwórz HTML w przeglądarce. Przejdź od początku do końca, kliknij nawigację i wypróbuj funkcje, które zostały dodane. Jeśli jest przycisk kopiowania, wklej skopiowany tekst i porównaj go z oryginałem. Zobacz też dokument na telefonie.
Może się okazać, że kolory ci odpowiadają, ale tytuł jest za duży albo przykład za słabo wyróżniony. Wtedy opisz konkretnie, co chcesz poprawić. Nie musisz znać nazw elementów strony.
W material.html zmniejsz tytuł na telefonie i mocniej wyróżnij przykład w sekcji [nazwa sekcji]. Zachowaj obecną kolorystykę i całą treść. Po zmianie sprawdź układ oraz nawigację.
Takie polecenie poprawia ten konkretny dokument. Domyślne ustawienia skilla zostają takie jak wcześniej.
08
Możesz polubić domyślną paletę i na tym poprzestać. Możesz też stwierdzić, że potrzebujesz czegoś bardziej spokojnego, żywego albo dopasowanego do firmy. Właśnie do tej rozmowy przygotowałem HTML Skill Update.
Nie musisz zaczynać od kodów kolorów. Możesz powiedzieć, jakie masz wrażenie i czego szukasz:
Użyj $html-skill-update. Chcę zmienić domyślne kolory w skillu Markdown to Interactive HTML. Zależy mi na eleganckim wyglądzie, ale z wyraźniejszymi akcentami. Nie mam ustalonych kolorów. Pomóż mi wybrać, pokaż propozycje na przykładzie HTML i zapisz zmiany dopiero po mojej akceptacji.
Skill ma najpierw odnaleźć właściwy generator na twoim komputerze. Jeśli znajdzie kilka kopii, powinien wyjaśnić, czym się różnią, i ustalić z tobą, którą aktualizować. Potem przechodzi do rozmowy o wyglądzie.
Możesz w jej trakcie zapytać: „Co znaczy główny kolor?”, „Pokaż mi coś cieplejszego” albo „Ten zestaw jest za mdły, chciałbym mocniejszy kontrast”. Podgląd pomaga ocenić to na rzeczywistym tekście, przyciskach i wyróżnieniach. Same nazwy odcieni często niewiele mówią.
Jeśli masz już kolory firmy, wskaż je albo przekaż dokument z identyfikacją wizualną. Agent ma uwzględnić je w propozycji i sprawdzić czytelność. Bardzo jasny kolor może dobrze wyglądać na tle sekcji, ale wymagać ciemniejszego wariantu w drobnym napisie.
Po zaakceptowaniu podglądu updater ma wykonać kopię bezpieczeństwa i zapisać kolorystykę we właściwym skillu. Zasady dotyczące treści, projektowania, interakcji i sprawdzania wyniku pozostają zachowane. Nowe ustawienia będą wykorzystywane przy kolejnych dokumentach. Gotowe wcześniej HTML-e wymagają osobnej aktualizacji.
Cała droga wygląda więc tak:
Jeśli potrzebujesz innych kolorów tylko w jednym materiale, wystarczy dopisać to do polecenia tworzącego HTML. Updater przydaje się wtedy, gdy chcesz zachować nowy wygląd na przyszłość.
09
Gotowy HTML możesz zachować na komputerze, przekazać innej osobie albo opublikować jako stronę. Jeżeli obok niego powstał folder z obrazami, trzeba przekazać również ten folder. W przeciwnym razie u odbiorcy może zabraknąć ilustracji.
W swoich materiałach korzystam z publikacji na stronie internetowej. Dla odbiorcy wygodny jest wtedy zwykły link. Przy pierwszej próbie możesz jednak spokojnie zostać przy lokalnym pliku i obejrzeć go w przeglądarce. Publikowanie jest osobnym krokiem.
Możesz też skorzystać z drukowania lub zapisu do PDF w przeglądarce. Sprawdź wtedy podgląd wydruku. Przyciski i nawigacja powinny zniknąć, a właściwa treść pozostać czytelna. W PDF funkcje takie jak kopiowanie przyciskiem czy rozwijanie fragmentów nie działają tak jak na stronie HTML.
10
Dobry wygląd łatwo robi pierwsze wrażenie. Ja chcę jednak, żeby odbiorca potrafił z tego dokumentu skorzystać. Dlatego przy ocenie wyniku warto wrócić do prostych pytań:
Skill daje agentowi sposób pracy i narzędzia kontroli. Wynik nadal zależy od modelu, treści i dostępnych możliwości sprawdzania. Czasem potrzebna będzie poprawka. Przy dokumencie, który trafia do klienta albo uczestników szkolenia, warto poświęcić chwilę na własną ocenę.
11
Najprostsza próba to wziąć jedną instrukcję, poradnik albo fragment szkolenia i przygotować z niego HTML. Otwórz obie wersje i porównaj, jak się z nich korzysta. Sprawdź, czy łatwiej znaleźć etap, zrozumieć porównanie lub skopiować przykład.
Właśnie do takiej próby chcę cię zachęcić. Dzielę się narzędziem, którego używam do własnych artykułów i materiałów szkoleniowych, żebyś mógł sprawdzić ten sposób pracy u siebie. Zacznij od domyślnych kolorów. Kiedy zobaczysz, jak to działa, możesz dopasować wygląd do swoich potrzeb.
Pierwszy krok
Napisz kilka zdań o swojej firmie, sytuacji i tym, czego potrzebujesz. Odezwę się, porozmawiamy i wspólnie ustalimy, od czego najlepiej zacząć.
Jeśli chcesz od razu rozpocząć praktyczną pracę z AI, dobrym rozwiązaniem może być Dzień Startowy AI. Możemy też porozmawiać o szkoleniu, warsztacie, prelekcji lub indywidualnym wdrożeniu.
Pierwsza rozmowa służy przede wszystkim temu, żeby dobrze określić potrzeby i sprawdzić, jaka forma współpracy ma w twojej sytuacji największy sens.