Rakenna Claudella, ChatGPT:llä, Cursorilla tai millä tahansa LLM:llä

Anna API-avaimesi LLM:lle. Saat kuvakaappaukset ja CI/CD:n.

Screenshots.live julkaisee JSON Schema- ja OpenAPI-spesifikaation pysyvissä URL-osoitteissa. LLM, jolla on API-avaimesi, voi luoda malleja, sijoittaa itemejä, generoida GitHub Actions -työnkulun ja käynnistää renderöinnit — ilman että kirjoitat riviäkään koodia.

Näin se toimii

  1. 1

    Luo API-avain

    Kirjaudu sisään ja luo avain hallintapaneelista. Kopioi se kerran (alkaa sa_live_) ja tallenna secretinä. Se autentisoi sekä mallien luonnin että renderöinnit.

  2. 2

    Anna LLM:lle system-prompti + avaimesi

    Liitä alla oleva system-prompti Claudeen, ChatGPT:hen, Cursoriin tai mihin tahansa agenttiin. Lisää oma spesifikaatiosi. LLM lukee skeeman ja POST:aa malleja ja itemejä puolestasi.

  3. 3

    Anna LLM:n kirjoittaa työnkulku

    Pyydä GitHub Actions -työnkulkua. LLM tuottaa YAML:in, joka käyttää virallista render-screenshots-actionia, viittaa secrettiisi ja tuottaa ladattavan artefaktin jokaisella pushilla.

Kopioi-liitä-system-prompti

Liitä tämä minkä tahansa LLM-työkalun system-kenttään. Se ohjaa mallin skeema-URL-osoitteisiin ja asettaa perussäännöt, jotta se tuottaa kelvollisia payload:ja sen sijaan että keksisi kenttiä.

prompt
You are an expert at creating Screenshots.live templates programmatically.

You have an API key for Screenshots.live (it begins with sa_live_). You can:

1. Read the JSON Schema for templates at:
   https://api.screenshots.live/schema/templates.json

2. Read the full OpenAPI specification at:
   https://api.screenshots.live/schema/openapi.json

3. Create templates by POSTing to https://api.screenshots.live/templates with the
   header: Authorization: Bearer <THE_API_KEY>

4. Add items (text, device frames, images, shapes, backgrounds) by POSTing to
   https://api.screenshots.live/templates/{id}/items

5. Render screenshots from a template by POSTing YAML to
   https://api.screenshots.live/render/api with the same Bearer header.

When the user describes a screenshot or asks for a CI/CD workflow:
- Fetch the schema first; do not invent fields.
- Use exact enum values from the schema for screenSizeCategory and item types.
- For coordinates and dimensions, stay within the screen size bounds.
- For CI workflows, prefer the official GitHub Action:
    uses: screenshots-live/render-screenshots-action@v1
- Never hard-code the API key in code; always reference a secret.

Always show the exact curl or YAML you executed, plus the response status,
so the user can audit what changed.

Koneluettava skeema

Kaksi pysyvää URL-osoitetta, joista LLM voi hakea suoraan. Ensimmäinen on suodatettu malleihin liittyviin rakenteisiin; toinen on täydellinen julkinen OpenAPI-spesifikaatio kaikille endpoint:eille, joita API-avaimesi voi käyttää.

Mallien JSON Schema
https://api.screenshots.live/schema/templates.json
Täydellinen OpenAPI 3.x -spesifikaatio
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpointit, joita LLM:t käyttävät eniten

Kaikki endpointit hyväksyvät sa_live_ API-avaimesi Bearer-tokenina. Mallit ja itemit kuuluvat avaimen omistajalle; rate limitit ovat tier-pohjaisia.

MetodiPolkuTarkoitus
POST/templatesCreate a template (defines canvas size and screen count).
GET/templatesList the API key owner's templates.
GET/templates/{id}Fetch a template with its items.
POST/templates/{id}/itemsAdd an item: Text, DeviceFrame, Image, Shape, CanvasBackground, or Html.
PUT/templates/{id}/items/{itemId}Update an item's position, z-index, or properties.
PUT/templates/{id}/items/bulkReplace all items in a template in one call.
POST/render/apiRender a template into screenshots from a YAML body.
GET/templates/{id}/yamlDownload a YAML scaffold with swappable fields ready to feed the render API.

Autentikointi

Lähetä Authorization: Bearer sa_live_<avaimesi>. Sama avain autentisoi mallien CRUD:n, itemien CRUD:n ja renderöintien dispatch:in — ei erillisiä scope:ja.

bash
curl -X POST https://api.screenshots.live/templates \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Fitness app — launch screens",
    "screenSizeCategory": "Mobile",
    "screenCount": 3
  }'
bash
curl -X POST https://api.screenshots.live/templates/$TEMPLATE_ID/items \
  -H "Authorization: Bearer $SCREENSHOTS_LIVE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "type": "Text",
    "x": 80,
    "y": 120,
    "zIndex": 10,
    "properties": {
      "text": "Track every workout",
      "fontSize": 64,
      "fontWeight": "bold",
      "color": "#0F172A",
      "textAlign": "left"
    }
  }'

Sanasto, joka LLM:n tulisi kiinnittää

Nämä enumit tulevat suoraan skeemasta. Niiden kiinnittäminen system-promptiin estää mallia keksimästä arvoja, jotka kaatuvat 422:een.

Item-tyypit
TextDeviceFrameImageShapeCanvasBackgroundHtml
Näyttökoon kategoriat
MobileTabletDesktopCustom

Esimerkki CI/CD-työnkulusta

Yllä olevaa promptia noudattava LLM tuottaa jotain tämän kaltaista. Action hoitaa YAML-renderöintikutsun, uudelleenyritykset ja artefaktin latauksen.

yaml
name: Render screenshots
on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Render via Screenshots.live
        uses: screenshots-live/render-screenshots-action@v1
        with:
          api-key: ${{ secrets.SCREENSHOTS_LIVE_API_KEY }}
          template-id: ${{ vars.SCREENSHOTS_TEMPLATE_ID }}
          yaml-path: ./screenshots/template.yaml

      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: ./screenshots/output/

Lisää SCREENSHOTS_LIVE_API_KEY repon secretteihin ja SCREENSHOTS_TEMPLATE_ID repon muuttujiin ennen pushausta.

Virheet, joihin LLM:n tulee varautua

Välitä nämä LLM:lle, jotta se voi toipua sen sijaan että jäisi looppiin.

  • 401Bearer-token puuttuu tai on virheellinen. Tarkista secret-viittaus.
  • 403Tier-raja saavutettu (esim. malliraja ylittynyt) tai väärä omistaja. LLM:n ei pitäisi yrittää uudelleen ilman muutoksia.
  • 422Skeemavalidointi epäonnistui. LLM:n tulee hakea skeema uudelleen ja validoida ennen lähetystä.
  • 429Rate limit ylittyi. Backoff ja yritä uudelleen; tier-rajat pätevät avain-kohtaisesti.

Seuraavat askeleet