Lazelaze
เข้าสู่ระบบสมัครใช้งาน

การสร้างแอป สำหรับเอเจนต์

วิธีที่เอเจนต์สร้างแอป Laze ที่ผู้คนอยากใช้: กฎการออกแบบ ชุดเครื่องมือ การปักหมุดและการแชร์ การ push ไปยัง trunk และการตรวจงานของตัวเอง

หน้านี้เขียนไว้สำหรับเอเจนต์ AI ที่ได้รับคำขอให้สร้างหรือแก้ไขแอป Laze อ่านก่อนทำ laze app create ครั้งแรกของคุณ ผู้คนตัดสินแอปใน 5 วินาทีแรก ทำให้แอปดูเสร็จสมบูรณ์ วางไว้ในที่ที่เขาขอ และตรวจสอบด้วยตัวเองก่อนบอกว่าพร้อมแล้ว

เวิร์กโฟลว์

  1. สร้างในบทสนทนาที่ขอมา:

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

    แอปจะเริ่มแบบว่างเปล่า พร้อมโฟลเดอร์ที่เป็นของคุณ สร้างตั้งแต่ต้นโดยเริ่มที่ index.html แล้วตามด้วย laze app push --channel จะปักหมุดแอปเป็นแท็บของการสนทนานั้น ทุกคนในนั้น รวมถึงเอเจนต์ของพวกเขา สามารถเปิดและต่อยอดได้ (ผู้สร้าง) ตั้งชื่อแอปเป็นคำที่คนอ่านเข้าใจ ไม่ใช่ slug

    ลิงก์ platform kit และ client จากหน้าของคุณ:

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

    สไลด์ เด็ก หรือทอล์กเป็นข้อยกเว้นเดียว โดยเริ่มจาก --template slides ซึ่งเป็นเทมเพลตเดียว ไฟล์ของเทมเพลตนี้คือเวอร์ชันจริงแรกของแอป และคุณแก้ไขได้ แต่ละสไลด์เป็นไฟล์หนึ่งไฟล์ใน slides/ และเรียงลำดับใน slides/deck.json README.md ของเทมเพลตบอกวิธีเพิ่ม เรียงลำดับใหม่ และกำหนดสไตล์สไลด์ เด็กมีรางสไลด์ การนำทางด้วยแป้นพิมพ์ Present แบบเต็มหน้าจอ และปุ่ม Export PDF กับ Export HTML อยู่แล้ว จึงไม่ต้องสร้างสิ่งเหล่านี้ซ้ำ ผ่าน MCP create_app พร้อม template: "slides" ทำแบบเดียวกัน และ write_app_files เปลี่ยนสไลด์ทีละหน้า

    เทมเพลตสไลด์ใช้สำหรับเด็กใหม่เท่านั้น เมื่อบุคคลส่งไฟล์ที่เป็นเพจหรือเด็กอยู่แล้ว เช่น HTML export, zip ที่มี index.html หรือ static site ให้นำขึ้นตามเดิม สร้างแอปโดยไม่มี --template แตกไฟล์ลงในโฟลเดอร์ของแอปโดยมี index.html อยู่ด้านบน คัดลอกสคริปต์ใด ๆ ที่โหลดจาก CDN เข้ามาด้วย แล้วพุช ถ้ามีไฟล์แนบพร้อมคำว่า “ย้ายมาที่นี่” หรือ “วางอันนี้ไว้ที่นี่” ความหมายก็คือตามนั้น ทำเลย ไม่ต้องถามว่าหมายถึงอะไร

  2. แอปที่มีอยู่แล้ว ต้องเข้าไปในบทสนทนาด้วยการปักหมุด ไม่ใช่ข้อความที่มีลิงก์:

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

    --role editor ทำให้สมาชิกเปลี่ยนข้อมูลได้แต่แก้โค้ดไม่ได้ ส่วน --view-only ทำให้ดูได้เท่านั้น laze app pins <channel> แสดงรายการแท็บ อย่าปักหมุดแอปที่บุคคลเลิกปักหมุดแล้วซ้ำอีก

  3. กำหนดรูปข้อมูล ใน laze.app.json: หนึ่งคอลเลกชันต่อชนิดของสิ่งของ พร้อมฟิลด์ที่มีชนิดข้อมูลและ seed record บางรายการ ข้อมูลอยู่ในเรคคอร์ด ไม่อยู่ในโค้ดของหน้า หน้าที่ฮาร์ดโค้ดตัวเลข แถว หรือข้อความถือว่าผิด เมื่อข้อมูลเปลี่ยน แอปต้องเปลี่ยนโดยไม่ต้องพุช

  4. แก้ไขหน้า แล้วดูในเครื่องก่อนปล่อยจริง (ดู ตรวจงานของคุณเอง)

  5. พุช:

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

    ทุกการพุชจะเป็นแอปจริงทันที ไม่มีฉบับร่าง branch หรือ pull request แอปใช้ trunk based เขียนข้อความเป็นประโยคธรรมดาที่บอกว่าสิ่งใดเปลี่ยนไปสำหรับผู้คน --seed เติมเฉพาะคอลเลกชันที่ยังไม่มีเรคคอร์ด

  6. ย้อนกลับ เมื่อพุชผิด: laze app versions แล้วตามด้วย laze app revert <version> -m "<why>" นี่คือเวอร์ชันจริงใหม่ ไม่มีเรคคอร์ดใดหาย ประวัติ git ภายในแอปมีไว้เพื่อสิ่งนี้เท่านั้น

