Jak zbudować i opublikować witrynę internetową za pomocą Paperclip Agents12 min read

Paperclip koordynuje zespół zajmujący się witryną AI; nie jest to publiczny host witryny. Użyj go, aby rozbić brief, przypisać odpowiedzialne prace, zebrać dowody kontroli jakości i zatwierdzić trasę. Następnie wdróż sprawdzony kod za pośrednictwem dostawcy hostingu lub jawnie opublikuj odpowiedni artefakt aplikacji za pomocą AgentGrid.io. Zadanie przeniesione do stanu Gotowe nie jest wdrożeniem publicznym.

Rozważ trzystronicową witrynę wprowadzającą produkt ze stroną główną, stroną z funkcjami i drogą kontaktową. Projektant, programista, agent ds. kontroli jakości i recenzent marketingowy mogą pracować równolegle tylko wtedy, gdy mają wspólne kryteria akceptacji i wiedzą, która wersja jest sprawdzana. W tym przewodniku pokazano, jak zorganizować to przekazanie, nie traktując orkiestracji agentów jak magicznego narzędzia do tworzenia witryn jednym kliknięciem.

Jak opublikować stronę internetową za pomocą Paperclip i AgentGrid.io

Spinacz może organizować pracę agenta jako zadania i śledzić wyniki jako artefakty. AgentGrid.io może być oddzielnym miejscem, w którym sprawdzana jest powstała strona internetowa lub dokument i, jeśli została zatwierdzona, publikowana. Nie zwijaj tych ról: zadanie Spinacz lub jego rekord artefaktu nie jest automatycznie artefaktem AgentGrid i tych produktów nie należy opisywać jako mających natywne połączenie bez zweryfikowanej integracji.

1. Najpierw utwórz docelowy obszar roboczy

W AgentGrid utwórz lub wybierz obszar roboczy dla zespołu, który będzie przeglądał wyniki. Zanim kogokolwiek zaprosisz, sprawdź członkostwo w zespole. Możesz utrzymać agenta Paperclip na jego istniejącej ścieżce wykonania i pozwolić innej osobie przenieść produkt. Zaproszenie agenta AgentGrid jest opcjonalną trasą dla kompatybilnego, celowo skonfigurowanego asystenta, a nie dowodem na to, że lista agentów lub łańcuch zatwierdzeń Paperclip pojawi się w AgentGrid. Jeśli zaprosisz agenta, skorzystaj z instrukcji zaproszenia AgentGrid i odznacz niepotrzebne możliwości udostępniania i publikowania przed wysłaniem jednorazowego łącza.

W Paperclip podaj przydziałowi krótki opis akceptacji: koncepcja strony docelowej, wymagane sekcje, linki źródłowe do twierdzeń opartych na faktach oraz wyznaczony weryfikator. Zachowaj status wewnętrzny zadania odrębny od pozwolenia na publikację. Zadanie oznaczone jako ukończone oznacza, że ​​żądana praca została dostarczona do wglądu, a nie, że zatwierdzono publiczne udostępnienie.

2. Prześlij rzeczywisty wynik

Kiedy agent skończy, sprawdź pliki lub pisemne artefakty, które stworzył. W przypadku małej witryny spakuj odpowiednie pliki w formacie ZIP i użyj funkcji importu ZIP AgentGrid. W przypadku raportu tekstowego zaimportuj obsługiwany dokument lub utwórz nowy dokument. Nazwij go, aby recenzenci mogli połączyć go z zadaniem Spinacz i dołącz krótką notatkę na temat tego, co jest gotowe, co tymczasowe i gdzie znajdują się materiały źródłowe. Zamiast zakładać, że pliki są renderowane dokładnie tak, jak w środowisku agenta, sprawdź podgląd AgentGrid.

3. Oddziel przegląd zadań od przeglądu wersji

Użyj spinacza, aby śledzić zadanie i jego status. Poproś zainteresowanego o sprawdzenie samego artefaktu AgentGrid i pozostawienie komentarzy na temat treści, łączy, dostępności i wszelkich roszczeń skierowanych na zewnątrz. AgentGrid obsługuje komentarze do artefaktów, więc przydatne opinie mogą odnosić się do rzeczy, która zostanie opublikowana. Dołącz poprawki i sprawdź nowy podgląd. Jeśli zakres zadania ulegnie zmianie, zaktualizuj także przypisanie Spinacza, ale nie traktuj zatwierdzenia w żadnym narzędziu jako magicznej synchronizacji z drugim.

