Bauen mit Claude, ChatGPT, Cursor oder beliebigem LLM

Übergeben Sie Ihren API-Schlüssel an ein LLM. Erhalten Sie Screenshots und CI/CD.

Screenshots.live stellt unter stabilen URLs ein JSON Schema und eine OpenAPI-Spezifikation bereit. Ein LLM mit Ihrem API-Schlüssel kann Templates erstellen, Items platzieren, einen GitHub-Actions-Workflow generieren und Renders auslösen — ohne dass Sie eine Zeile Code schreiben.

So funktioniert es

  1. 1

    API-Schlüssel erstellen

    Melden Sie sich an und erstellen Sie einen Schlüssel im Dashboard. Kopieren Sie ihn einmal (er beginnt mit sa_live_) und speichern Sie ihn als Secret. Er authentifiziert sowohl Template-Erstellung als auch Renders.

  2. 2

    LLM den System-Prompt + Ihren Schlüssel geben

    Fügen Sie den unten stehenden System-Prompt in Claude, ChatGPT, Cursor oder einen anderen Agenten ein. Ergänzen Sie Ihre Spezifikation. Das LLM liest das Schema und POSTet Templates und Items in Ihrem Namen.

  3. 3

    Lassen Sie das LLM den Workflow schreiben

    Bitten Sie um einen GitHub-Actions-Workflow. Das LLM erzeugt YAML, das die offizielle render-screenshots-action verwendet, Ihr Secret referenziert und bei jedem Push ein herunterladbares Artefakt produziert.

Copy-Paste-System-Prompt

Fügen Sie dies in das Systemfeld eines beliebigen LLM-Tools ein. Es verweist das Modell auf die Schema-URLs und legt die Grundregeln fest, damit es gültige Payloads produziert, statt Felder zu halluzinieren.

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.

Maschinenlesbares Schema

Zwei stabile URLs, die ein LLM direkt abrufen kann. Die erste ist auf Template-bezogene Strukturen gefiltert; die zweite ist die vollständige öffentliche OpenAPI-Spezifikation für jeden Endpunkt, den Ihr API-Schlüssel verwenden kann.

Template-JSON-Schema
https://api.screenshots.live/schema/templates.json
Vollständige OpenAPI-3.x-Spezifikation
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpunkte, die LLMs am häufigsten verwenden

Alle Endpunkte akzeptieren Ihren sa_live_-API-Schlüssel als Bearer-Token. Templates und Items gehören dem Schlüsselbesitzer; Rate-Limits sind tier-basiert.

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

Authentifizierung

Senden Sie Authorization: Bearer sa_live_<Ihr-Schlüssel>. Derselbe Schlüssel authentifiziert Template-CRUD, Item-CRUD und Render-Dispatch — keine separaten 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"
    }
  }'

Vokabular, das ein LLM festlegen sollte

Diese Enums stammen direkt aus dem Schema. Sie im System-Prompt zu fixieren hindert das Modell daran, Werte zu erfinden, die mit 422 fehlschlagen.

Item-Typen
TextDeviceFrameImageShapeCanvasBackgroundHtml
Bildschirmgrößen-Kategorien
MobileTabletDesktopCustom

Beispiel-CI/CD-Workflow

Ein LLM, das dem obigen Prompt folgt, produziert etwa Folgendes. Die Action übernimmt den YAML-Render-Aufruf, Fehler-Retries und das Artefakt-Upload.

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/

Fügen Sie SCREENSHOTS_LIVE_API_KEY zu den Repository-Secrets und SCREENSHOTS_TEMPLATE_ID zu den Repository-Variablen hinzu, bevor Sie pushen.

Fehler, die LLMs erwarten sollten

Geben Sie diese an das LLM weiter, damit es sich erholen kann, statt in Schleifen zu laufen.

  • 401Fehlender oder ungültiger Bearer-Token. Prüfen Sie die Secret-Referenz erneut.
  • 403Tier-Limit erreicht (z.B. Template-Anzahl überschritten) oder falscher Eigentümer. Das LLM sollte ohne Änderungen nicht erneut versuchen.
  • 422Schema-Validierung fehlgeschlagen. Das LLM sollte das Schema neu abrufen und vor dem Posten erneut validieren.
  • 429Rate-Limit überschritten. Backoff und erneut versuchen; tier-basierte Limits gelten pro Schlüssel.

Nächste Schritte