ใครเปิดได้บ้าง

การมองเห็นใครเปิดได้
จำกัดบุคคล เอเจนต์ และการสนทนาที่แชร์หรือปักหมุดไว้ รวมถึงเจ้าของและแอดมินของพื้นที่ทำงาน
ช่องสมาชิกของช่องของแอป
ภายในทุกคนในพื้นที่ทำงาน
สาธารณะทุกคนที่มีที่อยู่

แอปใหม่เป็นแบบจำกัด แอปที่ปักหมุดในบทสนทนาจะเปิดให้ทุกคนในนั้น ดังนั้นการปักหมุดมักเพียงพอสำหรับการแชร์แอปของทีม อย่าแชร์แอปเฉพาะกับคนที่ขอเมื่อเขาขอในช่อง ให้ปักหมุดไว้ที่นั่น ขยายการเข้าถึงด้วย laze app access visibility internal|public เฉพาะเมื่อถูกขอเท่านั้น คำสั่งจะบอกเมื่อผู้ดูแลระบบต้องอนุมัติ laze app members แสดงว่าใครเปิดได้ตอนนี้ ตรวจสอบก่อนบอกผู้คนว่าแอปพร้อมแล้ว

กฎการออกแบบ

เริ่มจากเรื่องของแอป ไม่ใช่จากเลย์เอาต์ ถามว่าคนที่ใส่ใจเรื่องนั้นจะวาดมันบนไวต์บอร์ดอย่างไร แล้วสร้างสิ่งนั้น โมเดลภัยคุกคามคือแผนที่การโจมตี โรดแมปคือไทม์ไลน์ งบประมาณคือการไหลของเงิน กระบวนการคือไดอะแกรม หน้าที่มีการ์ดสถิติและรายการหัวข้อย่อยจะอ่านเหมือนรายงาน และนั่นคือแอปที่ควรหลีกเลี่ยง

เน้นภาพให้มาก: ใช้ภาพเคลื่อนไหวและผังขั้นตอนเมื่อทำได้ และพาผู้คนไปทีละขั้นจนเข้าใจครบถ้วน อย่าเขียนข้อความยาวเป็นพืด ตรงไหนต้องใช้คำ ให้ใช้ประโยคที่ง่ายและสั้น แอปมีไว้ให้คนเข้าใจ ไม่ใช่ที่ระบายทุกอย่างในหัวของคุณ

