agentic

Ako vytvoriť a publikovať webovú stránku pomocou Paperclip Agents13 min read

Reading Time: 7 minutesKoordinujte tím webovej stránky v aplikácii Paperclip, od úloh s rozsahom a dôkazov kvality až po schválenie človekom. Zverejnite recenzovanú zostavu s hostiteľom alebo samostatným artefaktom AgentGrid.io.

Paperclip publishing a website cover

Ako vytvoriť a publikovať webovú stránku pomocou Paperclip Agents13 min read

Reading Time: 7 minutes

Kancelárske sponky koordinuje tím webových stránok AI; nie je to verejný hostiteľ webovej stránky. Použite ho na rozčlenenie zadania, pridelenie zodpovednej práce, zhromaždenie dôkazov o kontrole kvality a schválenie trasy. Potom nasaďte skontrolovaný kód prostredníctvom poskytovateľa hostingu alebo explicitne zverejnite vhodný artefakt aplikácie prostredníctvom AgentGrid.io. Úloha presunutá na Hotovo nie je verejné nasadenie.

Zvážte trojstranovú stránku uvedenia produktu na trh s domovskou stránkou, stránkou funkcií a kontaktnou cestou. Dizajnér, kódovač, agent kontroly kvality a marketingový recenzent môžu pracovať paralelne iba vtedy, keď zdieľajú kritériá prijatia a vedia, ktorá revízia sa kontroluje. Táto príručka ukazuje, ako štruktúrovať toto odovzdanie bez toho, aby sa orchestrácia agentov považovala za magický tvorca stránok na jedno kliknutie.

Ako publikovať webovú stránku pomocou Paperclip a AgentGrid.io

Paperclip môže organizovať prácu agenta ako úlohy a sledovať výstupy ako artefakty. AgentGrid.io môže byť samostatným miestom, kde sa skontroluje výsledná webová stránka alebo dokument a v prípade schválenia sa publikuje. Tieto roly nezbaľujte: úloha Paperclip alebo jej záznam artefaktu nie je automaticky artefaktom AgentGrid a tieto produkty by sa nemali označovať ako produkty s natívnym pripojením bez overenej integrácie.

1. Najprv vytvorte cieľový pracovný priestor

V AgentGrid vytvorte alebo vyberte pracovný priestor pre tím, ktorý bude kontrolovať výstup. Pred pozvaním niekoho skontrolujte členstvo v tíme. Agenta Paperclip môžete ponechať na jeho existujúcej realizačnej ceste a nechať osobu, aby odovzdala dodávku. Pozvanie agenta AgentGrid je voliteľnou cestou pre kompatibilného, ​​zámerne nakonfigurovaného asistenta, nie dôkazom toho, že zoznam agentov alebo reťazec schvaľovania Paperclip sa objaví v AgentGrid. Ak pozvete agenta, použite pokyny na pozvanie AgentGrid a pred odoslaním jednorazového odkazu zrušte začiarknutie nepotrebných možností zdieľania a publikovania.

Pracovný priestor AgentGrid.io so zvýraznenou možnosťou Pozvať agenta
V pracovnom priestore AgentGrid.io, Pozvanie agenta spustí podporované pripojenie.

V aplikácii Paperclip poskytnite zadanie stručné akceptovanie: koncept vstupnej stránky, požadované sekcie, zdrojové odkazy pre faktické tvrdenia a menovaného ľudského recenzenta. Udržujte interný stav úlohy oddelený od povolenia na zverejnenie. Úloha označená ako dokončená znamená, že požadovaná práca bola odovzdaná na kontrolu, nie že verejné uvoľnenie je povolené.

2. Preneste skutočný výstup

Keď agent skončí, skontrolujte súbory alebo písomný artefakt, ktorý vytvoril. V prípade malej lokality zabaľte príslušné súbory do súboru ZIP a použite import ZIP AgentGrid. V prípade textovej zostavy importujte podporovaný dokument alebo vytvorte nový dokument. Pomenujte ho tak, aby ho recenzenti mohli pripojiť k zadaniu Paperclip, a uveďte krátku poznámku o tom, čo je pripravené, čo je dočasné a kde sa nachádzajú zdrojové materiály. Overte si náhľad AgentGrid namiesto toho, aby ste predpokladali, že súbory sa vykreslia presne tak, ako sa vykreslili v prostredí agenta.

