Стройте с Claude, ChatGPT, Cursor или любым LLM

Передайте ваш API key LLM — получите скриншоты и CI/CD.

Screenshots.live публикует JSON Schema и спецификацию OpenAPI по стабильным URL. LLM с вашим API key может создавать шаблоны, размещать элементы, генерировать workflow GitHub Actions и запускать рендеры — без единой строчки кода с вашей стороны.

Как это работает

  1. 1

    Создайте API key

    Войдите и создайте key в панели. Скопируйте его один раз (начинается с sa_live_) и сохраните как secret. Он аутентифицирует и создание шаблонов, и рендеры.

  2. 2

    Дайте LLM system-промпт + ваш key

    Вставьте system-промпт ниже в Claude, ChatGPT, Cursor или любой агент. Добавьте свою спецификацию. LLM читает схему и POST'ит шаблоны и items от вашего имени.

  3. 3

    Пусть LLM напишет workflow

    Попросите workflow GitHub Actions. LLM выдаст YAML с использованием официального render-screenshots-action, ссылающийся на ваш secret и создающий загружаемый артефакт при каждом push.

System-промпт для копирования

Вставьте это в поле system любого LLM-инструмента. Это направит модель к URL схемы и задаст базовые правила, чтобы она генерировала валидные payload вместо выдуманных полей.

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.

Машиночитаемая схема

Два стабильных URL, которые LLM может получить напрямую. Первый отфильтрован по структурам шаблонов; второй — полная публичная спецификация OpenAPI для каждого endpoint'а, доступного вашему API key.

JSON Schema шаблонов
https://api.screenshots.live/schema/templates.json
Полная спецификация OpenAPI 3.x
https://api.screenshots.live/schema/openapi.json
bash
curl https://api.screenshots.live/schema/templates.json | jq '.components.schemas | keys'

Endpoint'ы, чаще всего используемые LLM

Все endpoint'ы принимают ваш API key sa_live_ как Bearer-токен. Шаблоны и items принадлежат владельцу key; rate limits — потьерные.

МетодПутьНазначение
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.

Аутентификация

Отправляйте Authorization: Bearer sa_live_<ваш-key>. Один и тот же key аутентифицирует CRUD шаблонов, CRUD items и dispatch рендеров — без отдельных scope'ов.

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

Словарь, который LLM должен закрепить

Эти enums берутся прямо из схемы. Закрепление их в system-промпте не даёт модели придумывать значения, которые падают с 422.

Типы items
TextDeviceFrameImageShapeCanvasBackgroundHtml
Категории размеров экрана
MobileTabletDesktopCustom

Пример CI/CD-workflow

LLM, следующий промпту выше, выдаст что-то подобное. Action берёт на себя YAML-вызов рендера, повторы при ошибках и загрузку артефакта.

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/

Добавьте SCREENSHOTS_LIVE_API_KEY в secrets репозитория и SCREENSHOTS_TEMPLATE_ID в variables репозитория перед push.

Ошибки, которых LLM должен ожидать

Передайте их LLM, чтобы он мог восстановиться, а не зацикливаться.

  • 401Отсутствует или неверный Bearer-токен. Проверьте ссылку на secret.
  • 403Достигнут лимит тира (напр. число шаблонов) или неверный владелец. LLM не должен повторять без изменений.
  • 422Валидация схемы провалилась. LLM должен заново получить схему и провалидировать до отправки.
  • 429Превышен rate limit. Backoff и повтор; потьерные лимиты применяются на key.

Следующие шаги