4. Opublikuj sprawdzoną wersję

Dopiero gdy właściciel-człowiek zatwierdzi publiczne udostępnienie, użyj procesu publikowania AgentGrid. Otwórz wynikową stronę jako gość i porównaj ją z zatwierdzonym artefaktem. AgentGrid odróżnia edytowalny artefakt obszaru roboczego od wdrożenia publicznego; późniejsze zmiany wymagają kolejnej akcji publikowania. Zapisz publiczny adres URL z powrotem w zadaniu Paperclip jako notatkę o przekazaniu, jeśli Twój proces tego wymaga, bez konieczności korzystania z automatycznej integracji lub ukrytego mostu zatwierdzającego.

Daj zespołowi cel dotyczący witryny, a nie niejasne instrukcje

Zacznij od wąskich wytycznych: odbiorcy, cel konwersji, wymagane strony, odniesienia wizualne, właściciel treści, oczekiwania dotyczące dostępności oraz domena lub miejsce docelowe hostingu. W przypadku pierwszej wersji określ responsywne układy, metadane, roboczą trasę kontaktu i elementy wykraczające poza zakres.

W Paperclip utwórz projekt i cel, a następnie podziel pracę na własne zadania. Jego model zadań obsługuje jednego odpowiedzialnego właściciela, blokując relacje, wątki i etapy przeglądu. Przypisz stratega lub agenta PM do planowania, projektanta do opracowania kierunku wizualnego, agenta kodującego do wdrożenia, agenta ds. kontroli jakości do przetestowania i człowieka do zatwierdzenia uruchomienia. Są to role, które konfigurujesz, a nie gotowy kreator witryn internetowych. Spinacz jest własnością przykład zespołu witryny internetowej pokazuje strony funkcji, kontrolę jakości zablokowaną przez implementację oraz wersję zapoznawczą w trakcie przeglądu.

Monit planowania: „Zaplanuj trzystronicową witrynę internetową dla [odbiorców], która pomoże odwiedzającym [cel]. Stwórz mapę witryny, kryteria akceptacji na poziomie strony, luki w treści, wymagania dotyczące obrazu i mapę zależności zadań. Nie wdrażaj niczego. Przypisz każdemu wynikowi właściciela i określ decyzje, które musi podjąć człowiek. „

Zdefiniuj umowę zwolnienia przed przypisaniem agentów

Ustaw odbiorców, konwersję podstawową, zatwierdzoną kopię, zasoby strony, zasoby wizualne, wymagane punkty przerwania, hosta docelowego i właściciela uruchomienia. W wersji pierwszej uwzględnij wyraźne cele inne niż cele, takie jak brak płatności lub utworzenie konta. Nadaj każdej stronie wymierne kryterium akceptacji: strona z opisem wyjaśnia ofertę, link kontaktowy prowadzi do roboczego celu, a każda trasa ma znaczący tytuł.

Zachowaj źródło, projekt i dowody razem

Daj konstruktorowi repozytorium lub udostępnioną lokalizację projektu. Projektant zapewnia specyfikację układu i zasoby; koder wdraża w oparciu o te same wytyczne. Komentarz do zadania powinien zawierać link do gałęzi, żądania ściągnięcia, podglądu i wyników testu. Spinacz może zbierać wyniki powiązane z zadaniami i przeglądać dowody, ale załącznik do zadania nie jest automatycznie aktywną witryną internetową ani kanonicznym repozytorium źródeł.

Ustaw granice przed udzieleniem dostępu. Jeśli agent może przekazać kod przez tożsamość GitHub w swojej powłoce, kontrolki Paperclip dla każdego narzędzia Ask First nie regulują tych poleceń powłoki Git. Ogranicz dostęp do repozytorium i wymagaj ochrony gałęzi oraz przeglądu PR na GitHub. W przypadku łącznika wdrożenia należy rozróżnić odczytywanie dzienników kompilacji od rozpoczynania wdrażania produkcyjnego. Wskazówki Netlify firmy Paperclip zalecają najpierw pytanie lub wyłączenie w przypadku zmian wdrożeniowych i konfiguracyjnych. Trzymaj dane uwierzytelniające poza źródłem witryny i przyznaj każdemu agentowi tylko taki dostęp, jakiego wymaga jego zadanie.

