Costruisci con Claude, ChatGPT, Cursor o qualsiasi LLM

Affida la tua API key a un LLM. Ottieni screenshot e CI/CD.

Screenshots.live espone uno JSON Schema e una specifica OpenAPI a URL stabili. Un LLM con la tua API key può creare template, posizionare item, generare un workflow GitHub Actions e avviare i render — senza che tu scriva una riga di codice.

Come funziona

  1. 1

    Crea una API key

    Accedi e crea una key dalla dashboard. Copiala una volta (inizia con sa_live_) e salvala come secret. Autentica sia la creazione dei template sia i render.

  2. 2

    Dai al LLM il system prompt + la tua key

    Incolla il system prompt qui sotto in Claude, ChatGPT, Cursor o qualsiasi agente. Aggiungi la tua specifica. Il LLM legge lo schema e POSTa template e item per tuo conto.

  3. 3

    Lascia che il LLM scriva il workflow

    Chiedigli un workflow GitHub Actions. Il LLM emette YAML che usa la render-screenshots-action ufficiale, referenzia il tuo secret e produce un artefatto scaricabile a ogni push.

System prompt copia-incolla

Incollalo nel campo system di qualsiasi tool LLM. Indirizza il modello agli URL dello schema e stabilisce le regole di base perché produca payload validi anziché inventarsi i campi.

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.

Schema leggibile dalle macchine

Due URL stabili che un LLM può recuperare direttamente. Il primo è filtrato alle strutture dei template; il secondo è la specifica OpenAPI pubblica completa di ogni endpoint che la tua API key può usare.

JSON Schema dei template
https://api.screenshots.live/schema/templates.json
Specifica OpenAPI 3.x completa
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoint più usati dagli LLM

Tutti gli endpoint accettano la tua API key sa_live_ come Bearer token. Template e item appartengono al proprietario della key; i rate limit sono basati sul tier.

MetodoPathScopo
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.

Autenticazione

Invia Authorization: Bearer sa_live_<la-tua-key>. La stessa key autentica il CRUD dei template, il CRUD degli item e il dispatch dei render — senza scope separati.

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

Vocabolario che un LLM dovrebbe fissare

Questi enum vengono direttamente dallo schema. Fissarli nel system prompt impedisce al modello di inventarsi valori che falliscono con 422.

Tipi di item
TextDeviceFrameImageShapeCanvasBackgroundHtml
Categorie di dimensione schermo
MobileTabletDesktopCustom

Workflow CI/CD di esempio

Un LLM che segue il prompt qui sopra produrrà qualcosa di simile. La action gestisce la chiamata YAML di render, i retry e il caricamento dell'artefatto.

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/

Aggiungi SCREENSHOTS_LIVE_API_KEY ai secret del repository e SCREENSHOTS_TEMPLATE_ID alle variabili del repository prima di fare push.

Errori che gli LLM devono aspettarsi

Comunicali al LLM così può recuperare invece di entrare in loop.

  • 401Bearer token mancante o invalido. Ricontrolla il riferimento al secret.
  • 403Limite di tier raggiunto (es. numero template superato) o owner sbagliato. Il LLM non dovrebbe ritentare senza modifiche.
  • 422Validazione schema fallita. Il LLM deve rifare il fetch dello schema e rivalidare prima di postare.
  • 429Rate limit superato. Backoff e ritenta; i limiti per tier valgono per key.

Prossimi passi