Jak nauczyć agentów AI projektowania bez szablonów i tworzenia prezentacji wideo

Każdy, kto prosił Claude lub Cursor o zbudowanie strony docelowej, zna ten rezultat. Wygenerowany kod działa technicznie, ale wizualnie wygląda jak typowa strona z 2018 roku z niebieskimi przyciskami i zaokrąglonymi kartami. Modele znają składnię CSS i React, ale nie mają wbudowanego wyczucia designu i zrozumienia struktury projektu.

Repozytorium garden-skills chińskiego developera ConardLi rozwiązuje ten problem poprzez format Agent Skills. To zestaw modułów zgodnych ze specyfikacją SKILL.md, które przekształcają Claude Code, Cursor, Codex i innych agentów terminalowych w wyspecjalizowanych inżynierów.

Czym są Agent Skills i jak działają

Anthropic niedawno zaproponował otwarty standard rozszerzania możliwości agentów. Zasadniczo skill to osobny folder w projekcie lub katalogu domowym zawierający manifest SKILL.md z nagłówkiem YAML, instrukcjami tekstowymi, gotowymi skryptami i przewodnikami referencyjnymi.

Agent skanuje pole description w manifeście. Gdy zadanie użytkownika odpowiada opisowi, model ładuje odpowiedni kontekst bezpośrednio podczas rozmowy. Eliminuje to potrzebę kopiowania długich promptów systemowych do każdej rozmowy.

Repozytorium garden-skills zawiera pięć gotowych modułów do rzeczywistych zadań roboczych.

Gotowe umiejętności w repozytorium

Każdy skill jest dostosowany do konkretnego scenariusza i zawiera ścisłe reguły interakcji, aby zapobiec halucynacjom agenta lub pomijaniu zatwierdzeń etapów.

1. web-design-engineer

Moduł koncentruje się na układzie stron, dashboardów, prototypów i komponentów interaktywnych. Zamiast ogólnych szablonów używa bazy 25 gotowych stylów wizualnych. Obejmują one estetykę Linear, terminal Bloomberg, styl szwajcarski, neumorfizm, retro-futuryzm i minimalizm inspirowany kenijskim projektantem Kenyą Harą (Muji).

Umiejętność wymusza na modelu pracę w pięciu parametrach: gęstość elementów, dynamika animacji, zależność zasobów, zgodność z marką i zmienność. Agent najpierw waliduje koncepcję i paletę w oklch(), następnie buduje wczesny prototyp v0, a dopiero po zatwierdzeniu pisze końcowy kod React.

2. web-video-presentation

Ta umiejętność pobiera tekst źródłowy, artykuł techniczny lub notatki z lekcji i tworzy interaktywną prezentację internetową w stałej rozdzielczości 1920×1080 przy użyciu stosu Vite, React i TypeScript.

Prezentacja jest kontrolowana za pomocą kroków i kliknięć klawiatury, więc każde semantyczne podkreślenie jest synchronizowane z wizualnym krokiem na ekranie. Elementy interfejsu ukrywają się przy najechaniu kursorem, co pozwala nagrywać czysty ekran do wideo.

Moduł obsługuje 23 wbudowane motywy i integruje się z generowaniem głosu przez MiniMax CLI, OpenAI TTS, ElevenLabs lub narzędzie systemowe macOS say.

3. beautiful-article

Narzędzie konwertuje surowe dane (linki, PDF-y, DOCX, notatki lub zrzuty czatów) na czytelny układ artykułu. Umiejętność opiera się na bibliotece komponentów Reacticle i 11 profilach projektantów (Tufte, Bodoni, Vignelli, Knuth).

Moduł oferuje 10 formatów publikacji, od szczegółowych samouczków z zachowaniem 90% oryginalnego tekstu po interaktywne wyjaśniacze z głęboką przeróbką treści. Podczas składania agent koniecznie robi przerwy na potwierdzenie tematu, struktury i strategii ilustracji.

4. gpt-image-2 i kb-retriever

Dwie inne umiejętności obejmują węższe zadania:

• gpt-image-2 zawiera 79 ustrukturyzowanych szablonów promptów do generowania diagramów, schematów architektonicznych, banerów i makiet interfejsu przez API kompatybilne z OpenAI. Może działać w trybie generowania kodu lub po prostu jako doradca do komponowania promptów.
• kb-retriever organizuje wyszukiwanie lokalne w ustrukturyzowanym folderze z dokumentami, PDF-ami i tabelami Excel. Zamiast przekazywać agentowi całe duże pliki i zapychać okno kontekstowe, umiejętność odczytuje indeksy drzewa data_structure.md, używa narzędzi takich jak grep lub pdftotext i znajduje precyzyjne fragmenty w maksymalnie 5 iteracjach.

Sposoby instalacji w projekcie

Najszybszym sposobem dodania umiejętności do środowiska pracy jest użycie menedżera pakietów npx skills. Narzędzie automatycznie wykrywa, który asystent AI jest uruchomiony w katalogu i umieszcza pliki w odpowiednim folderze.

Instalacja wszystkich modułów na raz:

npx skills add ConardLi/garden-skills

Instalacja konkretnej umiejętności do konfiguracji globalnej:

npx skills add ConardLi/garden-skills -s web-design-engineer --global

Jeśli używasz Claude Code, możesz połączyć wtyczki bezpośrednio przez wbudowany marketplace:

/plugin marketplace add ConardLi/garden-skills
/plugin install web-design-skills@garden-skills

W przypadku stałych wersji w CI/CD lub projektów z rygorystycznymi wymaganiami dotyczącymi zależności w wydaniach, repozytorium udostępnia podpisane archiwa .zip z sumami kontrolnymi SHA-256. Wystarczy rozpakować archiwum do .claude/skills/ lub .agents/skills/.

Kompatybilność z agentami

Format jest otwarty, więc umiejętności działają nie tylko w ekosystemie Anthropic. Projekt został przetestowany z następującymi narzędziami:

• Claude Code i interfejs internetowy Claude.ai (przez sekcję Capabilities)
• Cursor (folder .agents/skills/<name>/)
• Codex CLI
• Gemini CLI
• OpenCode

Kto znajdzie ten projekt przydatny

Kolekcja ConardLi oszczędza czas tym, którzy codziennie używają agentów AI w terminalu lub edytorze kodu. Zamiast ręcznie konfigurować kontekst i poprawiać dziecinne błędy układu, otrzymujesz przewidywalny potok z punktami kontrolnymi i jakościowymi tokenami designu.

Najłatwiejszym sposobem na rozpoczęcie jest web-design-engineer lub beautiful-article. Dają widoczne rezultaty już przy pierwszym żądaniu i pokazują, jak prawidłowo komponować własne instrukcje dla specyfikacji SKILL.md.