Monit o kompilację: „Zaimplementuj zatwierdzoną mapę witryny w [repozytorium]. Zachowaj uzgodniony projekt, spraw, aby nawigacja i formularze działały oraz dodaj metadane tytułu i opisu do każdej strony. Pracuj w gałęzi, przeprowadź kontrolę projektu, dołącz PR i adres URL podglądu do zadania Paperclip i zatrzymaj się przed jakimkolwiek wdrożeniem produkcyjnym. „

Oddziel status wydania, kontrolę źródła i publikację

Spinacz rejestruje, kto jest właścicielem każdego wydania i jakie dowody towarzyszą przekazaniu. W Twoim repozytorium nadal znajduje się implementacja, a wdrożona witryna internetowa jest obsługiwana przez dostawcę usług hostingowych. Połącz każde wydanie z konkretną gałęzią, PR, podglądem, dziennikiem testów i zrzutami ekranu. Jeśli zadanie odnosi się tylko do „najnowszego”, recenzenci mogą przypadkowo zatwierdzić podgląd, który nie pasuje do ostatecznie wdrożonej gałęzi.

Sprawdź bramę, a nie wiadomość „wygląda na gotową”

Poproś kontrolę jakości o otwarcie rzeczywistego podglądu na komputerze i urządzeniu mobilnym. Sprawdź obietnicę na pierwszym ekranie, nawigację za pomocą klawiatury, tekst alternatywny, uszkodzone linki, zachowanie formularza, ładowanie, błędy konsoli i metadane strony. Poproś dział marketingu o weryfikację oświadczeń dotyczących produktów i wezwania do działania. Rejestruj powtarzalne dowody. Jeśli formularz wymaga zaplecza, przetestuj przesyłanie od początku do końca.

Zasady wykonywania Paperclip mogą skierować problem do recenzenta, a następnie do osoby zatwierdzającej, gdy wykonawca spróbuje oznaczyć zadanie jako wykonane. Żądane zmiany wracają do pierwotnego modułu wykonującego. W przypadku publikacji publicznych użyj etapu zatwierdzania przez człowieka i określ, że zatwierdzenie zadania nie jest pozwoleniem na publikację, dopóki recenzent nie sprawdzi ostatecznego podglądu i domeny docelowej.

Monit kontroli jakości: „Przetestuj podgląd pod kątem kryteriów akceptacji w wąskiej rzutni mobilnej i na komputerze stacjonarnym. Zwróć tabelę zawierającą pozytywne i niepomyślne wyniki, adres URL dowodu lub zrzut ekranu oraz kroki odtwarzania. Nie zatwierdzaj ani nie wdrażaj; awarie odeślij do właściciela implementacji.”

Praktyczna lista kontrolna akceptacji do uruchomienia

• Produkt: porównaj obietnicę bohatera, zestawienia cen i miejsca docelowe wezwań do działania z zatwierdzonymi kopiami.
• Funkcja: kliknij nawigację, prześlij prośbę o kontakt testowy i sprawdź ścieżkę sukcesu lub niepowodzenia.
• Responsywny projekt: przejrzyj wąskie ekrany, pulpit, przepełnienie treści, przycinanie obrazu i czytelne odstępy.
• Dostępność: sprawdź kolejność klawiatur, etykiety, tekst alternatywny, nagłówki semantyczne i kontrast.
• Wyszukiwanie i niezawodność: potwierdź tytuły i opisy tras, uszkodzone linki, błędy konsoli i ładowanie zasobów produkcyjnych.

Wdróż zatwierdzoną kompilację pod rzeczywistym publicznym adresem URL

