Jak vytvořit a publikovat web pomocí Paperclip Agents13 min read
Reading Time: 7 minutesPaperclip koordinuje tým webových stránek AI; není veřejným hostitelem webu. Použijte jej k rozdělení zadání, přidělení odpovědné práce, shromažďování důkazů o zajištění kvality a schválení trasy. Poté nasaďte zkontrolovaný kód prostřednictvím poskytovatele hostingu nebo explicitně publikujte vhodný artefakt aplikace prostřednictvím AgentGrid.io. Úloha přesunutá na Hotovo není veřejné nasazení.
Zvažte třístránkový web s uvedením produktu na trh s domovskou stránkou, stránkou funkcí a kontaktní cestou. Návrhář, kodér, agent QA a marketingový recenzent mohou pracovat paralelně pouze tehdy, když sdílejí kritéria přijatelnosti a vědí, která revize je revidována. Tato příručka ukazuje, jak strukturovat toto předání, aniž by se orchestrace agentů považovala za kouzelný nástroj pro tvorbu webu jedním kliknutím.
Jak publikovat web pomocí Paperclip a AgentGrid.io
Paperclip může organizovat práci agenta jako úkoly a sledovat výstupy jako artefakty. AgentGrid.io může být samostatným místem, kde je výsledná webová stránka nebo dokument kontrolován a v případě schválení publikován. Tyto role nesbalujte: úloha Paperclip nebo její záznam artefaktu není automaticky artefaktem AgentGrid a tyto produkty by neměly být popisovány jako produkty s nativním připojením bez ověřené integrace.
1. Nejprve vytvořte cílový pracovní prostor
V AgentGrid vytvořte nebo vyberte pracovní prostor pro tým, který bude kontrolovat výstup. Než někoho pozvete, zkontrolujte členství v týmu. Agenta Paperclip můžete ponechat na jeho stávající cestě provádění a nechat osobu přenést dodávku. Pozvání agenta AgentGrid je volitelná cesta pro kompatibilního, záměrně nakonfigurovaného asistenta, není důkazem, že se v AgentGrid objeví seznam agentů nebo schvalovací řetězec Paperclip. Pokud agenta pozvete, použijte pokyny pro pozvání AgentGrid a před odesláním jednorázového odkazu zrušte zaškrtnutí nepotřebných možností sdílení a publikování.

V Paperclip dejte úkolu stručné přijetí: koncept vstupní stránky, požadované sekce, zdrojové odkazy pro faktická tvrzení a jmenovaný lidský recenzent. Udržujte interní stav úkolu odlišný od oprávnění k publikování. Úkol označený jako dokončený znamená, že požadovaná práce byla dodána ke kontrole, nikoli že je veřejné uvolnění povoleno.
2. Přeneste skutečný výstup
Když agent skončí, prohlédněte si soubory nebo písemný artefakt, který vytvořil. U malého webu zabalte příslušné soubory jako ZIP a použijte import ZIP AgentGrid. Pro textovou zprávu importujte podporovaný dokument nebo vytvořte nový dokument. Pojmenujte ji, aby ji recenzenti mohli připojit k zadání Paperclip, a zahrňte krátkou poznámku o tom, co je připraveno, co je prozatímní a kde jsou zdrojové materiály. Ověřte náhled AgentGrid spíše než předpokládejte, že soubory jsou vykresleny přesně tak, jak byly v prostředí agenta.

3. Oddělte kontrolu úlohy od kontroly vydání
Ke sledování úkolu a jeho stavu použijte kancelářskou sponku. Požádejte zúčastněnou stranu, aby zkontrolovala samotný artefakt AgentGrid a nechala komentáře k obsahu, odkazům, přístupnosti a jakýmkoliv externím tvrzením. AgentGrid podporuje komentáře k artefaktům, takže zpětná vazba může odkazovat na věc, která bude publikována. Zahrňte revize a zkontrolujte nový náhled. Pokud se změní rozsah úkolu, aktualizujte také přiřazení Paperclip, ale nepovažujte schválení v žádném z nástrojů za magickou synchronizaci s druhým.
4. Publikovat zkontrolovanou verzi
Teprve poté, co lidský vlastník povolí veřejné vydání, použijte postup publikování AgentGrid. Otevřete výslednou stránku jako návštěvník a porovnejte ji se schváleným artefaktem. AgentGrid odlišuje artefakt upravitelného pracovního prostoru od veřejného nasazení; následné změny vyžadují další akci publikování. Zaznamenejte veřejnou adresu URL zpět do úlohy Paperclip jako předávací poznámku, pokud to váš proces vyžaduje, bez nároku na automatickou integraci nebo skrytý schvalovací most.

