Buduj z Claude, ChatGPT, Cursorem lub dowolnym LLM

Daj swój API key LLM-owi. Otrzymasz zrzuty i CI/CD.

Screenshots.live udostępnia JSON Schema oraz specyfikację OpenAPI pod stabilnymi URL-ami. LLM z Twoim API key potrafi tworzyć szablony, dodawać itemy, generować workflow GitHub Actions i uruchamiać rendery — bez ani jednej linijki kodu z Twojej strony.

Jak to działa

  1. 1

    Stwórz API key

    Zaloguj się i utwórz key w dashboardzie. Skopiuj go raz (zaczyna się od sa_live_) i zapisz jako secret. Uwierzytelnia zarówno tworzenie szablonów, jak i rendery.

  2. 2

    Daj LLM-owi system prompt + swój key

    Wklej poniższy system prompt w Claude, ChatGPT, Cursorze lub dowolnym agencie. Dopisz swoją specyfikację. LLM czyta schemat i POSTuje szablony oraz itemy w Twoim imieniu.

  3. 3

    Pozwól LLM-owi napisać workflow

    Poproś o workflow GitHub Actions. LLM wygeneruje YAML korzystający z oficjalnej render-screenshots-action, odwoła się do Twojego secretu i przy każdym pushu zwróci pobieralny artefakt.

System prompt do skopiowania

Wklej to w pole system dowolnego narzędzia LLM. Kieruje model na URL-e schematu i ustala podstawowe zasady, dzięki czemu generuje poprawne payloady zamiast wymyślać pola.

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.

Schemat odczytywalny maszynowo

Dwa stabilne URL-e, które LLM może pobrać bezpośrednio. Pierwszy jest przefiltrowany do struktur powiązanych z szablonami; drugi to pełna publiczna specyfikacja OpenAPI dla każdego endpointu, którego może użyć Twój API key.

JSON Schema szablonów
https://api.screenshots.live/schema/templates.json
Pełna specyfikacja OpenAPI 3.x
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpointy najczęściej używane przez LLM

Wszystkie endpointy akceptują Twój API key sa_live_ jako Bearer token. Szablony i itemy należą do właściciela klucza; rate limity zależą od tieru.

MetodaŚcieżkaCel
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.

Uwierzytelnianie

Wyślij Authorization: Bearer sa_live_<twój-key>. Ten sam key uwierzytelnia CRUD szablonów, CRUD itemów i dispatch renderów — bez osobnych scope'ów.

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

Słownik, który LLM powinien zapamiętać

Te enumy pochodzą prosto ze schematu. Zapisanie ich w system prompcie zapobiega wymyślaniu wartości kończących się błędem 422.

Typy itemów
TextDeviceFrameImageShapeCanvasBackgroundHtml
Kategorie rozmiaru ekranu
MobileTabletDesktopCustom

Przykładowy workflow CI/CD

LLM stosujący się do powyższego promptu wygeneruje coś podobnego. Akcja obsługuje YAML-owe wywołanie renderu, retry i upload artefaktu.

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/

Dodaj SCREENSHOTS_LIVE_API_KEY do secrets repo, a SCREENSHOTS_TEMPLATE_ID do zmiennych repo, zanim wypchniesz zmiany.

Błędy, których LLM powinien się spodziewać

Przekaż je LLM-owi, żeby mógł odzyskać sprawność zamiast wpadać w pętlę.

  • 401Brak lub niepoprawny Bearer token. Sprawdź referencję do secretu.
  • 403Osiągnięto limit tieru (np. liczba szablonów) lub niewłaściwy właściciel. LLM nie powinien ponawiać bez zmian.
  • 422Walidacja schematu nieudana. LLM powinien ponownie pobrać schemat i zwalidować przed wysyłką.
  • 429Przekroczono rate limit. Backoff i ponów; limity per tier obowiązują per key.

Następne kroki