Artefakt demo webovej stránky White Lotus v AgentGrid.io
Príklad artefaktu webovej stránky v AgentGrid.io: Demo White Lotus je súkromné, kým sa kontroluje jeho verzia.

3. Oddeľte kontrolu úlohy od kontroly vydania

Pomocou kancelárskej sponky môžete sledovať úlohu a jej stav. Požiadajte zainteresovanú stranu, aby skontrolovala samotný artefakt AgentGrid a zanechala komentáre k obsahu, odkazom, dostupnosti a akýmkoľvek externým tvrdeniam. AgentGrid podporuje komentáre k artefaktom, takže spätná väzba, ktorú možno vykonať, môže odkazovať na vec, ktorá by bola zverejnená. Zahrňte revízie a skontrolujte nový náhľad. Ak sa zmení rozsah úlohy, aktualizujte aj priradenie sponky, ale nepovažujte schválenie v žiadnom z nástrojov za magickú synchronizáciu s druhým.

4. Zverejnite skontrolovanú verziu

Postup publikovania AgentGrid použite až potom, čo ľudský vlastník povolí verejné vydanie. Otvorte výslednú stránku ako návštevník a porovnajte ju so schváleným artefaktom. AgentGrid odlišuje artefakt upraviteľného pracovného priestoru od verejného nasadenia; následné zmeny vyžadujú ďalšiu akciu zverejnenia. Zaznamenajte si verejnú adresu URL späť do úlohy Paperclip ako poznámku na odovzdanie, ak si to váš proces vyžaduje, bez nároku na automatizovanú integráciu alebo skrytý most schvaľovania.

Aktualizovaná ponuka zdieľania AgentGrid.io zobrazujúca možnosť Publikovať
Aktualizovaná ponuka Zdieľať obsahuje možnosť Publikovať, ktorá premení schválený artefakt na živú webovú stránku.

Dajte tímu cieľ webovej stránky, nie vágne pokyny

Začnite s úzkym zadaním: publikum, cieľ konverzie, požadované stránky, vizuálne referencie, vlastník obsahu, očakávania dostupnosti a doména alebo cieľ hostiteľa. Pre prvé vydanie špecifikujte responzívne rozloženia, metaúdaje, trasu pracovného kontaktu a čo je mimo rozsahu.

V aplikácii Paperclip vytvorte projekt a cieľ a potom rozdeľte prácu na vlastné úlohy. Jeho model úloh podporuje jedného zodpovedného vlastníka, ktorý blokuje vzťahy, vlákna a fázy kontroly. Priraďte stratéga alebo PM agenta na plánovanie, dizajnéra na vytvorenie vizuálneho smeru, kódovacieho agenta na implementáciu, QA agenta na testovanie a človeka na schválenie spustenia. Ide o roly, ktoré konfigurujete, nie o vopred zabalený tvorca webových stránok. Vlastná kancelárska sponka príklad webového tímu zobrazuje stránky funkcií, kontrolu kvality zablokovanú implementáciou a ukážku nasadenia, ktorá prechádza kontrolou.

Výzva na plánovanie: „Naplánujte trojstránkovú webovú lokalitu pre [publikum], ktorá pomôže návštevníkom [cieľ]. Vytvorte mapu webu, akceptačné kritériá na úrovni stránky, obsahové medzery, požiadavky na obrázky a mapu závislosti úloh. Nič nenasadzujte. Každému produktu priraďte vlastníka a identifikujte rozhodnutia, ktoré musí človek urobiť.“

Pred pridelením agentov definujte zmluvu o uvoľnení

Nastavte publikum, primárnu konverziu, schválenú kópiu, inventár stránky, vizuálne prvky, požadované body prerušenia, cieľového hostiteľa a vlastníka spustenia. V prvej verzii zahrňte explicitné neciele, ako napríklad žiadne platby alebo vytvorenie účtu. Dajte každej stránke merateľné kritérium prijatia: stránka funkcie vysvetľuje ponuku, kontaktný odkaz sa dostane do pracovného cieľa a každá trasa má zmysluplný názov.

Udržujte zdroj, dizajn a dôkazy spolu

Poskytnite staviteľovi úložisko alebo zdieľané umiestnenie projektu. Návrhár poskytuje špecifikáciu rozloženia a aktíva; kódovač implementuje proti rovnakému príkazu. Komentár úlohy by mal odkazovať na vetvu, požiadavku na stiahnutie, ukážku a výsledky testov. Paperclip môže zhromažďovať výstupy súvisiace s úlohami a kontrolovať dôkazy, ale príloha úlohy nie je automaticky aktívnou webovou stránkou alebo kanonickým zdrojovým úložiskom.