Dejte týmu cíl webu, ne vágní instrukce
Začněte úzkým zadáním: publikum, cíl konverze, požadované stránky, vizuální reference, vlastník obsahu, očekávání přístupnosti a cíl domény nebo hostingu. U prvního vydání určete responzivní rozvržení, metadata, pracovní trasu kontaktu a co je mimo rozsah.
V Paperclip vytvořte projekt a cíl a poté rozdělte práci na vlastní úkoly. Jeho model úloh podporuje jediného odpovědného vlastníka, blokuje vztahy, vlákna a fáze kontroly. Přiřaďte stratéga nebo PM agenta k plánování, designéra, aby vytvořil vizuální směr, kódovacího agenta k implementaci, QA agenta k testování a člověka ke schválení spuštění. Jedná se o role, které konfigurujete, nikoli o předem zabalené tvůrce webových stránek. Kancelářské sponky vlastní příklad webového týmu zobrazuje stránky funkcí, QA blokované implementací a náhled nasazení procházející kontrolou.
Výzva k plánování: „Naplánujte třístránkový web pro [publikum], který pomůže návštěvníkům [cíl]. Vytvořte mapu webu, kritéria přijetí na úrovni stránky, mezery v obsahu, požadavky na obrázky a mapu závislosti úkolů. Nic nenasazujte. Každému výstupu přiřaďte vlastníka a identifikujte rozhodnutí, která musí člověk učinit.“
Před přidělením agentů definujte smlouvu o uvolnění
Nastavte publikum, primární konverzi, schválenou kopii, inventář stránky, vizuální prostředky, požadované body přerušení, cílového hostitele a vlastníka spuštění. V první verzi zahrňte explicitní cíle, které nejsou cíle, například žádné platby nebo vytvoření účtu. Dejte každé stránce měřitelné kritérium přijetí: stránka s funkcemi vysvětluje nabídku, kontaktní odkaz se dostane do pracovního cíle a každá trasa má smysluplný název.
Udržujte zdroj, design a důkazy pohromadě
Poskytněte staviteli úložiště nebo sdílené umístění projektu. Návrhář poskytuje specifikaci rozvržení a aktiva; kodér implementuje proti stejnému zadání. Komentář úkolu by měl odkazovat na větev, požadavek na stažení, náhled a výsledky testů. Paperclip může shromažďovat výstupy spojené s úkoly a kontrolovat důkazy, ale přílohou úkolu není automaticky živá webová stránka nebo kanonické zdrojové úložiště.
Před udělením přístupu nastavte hranice. Pokud agent může protlačit kód přes identitu GitHub ve svém shellu, ovládací prvky Ask first v nástroji Paperclip neřídí tyto příkazy shellu Git. Omezte přístup k úložišti a požadujte ochranu pobočky a PR kontrolu na GitHub. U konektoru nasazení rozlišujte čtení protokolů sestavení od zahájení produkčního nasazení; Pokyny pro Netlify Paperclip doporučují nejprve se zeptat nebo vypnout pro změny nasazení a konfigurace. Udržujte přihlašovací údaje mimo zdroj webu a poskytněte každému agentovi pouze přístup, který jeho úkol vyžaduje.
Výzva k sestavení: „Implementujte schválený soubor Sitemap v [úložišti]. Zachovejte dohodnutý design, zajistěte funkčnost navigace a formulářů a přidejte metadata názvu a popisu na každou stránku. Pracujte na pobočce, spusťte kontroly projektu, připojte PR a URL náhledu k úloze Paperclip a zastavte se před jakýmkoli produkčním nasazením.“
Samostatný stav vydání, ovládání zdroje a publikování
Kancelářské sponky zaznamenávají, kdo vlastní každé vydání a jaké důkazy doprovázejí předání. Vaše úložiště stále obsahuje implementaci a poskytovatel hostingu provozuje nasazený web. Propojte každý problém s přesnou větví, PR, náhledem, protokolem testu a snímky obrazovky. Pokud úloha odkazuje pouze na „nejnovější“, recenzenti mohou náhodně schválit náhled, který neodpovídá nakonec nasazené větvi.
Udělejte z kontroly bránu, nikoli zprávu „vypadá hotovo“
Požádejte QA o otevření aktuálního náhledu na počítači a mobilu. Zkontrolujte příslib na první obrazovce, navigaci pomocí klávesnice, alternativní text, nefunkční odkazy, chování formuláře, načítání, chyby konzoly a metadata stránky. Nechte marketing ověřit tvrzení o produktu a výzvu k akci. Zaznamenávejte reprodukovatelné důkazy. Pokud formulář potřebuje backend, otestujte odeslání od začátku do konce.
Zásady provádění Paperclip mohou směrovat problém k recenzentovi a poté schvalovateli, když se jeho vykonavatel pokusí označit úkol jako dokončený. Požadované změny se vrátí původnímu vykonavateli. Pro veřejné vydání použijte fázi lidského schvalování a určete, že schválení úkolu není oprávněním k publikování, dokud recenzent nezkontroluje finální náhled a cílovou doménu.
QA výzva: „Otestujte náhled podle kritérií přijatelnosti na úzkém mobilním zobrazovacím poli a na počítači. Vraťte tabulku o úspěšnosti, neúspěšnosti, důkazní adresu URL nebo snímek obrazovky a kroky reprodukce. Neschvalujte ani nenasazujte; selhání odešlete zpět vlastníkovi implementace.“
Praktický kontrolní seznam pro přijetí na trh
- Produkt: porovnejte příslib hrdiny, prohlášení o cenách a cíle s výzvou k akci se schválenou kopií.
- Funkce: klikněte na navigaci, odešlete testovací žádost o kontakt a zkontrolujte cestu úspěchu nebo selhání.
- Responzivní design: kontrolovat úzké obrazovky, plochu, přetečení obsahu, ořezávání obrázků a čitelné mezery.
- Přístupnost: zkontrolujte pořadí klávesnice, popisky, alternativní text, sémantické nadpisy a kontrast.
- Vyhledávání a spolehlivost: potvrdit názvy a popisy specifické pro trasu, nefunkční odkazy, chyby konzoly a načítání produkčních prostředků.
Nasaďte schválené sestavení na skutečnou veřejnou adresu URL
Před poslední kontrolou vyberte produkční cíl. Pro konvenční kódovou základnu připojte úložiště k hostiteli, jako je Netlify nebo Vercel, zkontrolujte jeho nastavení sestavení a proměnné prostředí a nechte hostitele nejprve vytvořit náhled. Po schválení člověkem propagujte nebo nasaďte recenzovanou revizi pomocí zdokumentovaného pracovního postupu daného hostitele. Při odhlášení otevřete produkční adresu URL; testovací navigaci, formuláře, certifikát, doménu a nasazenou revizi. Spuštěním Paperclip na serveru je dostupná pouze orchestrační aplikace; web nezveřejňuje.
Pokud je web vhodným artefaktem aplikace HTML nebo React, AgentGrid.io může být sdíleným místem, kde lidé a připojení agenti upravují stejnou verzi. Importujte složku projektu nebo ZIP nebo požádejte připojeného agenta, aby vytvořil artefakt v zamýšleném pracovním prostoru. Prohlédněte si tam vykreslenou aplikaci a historii. Odkaz na artefakt je soukromý pro lidi s přístupem k pracovnímu prostoru; publikování je samostatná, explicitní akce, která vytváří veřejnou adresu URL. Připojený agent potřebuje schopnost publikování a lidský požadavek na publikování. Pozdější úpravy zůstanou mimo veřejnou stránku, dokud nebudou znovu publikovány. Vlastní domény vyžadují způsobilý placený plán a ověřený DNS. Toto je alternativní způsob publikování, nikoli tvrzení, že Paperclip se automaticky integruje se AgentGrid.io.
Výzva ke spuštění: „Revize schválená člověkem je [verze potvrzení nebo artefaktu]. Nasaďte ji na [určeného hostitele] nebo publikujte [určený artefakt AgentGrid.io] pouze po výslovné autorizaci. Vraťte veřejnou adresu URL, nasazenou revizi, výsledek sestavení a kontrolní seznam kouřového testu. Pokud cíl nebo oprávnění chybí, zastavte se a zeptejte se.“
Propagace by měla odkazovat na konkrétní revizi
Před vydáním si zaznamenejte schválenou verzi odevzdání nebo artefaktu, cílového hostitele nebo pracovní prostor, doménu a kdo může iniciovat publikování. Pokud hostitel generuje adresy URL náhledu, zkontrolujte konečný náhled stejné revize, než ji povýšíte. Poté otevřete veřejnou adresu URL bez privilegované relace a zopakujte kritické kouřové testy. Uložte si referenci vrácení pro případ, že by se trasa kontaktu nebo aktiva narušily pod produkčním nastavením.
Kdy by měl tým použít jednotlivé vrstvy?
kancelářská sponka: zvolte ji, když několik agentů potřebuje přiřazené problémy, závislosti, recenze a odpovědného lidského vlastníka spuštění. Říká týmu, co má dělat, a sleduje práci, spíše než nahrazování kontroly zdroje nebo webového hostitele.
Úložiště a hostitel: zvolte tuto cestu, když web potřebuje existující proces technického vydání, funkce serveru, nastavení infrastruktury nebo zavedené ovládací prvky vrácení. Zkontrolovaný záznam potvrzení a nasazení by měl identifikovat živou verzi.
Pokračujte od schválené verze
Paperclip vlastní úkoly a recenze. Vlastní konvenční produkční nasazení vašeho úložiště a hostitele. AgentGrid.io může obsahovat sdílený verzovaný artefakt a jeho záměrnou publikaci. Porovnání jiného pracovního postupu mezi agenty naleznete v našem Publikační příručka bota Grok; pro problém s předáním za sdílenými artefakty, čtěte naše představení AgentGrid.io; a pro cestu návrhu, viz publikování webové stránky Claude Design.
Jste připraveni mít schválený web na jednom místě? Vytvořte artefakt AgentGrid.io, pozvěte dalšího spolupracovníka s odpovídajícím přístupem a publikujte, až když veřejná verze projde kontrolou.

Figma
Adobe XD
Blog


