Bygga appar, för agenter

Så här bygger en agent en Laze-app som personer vill använda: designregler, kitet, fästning och delning, pushar till trunk och kontroll av sitt eget arbete.

Den här sidan är skriven för en AI-agent som ombeds att bygga eller ändra en Laze-app. Läs den före din första laze app create. Personer bedömer en app under de första fem sekunderna: få den att kännas färdig, lägg den där de bad om den och kontrollera den själv innan du säger att den är klar.

Arbetsflödet#

1. Skapa den i konversationen som bad om den:

   laze app create "Insights" --channel <channel>

   Appen startar tom, med en mapp som är din: bygg den från grunden, börja med index.html och sedan laze app push. --channel fäster appen som en flik i den konversationen. Alla i den, och deras agenter, kan öppna den och bygga vidare på den (Skapare). Namnge appen med ord som personer läser, inte en slug.

   Länka plattformskitet och klienten från din sida:

   <link rel="stylesheet" href="/_laze/theme.css" />
   <link rel="stylesheet" href="/_laze/kit.css" />
   <script src="/_laze/laze.js"></script>

   Bilder, en presentation eller ett föredrag är det enda undantaget: de utgår från --template slides, den enda mallen. Dess filer är appens första liveversion, som du kan ändra. Varje bild är en fil i slides/, listad i ordning i slides/deck.json; mallens README.md säger hur du lägger till, ändrar ordning på och formger bilder. Presentationen har en bildlist, tangentbordsnavigering, helskärmsläget Present samt knapparna Export PDF och Export HTML, så bygg inte dem igen. Över MCP gör create_app med template: "slides" samma sak, och write_app_files ändrar en bild i taget.

   Bildmallen är bara för en ny presentation. När en person skickar filer som redan är en sida eller en presentation (en HTML-export, en zip med index.html, en statisk webbplats) ska du lägga upp dem som de är: skapa appen utan --template, packa upp filerna i dess mapp med index.html högst upp, kopiera in alla skript den läser in från ett CDN och pusha. "Flytta dem hit" eller "lägg det här här" med en bilaga betyder exakt det: gör det, fråga inte vad det betyder.

2. En app som redan finns läggs in i en konversation med en fästning, inte ett meddelande med en länk:

   laze app pin <app> --channel <channel>

   --role editor låter medlemmar ändra data men inte koden, --view-only låter dem bara titta. laze app pins <channel> listar flikarna. Fäst aldrig en app igen som en person har lossat.

3. Forma datan i laze.app.json: en samling per typ av sak, med typade fält och några startposter. Data bor i poster, aldrig i sidans kod. En sida som hårdkodar sina siffror, rader eller texter är fel: när datan ändras måste appen ändras utan en push.

4. Ändra sidan och titta sedan på den lokalt innan den går live (se Kontrollera ditt eget arbete).

5. Pusha:

   laze app push -m "Added the pipeline board" --seed

   Varje push blir liveappen direkt. Det finns inga utkast, grenar eller pull requests: appar är trunkbaserade. Skriv meddelandet som en vanlig mening om vad som ändrades för personer. --seed fyller bara samlingar som inte har några poster än.

6. Gå tillbaka när en push blev fel: laze app versions, sedan laze app revert <version> -m "<why>". Det är en ny liveversion; ingen post går förlorad. Git-historiken inuti en app är bara till för detta.

Vem kan öppna den#

En ny app är Begränsad. En app som är fäst i en konversation öppnas för alla där, så en fästning är oftast all delning en teamapp behöver. Dela inte en app bara med personen som bad om den när de bad om den i en kanal: fäst den där. Bredda med laze app access visibility internal|public bara när du blir ombedd; kommandot säger när en administratör måste godkänna. laze app members visar vem som kan öppna den nu. Kontrollera det innan du säger att appen är klar.

Designregler#

Börja med vad appen handlar om, inte med en layout. Fråga hur någon som bryr sig om ämnet skulle rita det på en whiteboard och bygg det: en hotmodell är en attackkarta, en roadmap är en tidslinje, en budget är ett flöde av pengar, en process är ett diagram. En sida med statistikkort och punktlistor känns som en rapport, och det är appen du ska undvika.

Var mycket visuell: använd rörlig grafik och flöden där det går, och guida människor ett steg i taget tills de förstår helt. Skriv aldrig textväggar: där du behöver ord, använd enkla, korta meningar. En app är till för att människor ska förstå, inte för att tömma det du har i huvudet.

Laze-kitet kommer från plattformen (/_laze/theme.css, /_laze/kit.css, /_laze/laze.js). Det är en verktygslåda, inte en layout att fylla i: ta dess tokens och de kontroller du behöver, och lägg din egen CSS i din egen fil ovanpå. Kopiera aldrig kitet in i appen.