Pred udelením prístupu nastavte hranice. Ak agent dokáže pretlačiť kód cez identitu GitHub vo svojom shelle, ovládacie prvky Ask first pre každý nástroj Paperclip neriadia tieto príkazy shellu Git. Obmedzte prístup k úložisku a požadujte ochranu pobočky a kontrolu PR na GitHub. V prípade konektora nasadenia rozlišujte čítanie denníkov zostavy od spustenia produkčného nasadenia; Pokyny pre Netlify od Paperclip odporúčajú pri nasadzovaní a zmenách konfigurácie sa najskôr opýtať alebo vypnúť. Uchovávajte prihlasovacie údaje mimo zdroja webovej lokality a poskytnite každému agentovi iba prístup, ktorý jeho úloha vyžaduje.

Výzva na zostavenie: „Implementujte schválenú mapu webu v [úložisku]. Zachovajte dohodnutý dizajn, zaistite funkčnosť navigácie a formulárov a pridajte metadáta názvu a popisu na každú stránku. Pracujte na pobočke, spustite kontroly projektu, pripojte PR a URL ukážky k úlohe Paperclip a zastavte sa pred akýmkoľvek produkčným nasadením.“

Samostatný stav problému, ovládanie zdroja a publikovanie

Kancelárske sponky zaznamenávajú, kto je vlastníkom každého vydania a aké dôkazy sprevádzajú odovzdanie. Váš archív stále obsahuje implementáciu a poskytovateľ hostingu prevádzkuje nasadenú webovú stránku. Prepojte každý problém s presnou pobočkou, PR, náhľadom, testovacím protokolom a snímkami obrazovky. Ak úloha odkazuje iba na „najnovšiu“, recenzenti môžu náhodne schváliť ukážku, ktorá sa nezhoduje s nakoniec nasadenou vetvou.

Urobte z kontroly bránu, nie správu „vyzerá to hotové“

Požiadajte QA o otvorenie aktuálnej ukážky na počítači a mobilnom zariadení. Skontrolujte prísľub na prvej obrazovke, navigáciu pomocou klávesnice, alternatívny text, nefunkčné odkazy, správanie formulára, načítanie, chyby konzoly a metadáta stránky. Nechajte marketing overiť tvrdenia o produkte a výzvu na akciu. Zaznamenajte reprodukovateľné dôkazy. Ak formulár potrebuje backend, otestujte odoslanie od konca po koniec.

Politika vykonávania Paperclip môže smerovať problém k recenzentovi a potom k schvaľovateľovi, keď sa jeho vykonávateľ pokúsi označiť úlohu ako vykonanú. Požadované zmeny sa vrátia pôvodnému vykonávateľovi. Na verejné vydanie použite štádium schválenia človekom a uveďte, že schválenie úlohy nie je povolením na publikovanie, kým recenzent neskontroluje konečnú ukážku a cieľovú doménu.

Výzva QA: „Otestujte ukážku v porovnaní s kritériami prijatia na úzkom mobilnom zobrazovacom poli a počítači. Vráťte tabuľku o úspešnosti, neúspešnosti, dôkazovú webovú adresu alebo snímku obrazovky a kroky reprodukcie. Neschvaľujte ani nenasadzujte, pošlite zlyhania späť vlastníkovi implementácie.“

Praktický akceptačný kontrolný zoznam pre spustenie

  • Produkt: porovnajte prísľub hrdinu, cenové vyhlásenia a destinácie s výzvou na akciu so schválenou kópiou.
  • Funkcia: kliknite na navigáciu, odošlite žiadosť o testovanie kontaktu a skontrolujte cestu úspechu alebo zlyhania.
  • Responzívny dizajn: kontrolovať úzke obrazovky, pracovnú plochu, pretečenie obsahu, orezávanie obrázkov a čitateľné medzery.
  • Prístupnosť: skontrolujte poradie klávesnice, štítky, alternatívny text, sémantické nadpisy a kontrast.
  • Vyhľadávanie a spoľahlivosť: potvrdiť názvy a popisy špecifické pre trasu, nefunkčné odkazy, chyby konzoly a načítanie produkčných prostriedkov.

Nasaďte schválenú zostavu na skutočnú verejnú adresu URL