Wybierz miejsce docelowe produkcji przed ostatnią recenzją. W przypadku konwencjonalnej bazy kodu podłącz repozytorium do hosta, takiego jak Netlify lub Vercel, sprawdź jego ustawienia kompilacji i zmienne środowiskowe, a następnie pozwól hostowi najpierw wygenerować podgląd. Po zatwierdzeniu przez człowieka promuj lub wdrażaj sprawdzoną wersję, korzystając z udokumentowanego przepływu pracy tego hosta. Otwórz produkcyjny adres URL po wylogowaniu; testuj nawigację, formularze, certyfikat, domenę i wdrożoną wersję. Uruchomienie Paperclip na serwerze powoduje jedynie, że aplikacja do orkiestracji jest dostępna; nie publikuje strony internetowej.

Jeśli witryna internetowa jest odpowiednim artefaktem aplikacji HTML lub React, AgentGrid.io może być współdzielonym miejscem, w którym ludzie i podłączeni agenci edytują tę samą wersję. Zaimportuj folder projektu lub plik ZIP albo poproś połączonego agenta o utworzenie artefaktu w zamierzonym obszarze roboczym. Przejrzyj tam renderowaną aplikację i historię. Łącze do artefaktu jest prywatne dla osób mających dostęp do obszaru roboczego; publikowanie to osobna, wyraźna akcja, która tworzy publiczny adres URL. Połączony agent potrzebuje możliwości publikowania i żądania użytkownika, aby opublikować. Późniejsze zmiany pozostają poza stroną publiczną do czasu ponownej publikacji. Domeny niestandardowe wymagają kwalifikującego się płatnego planu i zweryfikowanego DNS. Jest to alternatywna droga publikowania, a nie twierdzenie, że Paperclip automatycznie integruje się z AgentGrid.io.

Uruchom monit: „Wersja zatwierdzona przez człowieka to [wersja zatwierdzenia lub artefaktu. Wdróż ją na [określonym hoście] lub opublikuj [określony artefakt AgentGrid.io] dopiero po wyraźnej autoryzacji. Zwróć publiczny adres URL, wdrożoną wersję, wynik kompilacji i listę kontrolną testu dymnego. Jeśli brakuje celu lub pozwolenia, zatrzymaj się i zapytaj. „

Promocja powinna dotyczyć konkretnej wersji

Przed wydaniem zapisz zatwierdzoną wersję zatwierdzenia lub artefaktu, docelowy host lub obszar roboczy, domenę i osobę, która może zainicjować publikację. Jeśli host generuje adresy URL podglądu, sprawdź ostateczny podgląd tej samej wersji przed jej promowaniem. Następnie otwórz publiczny adres URL bez uprzywilejowanej sesji i powtórz krytyczne testy dymu. Zapisz odwołanie do wycofania na wypadek, gdyby trasa kontaktu lub zasoby uległy awarii w ramach ustawień produkcyjnych.

Kiedy zespół powinien używać poszczególnych warstw?

Spinacz: wybierz ją, gdy kilku agentów potrzebuje przypisanych problemów, zależności, przeglądów i odpowiedzialnego właściciela uruchamiającego. Mówi zespołowi, co ma robić i śledzi pracę, zamiast zastępować kontrolę źródła lub hosta internetowego.

Repozytorium i host: wybierz tę ścieżkę, jeśli witryna potrzebuje istniejącego procesu wydania wersji inżynieryjnych, funkcji serwera, ustawień infrastruktury lub ustalonych kontroli wycofywania zmian. Sprawdzony rekord zatwierdzenia i wdrożenia powinien identyfikować wersję aktywną.

Kontynuuj od zatwierdzonej wersji

Spinacz zawiera zadania i recenzje. Twoje repozytorium i host – własne konwencjonalne wdrożenie produkcyjne. AgentGrid.io może przechowywać współdzielony, wersjonowany artefakt i jego celową publikację. Porównanie innego przepływu pracy między agentem a lokacją można znaleźć w naszym artykule Grok Przewodnik publikowania botów; Aby zapoznać się z problemem przekazywania związanym ze współdzielonymi artefaktami, przeczytaj nasze wprowadzenie do AgentGrid.io; a jeśli chodzi o ścieżkę polegającą na projektowaniu, zobacz publikowanie strony internetowej Claude Design.

Chcesz przechowywać zatwierdzoną witrynę w jednym miejscu? Utwórz artefakt AgentGrid.io, zaproś następnego współpracownika z odpowiednimi uprawnieniami i publikuj dopiero po sprawdzeniu wersji publicznej.