• Visuellt först. Gör bilden av ämnet till själva appen: inline-SVG, canvas, en karta, en tidslinje, ett diagram, något personer kan klicka på och utforska. Ge den ett eget uttryck, med din egen layout och rörelse ovanpå kitets tokens.
• Ett jobb per skärm. Den första skärmen svarar på frågan appen finns till för. Lägg ett andra jobb på en flik (lz-tabs), inte under det första.
• Rätt form. Använd en tabell (lz-table) eller en tavla (lz-board) när personer skannar eller flyttar rader, ett statistikkort (lz-stats, lz-stat-value) när en siffra är poängen, ett diagram (lz-chart) för siffror över tid och numrerade steg (lz-steps) för en kort sekvens. Text som är längre än tre rader hör hemma i ett dokument, inte i en app.
• Riktig data. Visa posterna som personer bryr sig om, med deras riktiga namn och datum. Ingen "Lorem", "Item 1" eller platshållardiagram. Varje påstående på sidan kommer från en post eller en länk.
• Typografisk skala. En sidrubrik (lz-title), en rad under den (lz-lede), avsnittsrubriker (lz-h2 eller lz-card-title), brödtext. Lägg inte till andra storlekar.
• Avstånd. Använd klasserna för sida (lz-page), kort (lz-card lz-card-body) och rutnät (lz-grid, lz-row); de håller rytmen på 12 till 20 px. Stapla inte kort inuti kort.
• Båda teman. Färger kommer bara från tokens (var(--color-fg), var(--color-bg-surface), var(--color-primary), var(--color-border) och tonerna lz-badge-*). En hex-färg bryter mörkt läge.
• Smal bredd. Appar öppnas i en sidopanel som är ungefär 380 px bred. Ge tabellceller data-label så att rader staplas, och håll rubriker på en rad.
• Tomma lägen och fellägen. En tom lista säger vad som kommer att visas och hur man lägger till den första. Ett misslyckat anrop visar Laze.fail(error), aldrig en tom sida.
• Status som märken. Visa tillstånd med lz-badge och en ton (-success, -warning, -danger, -info, -primary), inte färgad text.
• Formulär ska hålla sig ur vägen. Lägg "Nytt objekt" bakom en knapp; listan är huvudinnehållet.

Kitreferens#

Skript läses bara in från appens eget ursprung: ett CDN <script> nekas, så kopiera ett bibliotek du behöver till appmappen. När du portar en claude.ai-artefakt eller en annan React-sida ska du kompilera dess JSX innan du pushar (till exempel npx esbuild app.jsx --bundle --minify --outfile=app.js) och länka den byggda filen. Babel i webbläsaren fungerar också, men det läser in megabyte varje gång appen öppnas.

I sidans skript listar, skapar, uppdaterar och tar Laze.records("<collection>") bort poster, Laze.subscribe laddar om vid ändringar, Laze.h bygger element och Laze.mount ritar dem.

Tangentbordsgenvägar#

Laze skickar sina egna genvägar från din app till Laze, om inte din app hanterar dem, så att personer kan trycka på Cmd+K (Ctrl+K på Windows och Linux) för att lämna en app utan att först klicka utanför den. Genvägarna som skickas vidare är Cmd+K, Cmd+[ och Cmd+], Cmd+1 till Cmd+9, Cmd+Shift+A, Cmd+Shift+T, Cmd+Shift+M, Cmd+Shift+D, Cmd+. och Cmd+/, plus Alt+Up och Alt+Down utanför textfält. Alla andra tangenter stannar i din app.

För att behålla en av dessa för din app, hantera tangenten och anropa event.preventDefault(); då lämnar Laze den ifred:

document.addEventListener("keydown", (event) => {
  if ((event.metaKey || event.ctrlKey) && event.key === "k") {
    event.preventDefault();
    openSearch();
  }
});

Kontrollera ditt eget arbete#

Titta på varje ändring innan du pushar den:

laze app serve --port 4173

Den serverar din mapp på http://127.0.0.1:4173/ med plattformskitet och liveappens poster, endast läsning. Den behöver en liveversion, så kör laze app push en gång först. Öppna den med ditt webbläsarverktyg och ta en skärmbild i båda teman och med panelbredd, till exempel:

npx -y playwright install chromium   # once
npx -y playwright screenshot --viewport-size=1100,800 http://127.0.0.1:4173/ light.png
npx -y playwright screenshot --viewport-size=1100,800 "http://127.0.0.1:4173/?theme=dark" dark.png
npx -y playwright screenshot --viewport-size=390,800 http://127.0.0.1:4173/ narrow.png

Titta på varje bild. Åtgärda text som flödar över, kolumner som inte får plats, färger som försvinner i mörkt läge och allt som fortfarande säger "demo".

Innan du postar appen:

• Den är fäst där den efterfrågades, och laze app members listar de personer som ska kunna öppna den.
• Den första skärmen svarar på begäran utan att man behöver skrolla.
• Skärmbilder i ljust läge, mörkt läge och 390 px ser färdiga ut.
• Ditt meddelande anger appens namn och en rad om vad den gör. Fliken i konversationen är länken.

Fråga när du är osäker#

Ställ en kort fråga till personen i stället för att bygga fel sak. Vänta inte på ett "kör" för steg de redan har bett om: om de bad om en app i den här kanalen, skapa den där, fäst den och berätta det.