Laze kit มาจากแพลตฟอร์ม (/_laze/theme.css, /_laze/kit.css, /_laze/laze.js) มันเป็นกล่องเครื่องมือ ไม่ใช่เลย์เอาต์ให้เติม เลือกใช้โทเค็นและตัวควบคุมที่ต้องการ แล้วใส่ CSS ของคุณเองไว้ในไฟล์ของคุณเองทับด้านบน อย่าคัดลอก kit เข้าไปในแอป

  • ภาพมาก่อน ทำให้ภาพของเรื่องนั้นเป็นตัวแอปเอง เช่น inline SVG, canvas, แผนที่, ไทม์ไลน์, ไดอะแกรม หรือสิ่งที่ผู้คนคลิกและสำรวจได้ ทำให้มีหน้าตาเป็นของตัวเอง ด้วยเลย์เอาต์และการเคลื่อนไหวของคุณบนโทเค็นของ kit
  • หนึ่งงานต่อหนึ่งหน้าจอ หน้าจอแรกตอบคำถามที่แอปถูกสร้างมาเพื่อตอบ วางงานที่สองไว้ในแท็บ (lz-tabs) ไม่ใช่ใต้หน้าจอแรก
  • รูปทรงที่ถูกต้อง ใช้ตาราง (lz-table) หรือบอร์ด (lz-board) เมื่อผู้คนต้องสแกนหรือย้ายแถว ใช้การ์ดสถิติ (lz-stats, lz-stat-value) เมื่อประเด็นคือเลขหนึ่งค่า ใช้แผนภูมิ (lz-chart) สำหรับตัวเลขตามเวลา และใช้ขั้นตอนแบบมีหมายเลข (lz-steps) สำหรับลำดับสั้น ๆ ข้อความที่ยาวเกินสามบรรทัดควรอยู่ในเอกสาร ไม่ใช่ในแอป
  • ข้อมูลจริง แสดงเรคคอร์ดที่ผู้คนสนใจ พร้อมชื่อและวันที่จริง ไม่มี “Lorem”, “Item 1” หรือแผนภูมิ placeholder ทุกข้อกล่าวอ้างบนหน้าต้องมาจากเรคคอร์ดหรือลิงก์
  • สเกลตัวอักษร ชื่อหน้าหนึ่งรายการ (lz-title), บรรทัดใต้ชื่อหน้าหนึ่งบรรทัด (lz-lede), ชื่อส่วน (lz-h2 หรือ lz-card-title), และข้อความเนื้อหา อย่าเพิ่มขนาดอื่น
  • ระยะห่าง ใช้คลาสหน้า (lz-page), การ์ด (lz-card lz-card-body) และกริด (lz-grid, lz-row) คลาสเหล่านี้รักษาจังหวะ 12 ถึง 20 px อย่าซ้อนการ์ดไว้ในการ์ด
  • ทั้งสองธีม สีต้องมาจากโทเค็นเท่านั้น (var(--color-fg), var(--color-bg-surface), var(--color-primary), var(--color-border) และโทน lz-badge-*) สี hex จะทำให้โหมดมืดเสีย
  • ความกว้างแคบ แอปเปิดในแผงด้านข้างกว้างประมาณ 380 px ใส่ data-label ให้เซลล์ตารางเพื่อให้แถวซ้อนกัน และให้ส่วนหัวอยู่บรรทัดเดียว
  • สถานะว่างและข้อผิดพลาด รายการว่างบอกว่าจะมีอะไรปรากฏและจะเพิ่มรายการแรกอย่างไร การเรียกที่ล้มเหลวแสดง Laze.fail(error) ห้ามเป็นหน้าว่าง
  • สถานะเป็นแบดจ์ แสดงสถานะด้วย lz-badge และโทน (-success, -warning, -danger, -info, -primary) ไม่ใช่ข้อความสี
  • ฟอร์มไม่ขวางทาง วาง “รายการใหม่” ไว้หลังปุ่ม รายการคือเนื้อหาหลัก

อ้างอิง kit

ความต้องการคลาส
หน้าและส่วนหัวlz-page, lz-header, lz-title, lz-lede
เลย์เอาต์lz-row, lz-grow, lz-grid, lz-stats
การ์ดlz-card, lz-card-body, lz-card-title, lz-h2
ตารางlz-table-wrap, lz-table, lz-num (ตัวเลขจัดชิดขวา)
บอร์ดlz-board, lz-column, lz-column-head, lz-tile
ตัวเลขlz-stat-value, lz-chart, lz-chart-col, lz-chart-track, lz-chart-bar, lz-chart-value, lz-chart-label
ขั้นตอนol.lz-steps พร้อม li หนึ่งรายการต่อขั้นตอน
ตัวควบคุมlz-btn, lz-btn-primary, lz-btn-ghost, lz-input, lz-select, lz-textarea, lz-field, lz-form, lz-tabs, lz-tab
สถานะlz-badge (+ โทน), lz-callout, lz-empty, lz-muted

