Bygg med Claude, ChatGPT, Cursor eller valfri LLM

Ge din API-nyckel till en LLM. Få skärmbilder och CI/CD.

Screenshots.live exponerar ett JSON Schema och en OpenAPI-specifikation på stabila URL:er. En LLM med din API-nyckel kan skapa mallar, placera item, generera ett GitHub Actions-flöde och starta renderingar — utan att du skriver en kodrad.

Så fungerar det

  1. 1

    Skapa en API-nyckel

    Logga in och skapa en nyckel i din dashboard. Kopiera den en gång (börjar med sa_live_) och spara som secret. Den autentiserar både mallskapande och renderingar.

  2. 2

    Ge LLM:n system-prompten + din nyckel

    Klistra in system-prompten nedan i Claude, ChatGPT, Cursor eller valfri agent. Lägg till din specifikation. LLM:n läser schemat och POSTar mallar och item åt dig.

  3. 3

    Låt LLM:n skriva flödet

    Be om ett GitHub Actions-flöde. LLM:n producerar YAML som använder den officiella render-screenshots-action, refererar din secret och producerar en nedladdningsbar artefakt vid varje push.

Klistra-in system-prompt

Klistra in detta i system-fältet på valfritt LLM-verktyg. Det pekar modellen mot schema-URL:erna och fastställer grundreglerna så att den producerar giltiga payloads i stället för att hitta på fält.

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.

Maskinläsbart schema

Två stabila URL:er som en LLM kan hämta direkt. Den första är filtrerad till mall-relaterade strukturer; den andra är den fullständiga publika OpenAPI-specifikationen för varje endpoint din API-nyckel kan använda.

Mall-JSON-schema
https://api.screenshots.live/schema/templates.json
Fullständig OpenAPI 3.x-specifikation
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoints LLM:er använder mest

Alla endpoints accepterar din sa_live_-API-nyckel som Bearer-token. Mallar och item tillhör nyckelns ägare; rate limits är tier-baserade.

MetodSökvägSyfte
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.

Autentisering

Skicka Authorization: Bearer sa_live_<din-nyckel>. Samma nyckel autentiserar mall-CRUD, item-CRUD och render-dispatch — inga separata scopes.

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"
    }
  }'

Vokabulär en LLM bör fästa

Dessa enums kommer direkt från schemat. Att fästa dem i system-prompten hindrar modellen från att hitta på värden som faller på 422.

Item-typer
TextDeviceFrameImageShapeCanvasBackgroundHtml
Skärmstorlekskategorier
MobileTabletDesktopCustom

Exempel på CI/CD-flöde

En LLM som följer prompten ovan kommer att producera ungefär detta. Action:en hanterar YAML-renderingsanropet, omförsök och artefakt-uppladdning.

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/

Lägg till SCREENSHOTS_LIVE_API_KEY i repository-secrets och SCREENSHOTS_TEMPLATE_ID i repository-variabler innan du pushar.

Fel LLM:er bör vänta sig

Vidarebefordra dessa till LLM:n så den kan återhämta sig i stället för att loopa.

  • 401Bearer-token saknas eller är ogiltigt. Dubbelkolla secret-referensen.
  • 403Tier-gräns nådd (t.ex. malltak överskridet) eller fel ägare. LLM:n bör inte försöka igen utan ändringar.
  • 422Schema-validering misslyckades. LLM:n bör hämta schemat på nytt och omvalidera innan postning.
  • 429Rate limit överskridet. Backoff och försök igen; tier-baserade gränser gäller per nyckel.

Nästa steg