AI UI Designer Logo
AI UI Designer

Najpierw uzgodnij ekran, potem pisz kod

Darmowy skill do projektowania UI w Codex i Claude Code

Uporządkuj wymagania w statycznej makiecie SVG. Sprawdź pola, hierarchię i główne działanie, a następnie dopracuj wygląd z asystentem programowania. Nie musisz kupować pakietu scenariuszy.

Pobieranie bez logowania. Wynik to statyczny SVG; dostęp do asystenta i modeli rozliczany jest osobno.

Od wymagań do czytelnego układu

Najpierw rozmieść treść i elementy sterujące, potem dobierz typografię i kolory.

Makieta SVG z polami produktu, rozmiarami, przyciskiem i czterema kartami wyników
02 Sprawdź makietę
Kolorowy projekt SVG tego samego narzędzia z fioletowymi kontrolkami i plakatami butelek
03 Dopracuj wygląd UI

Ta sama struktura w makiecie i projekcie

Przykład narzędzia do plakatów produktowych pokazuje bezpłatny proces. Oba SVG zachowują pola, wybór rozmiaru i wyniki. Możesz je otworzyć bez płatnego pakietu.

01 Opisz zadanie

Użyj skilla ai-ui-designer.
Zaprojektuj narzędzie do plakatów produktowych: nazwa produktu, atuty, wybór rozmiaru, przycisk generowania i siatka wyników.

Wskaż cel strony i potrzebne elementy.

02 Sprawdź makietę

Makieta SVG z polami produktu, rozmiarami, przyciskiem i czterema kartami wyników
Oceń kolejność pól, widoczność głównej akcji i miejsce na wyniki.
Otwórz SVG

03 Dopracuj wygląd UI

Kolorowy projekt SVG tego samego narzędzia z fioletowymi kontrolkami i plakatami butelek
Zachowaj uzgodniony układ, poprawiając litery, odstępy i kolory.
Otwórz SVG

Zainstaluj skill i przygotuj pierwszą makietę

Pobierz i rozpakuj ZIP. Umieść folder ai-ui-designer w katalogu skills swojego środowiska Codex lub Claude Code.

  1. 1.Umieść pliki w katalogu

    SKILL.md musi znajdować się bezpośrednio w ai-ui-designer. Pobierasz instrukcje projektowe, materiały referencyjne i skrypty pomocnicze.

    Codex
    ~/.agents/skills/ai-ui-designer/
    Claude Code
    ~/.claude/skills/ai-ui-designer/

    Sprawdź, czy rozpakowanie nie dodało kolejnego poziomu folderów.

  2. 2.Określ odbiorców i cel

    Wywołaj skill w asystencie i opisz zawartość oraz główne działanie strony.

    Codex: $ai-ui-designer
Claude Code: /ai-ui-designer

Zaprojektuj makietę SVG strony głównej produktu z propozycją wartości, funkcjami i rejestracją.

  3. 3.Otwórz SVG i zgłoś poprawki

    Użyj przeglądarki lub czytnika SVG. Poproś o konkretną zmianę, np. wyraźniejsze nagłówki albo większy odstęp przy przycisku.

    Brak skilla? Sprawdź ścieżkę i SKILL.md. Codex wykrywa zmiany automatycznie; w razie potrzeby uruchom go ponownie. W Claude Code zajrzyj do menu /.

Potrzebujesz własnego asystenta i dostępu do modeli. Lokalne skrypty pakietów wymagają Python 3.9 lub nowszego. Pobieranie opcjonalnych pakietów z tej witryny wymaga aktywnej płatnej subskrypcji.

Podejmuj decyzje projektowe etapami

Uporządkuj informacje

Rozmieść bloki, pola formularza i działania w makiecie w skali szarości.

Dopracuj warstwę wizualną

Dobierz typografię, odstępy, kolory i grafiki na zatwierdzonej strukturze.

Rozwijaj ten sam projekt

Zachowaj SVG w projekcie i zlecaj konkretne zmiany w miarę doprecyzowania wymagań.

Co obejmuje darmowe pobranie?

Praca na własnych wymaganiach

Skill obejmuje makiety, kolorowe projekty UI, stosowanie motywów i lokalne zarządzanie pakietami.

Pakiety scenariuszy to opcjonalne materiały referencyjne. Nie są wymagane do rozpoczęcia.

Statyczny projekt do oceny

Wynikiem są pliki SVG i wskazówki projektowe. Narysowane przyciski nie realizują logowania, płatności ani generowania obrazów.

Aplikacja wymaga osobnego wdrożenia. Dostępność asystenta i opłaty za modele zależą od warunków danego narzędzia.

Pytania przed instalacją

Czy potrzebuję subskrypcji lub pakietu?
Skill pobierzesz bezpłatnie i możesz projektować na podstawie własnych wymagań. Tylko pobieranie opcjonalnych pakietów z tej witryny wymaga aktywnej płatnej subskrypcji.
Jak wywołać skill w obu narzędziach?
Po instalacji we właściwym katalogu użyj $ai-ui-designer w Codex lub /ai-ui-designer w Claude Code i opisz zadanie.
Czy powstanie działająca aplikacja?
Ten proces tworzy statyczne makiety i projekty UI w SVG. Kod, backend i rzeczywiste interakcje wymagają osobnej implementacji.
Dlaczego skill się nie wyświetla?
Sprawdź katalog i plik SKILL.md bezpośrednio w ai-ui-designer. W razie potrzeby uruchom Codex ponownie; w Claude Code znajdź /ai-ui-designer.

Nadaj kolejnej stronie czytelną strukturę

Zainstaluj darmowy skill do projektowania UI i zamień wymagania w układ SVG, który sprawdzisz i dopracujesz przed wdrożeniem.

Pobierz darmowy skillWróć do instalacji