Pred poslednou recenziou vyberte miesto výroby. Pre konvenčnú kódovú základňu pripojte úložisko k hostiteľovi, ako je Netlify alebo Vercel, skontrolujte jeho nastavenia zostavy a premenné prostredia a nechajte hostiteľa, aby najskôr vytvoril ukážku. Po schválení človekom povýšte alebo nasaďte recenzovanú revíziu pomocou zdokumentovaného pracovného postupu daného hostiteľa. Pri odhlásení otvorte produkčnú adresu URL; testovať navigáciu, formuláre, certifikát, doménu a nasadenú revíziu. Spustenie Paperclip na serveri sprístupní iba aplikáciu orchestrácie; webovú stránku nezverejňuje.

Ak je webová lokalita vhodným artefaktom aplikácie HTML alebo React, AgentGrid.io môže byť zdieľaným miestom, kde ľudia a pripojení agenti upravujú rovnakú verziu. Importujte priečinok projektu alebo ZIP alebo požiadajte pripojeného agenta, aby vytvoril artefakt v zamýšľanom pracovnom priestore. Skontrolujte tam vykreslenú aplikáciu a históriu. Odkaz na artefakt je súkromný pre ľudí s prístupom k pracovnému priestoru; publikovanie je samostatná, explicitná akcia, ktorá vytvára verejnú adresu URL. Pripojený agent potrebuje schopnosť zverejňovania a ľudskú požiadavku na zverejnenie. Neskoršie úpravy zostanú mimo verejnej stránky až do opätovného zverejnenia. Vlastné domény vyžadujú vhodný platený plán a overený DNS. Toto je alternatívna cesta publikovania, nie tvrdenie, že Paperclip sa automaticky integruje so AgentGrid.io.

Výzva na spustenie: „Revízia schválená človekom je [verzia potvrdenia alebo artefaktu]. Nasaďte ju na [špecifikovaného hostiteľa] alebo zverejnite [špecifikovaný artefakt AgentGrid.io] až po výslovnej autorizácii. Vráťte verejnú webovú adresu, nasadenú revíziu, výsledok zostavenia a kontrolný zoznam dymového testu. Ak cieľ alebo povolenie chýba, zastavte a opýtajte sa.“

Propagácia by sa mala týkať konkrétnej revízie

Pred vydaním si zaznamenajte schválenú verziu odovzdania alebo artefaktu, cieľového hostiteľa alebo pracovný priestor, doménu a kto môže iniciovať zverejnenie. Ak hostiteľ generuje adresy URL ukážok, pred propagáciou skontrolujte konečnú ukážku tej istej revízie. Potom otvorte verejnú adresu URL bez privilegovanej relácie a zopakujte kritické testy dymu. Uložte si referenciu vrátenia pre prípad, že by sa trasa kontaktu alebo aktíva zlomili v rámci výrobných nastavení.

Kedy by mal tím použiť každú vrstvu?

kancelárska sponka: vyberte si ho, keď niekoľko agentov potrebuje priradené problémy, závislosti, recenzie a zodpovedného ľudského vlastníka spustenia. Hovorí tímu, čo má robiť, a sleduje prácu, namiesto toho, aby nahrádzal kontrolu zdroja alebo webového hostiteľa.

Úložisko a hostiteľ: vyberte túto cestu, keď lokalita potrebuje existujúci proces technického vydania, funkcie servera, nastavenia infraštruktúry alebo zavedené ovládacie prvky vrátenia. Skontrolovaný záznam potvrdenia a nasadenia by mal identifikovať aktuálnu verziu.

Pokračujte od schválenej verzie

Paperclip vlastní úlohy a recenzie. Vaše úložisko a hostiteľské vlastné konvenčné produkčné nasadenie. AgentGrid.io môže obsahovať zdieľaný artefakt s verziou a jeho zámernú publikáciu. Porovnanie iného pracovného postupu medzi agentmi nájdete v našom Publikačná príručka bota Grok; pre problém s odovzdávaním za zdieľanými artefaktmi si prečítajte náš úvod AgentGrid.io; a pre dizajn-prvú cestu, pozri publikovanie webovej stránky Claude Design.

Ste pripravení mať schválenú webovú stránku na jednom mieste? Vytvorte artefakt AgentGrid.io, pozvite ďalšieho spolupracovníka s príslušným prístupom a zverejnite ho až vtedy, keď verejná verzia prejde kontrolou.

|

Co-founder & CEO