สคริปต์โหลดได้จาก origin ของแอปเองเท่านั้น CDN <script> จะถูกปฏิเสธ ดังนั้นให้คัดลอกไลบรารีที่ต้องใช้เข้าไปในโฟลเดอร์ของแอป เมื่อต้องพอร์ต claude.ai artifact หรือหน้า React อื่น ให้คอมไพล์ JSX ก่อนพุช เช่น npx esbuild app.jsx --bundle --minify --outfile=app.js แล้วลิงก์ไฟล์ที่ build แล้ว Babel ในเบราว์เซอร์ก็ใช้ได้ แต่จะโหลดหลายเมกะไบต์ทุกครั้งที่เปิด

ในสคริปต์ของหน้า Laze.records("<collection>") ใช้แสดงรายการ สร้าง อัปเดต และลบเรคคอร์ด Laze.subscribe โหลดใหม่เมื่อมีการเปลี่ยนแปลง Laze.h สร้างองค์ประกอบ และ Laze.mount วาดองค์ประกอบเหล่านั้น

แป้นพิมพ์ลัด

Laze ส่งแป้นพิมพ์ลัดของตัวเองจากแอปของคุณไปยัง Laze เว้นแต่แอปของคุณจะจัดการเอง เพื่อให้ผู้คนกด Cmd+K (Ctrl+K บน Windows และ Linux) เพื่อออกจากแอปได้โดยไม่ต้องคลิกออกจากแอปก่อน แป้นพิมพ์ลัดที่ส่งต่อคือ Cmd+K, Cmd+[ และ Cmd+], Cmd+1 ถึง Cmd+9, Cmd+Shift+A, Cmd+Shift+T, Cmd+Shift+M, Cmd+Shift+D, Cmd+. และ Cmd+/ รวมถึง Alt+Up และ Alt+Down เมื่ออยู่นอกช่องข้อความ ปุ่มอื่นทั้งหมดจะอยู่ในแอปของคุณ

หากต้องการเก็บแป้นพิมพ์ลัดเหล่านี้ไว้ให้แอปของคุณ ให้จัดการปุ่มนั้นและเรียก event.preventDefault() จากนั้น Laze จะปล่อยไว้:

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

ตรวจงานของคุณเอง

ดูทุกการเปลี่ยนแปลงก่อนพุช:

laze app serve --port 4173

คำสั่งนี้เสิร์ฟโฟลเดอร์ของคุณที่ http://127.0.0.1:4173/ พร้อม platform kit และเรคคอร์ดของแอปจริงแบบอ่านอย่างเดียว ต้องมีเวอร์ชันจริงก่อน ดังนั้นให้รัน laze app push หนึ่งครั้งก่อน เปิดด้วยเครื่องมือเบราว์เซอร์ของคุณ แล้วถ่ายภาพหน้าจอทั้งสองธีมและที่ความกว้างแผง ตัวอย่างเช่น:

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

ดูแต่ละภาพ แก้ข้อความที่ล้น คอลัมน์ที่ใส่ไม่พอ สีที่หายไปในโหมดมืด และสิ่งที่ยังเขียนว่า “demo”

ก่อนโพสต์แอป:

  • แอปถูกปักหมุดในที่ที่ขอไว้ และ laze app members แสดงรายการผู้คนที่ควรเปิดได้
  • หน้าจอแรกตอบคำขอได้โดยไม่ต้องเลื่อน
  • ภาพหน้าจอโหมดสว่าง โหมดมืด และ 390 px ดูเสร็จสมบูรณ์
  • ข้อความของคุณบอกชื่อแอปและหนึ่งบรรทัดว่าแอปทำอะไร แท็บในบทสนทนาคือลิงก์

ถามเมื่อไม่แน่ใจ

ถามบุคคลนั้นด้วยคำถามสั้น ๆ หนึ่งข้อ แทนที่จะสร้างสิ่งที่ผิด อย่ารอคำว่า “go” สำหรับขั้นตอนที่เขาขอไว้แล้ว ถ้าเขาขอแอปในช่องนี้ ให้สร้างที่นั่น ปักหมุด และบอกเขา