Install & open

Starry is a native desktop app built on Tauri v2 — for macOS, Windows, and Linux — and it also runs in the browser as a PWA. No account is required to start designing.

Desktop app

Pick whichever is easiest for your platform:

• macOS — install with Homebrew:

  brew install starryai

• Any platform — download the latest installer from the Starry website. You'll find a .dmg / .app for macOS, an .msi for Windows, and .deb / .AppImage for Linux.

The app is a self-contained native binary; on macOS the installed .app is about 117 MB (size varies slightly by platform).

Web app

Rather not install anything? Visit starry.design — the official site lets you start designing in your browser, no download required. Add it to your home screen for an app-like experience.

System requirements

• macOS 12+, Windows 10+, or Linux
• ≈150 MB of free disk space
• No GPU required; local design needs no internet (AI features need a provider key)

Open your first file

On first launch Starry creates a local workspace on your machine. Your designs are saved as .pen and .fig files — both are real, open design formats (it reads native Figma .fig files), and you can commit them to Git just like any source file.

1. Launch Starry (desktop) or open the web app.
2. Start from a blank canvas, or open a .pen / .fig file from inside the app or your OS file browser.
3. Ready to use AI? Add an API key for any provider — see the beginner's guide.

Quick start

From a blank canvas to a working screen in a few minutes. This walks the core loop: describe, review, refine.

1. Open the AI chat

When you open Starry, the AI chat is already there — use the input box at the bottom of the canvas, or click the sparkle (agent) icon at the top of the left rail. The first time, add an API key for any provider — OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, or MiniMax.

2. Describe a screen

Tell Starry what to build. Be specific about the screen's purpose and the pieces it should contain.

Write a welcome letter from Starry — a centered
card with a headline, a short paragraph, and a
green "Continue" button at the bottom.

3. Review the canvas

Starry creates the frames and lays them out with auto-layout, then names the layers. Select anything and ask for a change.

4. Export or keep iterating

Happy with it? Export to code. Want changes? Just keep talking — the canvas and the code stay in sync.

Beginner's guide

This guide walks you from a fresh install to your first AI-generated screen, one step at a time. The one thing you must do before Starry's AI works is connect a model — so we spend the most time on that.

What you'll need

• Starry installed (desktop or web — see Install & open).
• An API key from any supported AI provider. Starry has no backend and no account, so you bring the key and your prompts go straight to the provider you choose.

Step 1 — Download & open

Starry runs as a desktop app or right in your browser — no sign-up needed. Download the installer for your system (macOS / Windows / Linux) and open it, or just open the web app. Find the links in Install & open.

Launch Starry and open a blank canvas (or a .pen file). You're ready to set up the AI.

Step 2 — Connect a model (add your API key)

This is the only setup step the AI needs. Starry supports many providers — pick one you already have a key for, or create a free one.

Supported providers

• OpenRouter — a single key unlocks hundreds of models (Claude, GPT, Gemini, DeepSeek, Qwen, Kimi…). Great for trying many models from one place.
• Anthropic (Claude), OpenAI (GPT), Google AI (Gemini), DeepSeek, Z.ai (GLM), MiniMax.
• Any OpenAI-compatible endpoint — 通义千问, 豆包, Kimi, 零一万物, 百川, 阶跃星辰, and more. Just paste the provider's base URL.

Add your key

1. Open the chat: click the sparkle (agent) icon at the top of the left rail, or use the input box at the bottom of the canvas.
2. Add your API key for the provider you want. If you don't have one yet, grab it from that provider's console — links are in the table below.
3. Once the key is saved, the chat is ready. Starry calls the provider directly from your device; the key never leaves your machine.

Get your key — provider console links

Verify the connection

Send a test message in the chat — for example "hello". If the model replies, you're connected.

Step 3 — Write your first design

With a model connected, just type in the chat what you want in plain language. Starry builds real, editable layers with auto-layout. For example, type:

Write a welcome letter from Starry — a centered card with a headline, a short paragraph, and a green "Continue" button at the bottom.

Starry generates the frames, names the layers, and applies auto-layout. Select anything and keep refining in natural language — "make the button bigger", "add a subtitle above the title".

Step 4 — Export to code

Happy with it? Starry turns any selection into clean, handoff-ready code — JSX styled with Tailwind, or plain HTML — that you can drop straight into your project with no lock-in. For every export option, see Exporting code.

Step 5 — (Optional) connect your editor

Want AI in your codebase? Add Starry's MCP server to Claude Code, Cursor, or any MCP client. See MCP & editor tools.

Next steps

• Writing effective prompts — prompt patterns that actually work.
• Figma interop — open and round-trip your .fig files.
• Local-first & collaboration — files, Git, and live co-editing.

Keyboard shortcuts

Speed up your day-to-day work in Starry. ⌘ is the Command key on macOS; on Windows/Linux it's Ctrl.

Tools

Files

Editing

Canvas

Writing effective prompts

Starry treats your prompt as the source of truth for the interface. The AI works directly on the canvas — 100+ tools create shapes, set fills and strokes, manage auto-layout, build components and variables, run boolean operations, and export assets — so a good prompt is the difference between a rough sketch and a handoff-ready screen.

Prompts that work

Describe the interface the way you'd brief a designer. Three things make a prompt click:

• Name the screen and its goal. "A mobile login screen", "a SaaS pricing page" — what it is and what it's for.
• List the key components. Inputs, buttons, cards, nav — the building blocks you expect to see.
• State the layout intent. Columns, centered, sidebar, grid — how the blocks should sit.

Go further when it matters:

• Give scale clues. "Top nav 1440 wide, dark" or "2×2 card grid" — rough dimensions keep proportions sane.
• Describe images, don't name them. For photo placeholders, use an English search query the library understands: "aerial city skyline sunset", not "image1". Hint the orientation too — landscape (default), portrait, or square.
• Short and iterative beats long and one-shot. Generate a skeleton first, then refine section by section.

How Starry builds

Under the hood, Starry works in four phases — it's worth knowing so nothing looks like a glitch:

1. Plan — a quick text outline of the blocks, dimensions, and layout approach.
2. Skeleton — the whole page appears as gray placeholder blocks, like a wireframe with correct proportions.
3. Fill — each skeleton section is replaced, one by one, with the real content.
4. Polish — photo placeholders are filled from the stock library (see Stock photo keys), and Starry verifies the result.

After generating, Starry runs a built-in check for layout, accessibility, and design-system issues, and fixes the meaningful ones before showing the summary — so you get a working screen, not a pile of overlaps.

Iterating in natural language

Select any node and ask for a change — "make this button green", "add a subtitle above the title". Starry edits the real layer, not a redraw. You can also select several nodes and ask to rearrange, re-layout, or restyle them: the selection is treated as source material — its content is kept, while Starry is free to resize, crop, recolor, and recompose it into a new layout.

Components & variants

As you build, Starry assembles reusable components and groups variants into component sets. Switch variants from the inspector; later exports keep those tokens, so your code stays consistent.

Auto layout & CSS Grid

Auto layout is Starry's flexbox engine, powered by Yoga WASM — the same layout model React Native uses. Turn it on for a container and its children arrange themselves: add, remove, or resize content and the layout flows, no manual nudging.

Turn it on

Select a frame, then in the inspector's Layout section toggle Auto layout (or press ⇧A). Choose a layout mode: Horizontal (row), Vertical (column), Wrap, or Grid. To wrap loose selections into a layout frame, select them and press ⌘⌥G.

Spacing & alignment

• Gap — spacing between children along the main axis.
• Padding — space inside the container around its children.
• Justify — alignment along the main axis: start, center, end, or between.
• Items — alignment across the cross axis: start, center, end, or stretch.

Sizing

• Hug — the container shrinks to fit its children.
• Fill — a child stretches to fill its parent (requires the parent to use auto layout).
• Grow — a child expands to share remaining space among siblings.

A fill child needs a fill-capable chain: nested auto-layout containers must set fill at every level to stretch. And hug/fill can't be circular — at least one child needs a concrete size.

Wrap

In Wrap mode, children flow onto new lines when they run out of room. Always set a row gap when wrapping, or the rows will touch.

CSS Grid

In Grid mode you define tracks instead of a single axis: set columns and rows (e.g. 1fr 1fr or 200px 1fr), column and row gaps, and place children explicitly with column start / row start / column span / row span.

Stay on a grid

Stick to a 4px spacing grid (4, 8, 12, 16, 24, 32, 48) for consistency. Inside a group less than between groups, which is less than between sections — and padding should be at least as large as the gap in the same container.

Exporting code

Designs are never stranded. Turn any artboard into clean, handoff-ready code with pixel-perfect parity to the canvas — from the editor, the CLI, or an AI coding tool.

Supported outputs

• JSX — React components, in two styles: tailwind (Tailwind utility classes) or starryai (the editor's own compact prop syntax).
• HTML — standalone markup, ready to drop anywhere.
• SVG — vector output of any selection.
• .fig — native Figma file, for round-tripping with Figma.
• Design tokens — your variable collections emitted as CSS variables, one value set per mode (light, dark…).
• PNG / JPG / WEBP — raster exports with scale and quality control.

Export from the editor

Select the nodes you want, then use Copy as in the code menu:

• JSX — selection as React JSX, straight to the clipboard.
• SVG — vector markup of the selection.
• CSS — a complete stylesheet: layout, fills, border radius, strokes, opacity, shadows and blur, rotation, blend modes, auto-layout, and typography.
• JSON — the raw node structure.
• Node ID — handy for scripting and MCP calls.

Layout, spacing, and style tokens transfer exactly as designed.

Export from the CLI

The CLI exports whole documents headlessly — perfect for CI. Formats: png, jpg, webp, svg, pdf, html, jsx, fig (default png).

starryai export design.fig -f jsx --style tailwind
starryai export design.fig -f html
starryai export design.fig -f png -s 2 -o design@2x.png
starryai export design.fig -f jpg -q 85 --page "Pricing"

Options: -o/--output output path (default <name>.<format>, bitmaps get @<scale>x), -s/--scale (default 1), -q/--quality 0–100 for JPG/WEBP (default 90), --page <name> to export a specific page (default: first), --node <id> to export a single node (mutually exclusive with --page), and --style starryai|tailwind for JSX (default starryai).

Design tokens

Your variables become real CSS custom properties. Starry walks every variable collection, resolves aliases, and emits one value per mode — so a light/dark collection yields a token block per mode. Components map out alongside, keeping the same names you see in the canvas.

Export with AI tools

The same exporters are exposed as MCP tools (get_jsx, export_svg, export_image, export_pdf, diff_jsx), so Claude Code, Cursor, or Starry's own chat can read a design and produce code. The code-to-design path is also exact: JSX exports use the same syntax as the render tool, so exported JSX can be rendered back onto the canvas.

Figma interop

Starry reads and writes native Figma .fig files, so your existing designs open with full fidelity — vectors, text, styles, and components all transfer.

Open a .fig file

Drop a .fig onto the canvas, or open it from the file browser or your OS. Starry imports it natively — no conversion step.

Copy & paste

Select frames in Figma, copy, then paste into Starry (and back the other way). Nodes land exactly as-is: vectors, text, components, and styles.

Edit in either tool

Refine in Figma or in Starry — the open format keeps both readable, so you never maintain two sources of truth.

Then export to code

Once your design lives in Starry, export it to code — JSX (Tailwind) or HTML. Your code owns the result.

CLI reference

The starryai CLI inspects, analyzes, and exports design files headlessly — no editor needed. Great for scripts and CI. Install it globally:

npm install -g @starryai/cli

Inspect documents

Browse and query .pen / .fig files without opening the editor:

• tree — print the node tree.
• find — find nodes by name or type.
• node — show detailed properties of a node by ID.
• query — query nodes using XPath selectors.
• info — show document info (pages, node counts, fonts).
• pages — list the pages in a document.
• variables — list design variables and collections.
• selection — read the current selection from the running app.

starryai tree design.fig
starryai find design.pen --type TEXT
starryai node design.fig --id 1:23
starryai info design.fig

Analyze and lint

• analyze — analyze colors, typography, spacing, and repeated clusters.
• lint — lint documents for consistency, structure, and accessibility issues.
• formats — list supported document and export formats.

Convert and export

• convert — convert a document to another writable format.
• export — export to PNG, JPG, WEBP, SVG, PDF, HTML, JSX, or .fig. See Exporting code for the full options.

Script the editor

• eval — execute JavaScript with the Figma Plugin API against the running app — every editor operation can be scripted.

Liquid Glass effect

Liquid Glass is Starry's Figma-compatible glass effect: it turns any layer into a refractive, frosted glass panel with editable light, refraction, depth, dispersion, Splay, and Frost controls. The renderer matches Figma closely — rounded corners, Snell refraction, chromatic edge tinting, edge highlights, inner shadow, backlight, and saturation boost.

Add the effect

Select a layer, then in the right-hand inspector open Effects and add a Liquid Glass effect. You can also ask the AI — "make this card liquid glass" — Starry adds it for you with the set_effects tool.

Two things happen automatically when Glass is applied:

• The layer's fill drops to 20% opacity (if it was more opaque) — the glass needs to let the background through to read as glass.
• Only one Glass effect per node. Adding another is blocked until you remove the first.

Tune the look

Expand the effect in the inspector to adjust the seven glass controls (defaults in parentheses):

• Light angle (45°) — direction of the light that creates edge highlights.
• Light intensity (50%) — how bright the highlights are.
• Refraction (30%) — how strongly the background is bent through the glass.
• Depth (20) — how thick the glass edge looks.
• Dispersion (20%) — the chromatic red/blue tint along the edges.
• Splay (50%) — how widely highlights spread out.
• Frost (0) — blur radius of the background; the frosted, "matte" glass look.

Glass samples whatever is already painted behind it — a busy, colorful background makes the effect pop; on an empty white canvas there's little to refract. A translucent fill plus a thin light stroke strengthen the glass feel.

Figma round-trip

Glass effects survive .fig import and export, so glass you author in Starry opens in Figma and vice versa.

Design systems

A design system is a style spec you hand to the AI: a Markdown document describing your tokens, spacing, typography, and component rules. The active design system is injected into every generation, so the AI builds screens that follow your system instead of inventing a look each time.

Built-in presets

Starry ships with three read-only presets. The default is Minimal.

• Minimal — a clean, minimal aesthetic: pure white background, a single indigo accent, 4px spacing grid, and 6/8/16 radius.
• iOS HIG — Apple's Human Interface Guidelines: system colors, the SF type scale, 44pt touch targets, and continuous (squircle) corners.
• Material 3 — Google's M3: the #6750A4 primary palette, Roboto type scale, 4dp grid, and elevation levels.

Switch the active system

In the chat input at the bottom of the canvas, hover the book icon to open the design-system picker and switch instantly. The active one is marked with a check and stays active across sessions.

Create your own

Open the design-system manager — the Design system item in the left rail, or the gear button in the picker. From there you can:

• Create — start from a blank template and write your spec in Markdown (name + body).
• Edit — custom systems are fully editable, with a live preview and an explicit save; built-in presets are read-only.
• Import — drop in a .md / .markdown file and it becomes a custom system.
• Export — right-click any entry and download it as a .md file.
• Delete — remove custom systems (with confirmation); presets can't be deleted.

Write the way the presets do — concrete tokens, not vague adjectives. List the exact colors, a type scale with sizes and weights, a spacing grid, corner radii, and any component rules. The AI applies them to every render.

Components library

The components library lists every reusable component and component set in the current document — search them, preview them, and drop instances onto the canvas. Open it from the Components item in the left rail.

Browse and search

Every entry shows its name, and when relevant: a variant summary (count + variant property names), a description, a Library badge when it came from a team library, and a warning when variant values collide. Type in the search box to filter by name.

Preview and insert

Click an entry to open its details: a live rendered preview, description, source library, documentation link, and the variant properties with their possible values. Insert an instance three ways:

• Click the + button on the row,
• double-click the row, or
• open the details and click Insert instance.

Instances land centered on the canvas (or inside the container you've entered), and stay linked to their main component — edit the master, and every instance updates.

Create components

Select the layers you want to reuse, then choose Create component (or Create component set to group variants) from the right-click menu, the layer toolbar, or the keyboard shortcut. Component sets group several variants under one master; switch variants from the inspector. The AI also assembles components as it builds — you can ask for "a button component with sizes" and get a real, reusable component set.

Variables library

Variables are named values you can bind to properties — colors, numbers, text, and booleans. Bind a fill to a color variable and change it in one place to update the whole design. Open the library from the Variables item in the left rail.

Variable types

Four types, each with its own icon:

• Color — palette swatch, for fills, strokes, and more.
• Number — for spacing, radii, sizes, opacity…
• Text — strings, e.g. a brand name or label.
• Boolean — toggles, e.g. show/hide an element.

Collections and modes

The top half of the panel lists your variable collections (also called tables). Add one with the +, rename it by double-clicking or from the context menu, delete it from the context menu. If you have no collections yet, the panel offers to create one.

Each collection is shown as a table — one column per mode. Modes let the same variables hold different values per context, e.g. Light and Dark. Add a mode with the + in the header, rename by double-clicking, remove any mode except the first.

Add and remove variables

Click Create variable at the bottom and pick a type. Each row is a variable; set its value per mode in the cells. Hover a row to reveal the × to delete it. Column widths are draggable.

MCP & editor tools

Starry ships an MCP server so any AI coding tool can inspect, modify, and export your designs headlessly. 100+ tools, the same ones the built-in chat uses.

Connect your editor

Install the server, then point your client at it. Works with Claude Code, Cursor, Windsurf, Codex, and any MCP-capable tool.

npm install -g @starryai/mcp

{
  "mcpServers": {
    "starryai": {
      "command": "starryai-mcp"
    }
  }
}

For scripts and CI, run the HTTP server instead — it listens at http://localhost:3100/mcp.

Coding agents in the chat

Run Claude Code, Codex, or Gemini CLI right inside Starry's chat panel. They connect over MCP and use the same 100+ tools. ACP and external MCP clients can run at once; Starry serializes document writes so concurrent agents don't overwrite each other. These in-chat agents are powered by ACP — see ACP & agents.

ACP & agents

Starry can host a local AI coding agent — Claude Code, Codex, or Gemini CLI — and let it draw straight onto the canvas. This is powered by the Agent Client Protocol (ACP): Starry launches the agent as a subprocess and feeds it Starry's canvas tools over MCP, so the agent builds and edits real, editable layers instead of handing you code to paste.

What ACP is

ACP (Agent Client Protocol) is the transport Starry uses to connect a local coding agent. Starry spawns the agent's CLI, injects an authenticated starryai MCP server as its tool source, and streams the whole conversation through the chat panel. The agent uses the same 100+ canvas tools the built-in chat uses — render, create_shape, set_fill, set_layout, find_nodes, get_page_tree, export_image and more.

Requirements

• Desktop app. ACP spawns a local process, so it only works in the desktop app — in the browser, ACP agents stay hidden.
• Node.js with npm. All three agents are installed as global npm packages, so you need a working Node.js/npm environment (any recent LTS is fine).
• The agent CLI must be installed. Starry probes each command with <command> --version and only shows agents it can actually launch.
• No API key in Starry. The agent brings its own authentication — you sign in to the agent CLI itself, using your existing subscription or account. Starry only supplies the canvas MCP server, so you never paste a provider key for ACP like you do for the direct AI providers.

Install an agent

Pick one agent, install it in a terminal, verify it, and sign in. The install commands are npm global installs and work the same on macOS, Windows, and Linux.

Claude Code

npm i -g @agentclientprotocol/claude-agent-acp
claude-agent-acp --version

Sign in with your Claude subscription or API key, exactly as you would for Claude Code.

Codex

npm i -g @zed-industries/codex-acp
codex-acp --version

Sign in with your OpenAI account (ChatGPT or an API key), exactly as you would for Codex.

Gemini CLI

npm i -g @google/gemini-cli
gemini --version

Sign in with your Google account when gemini prompts you to.

Connect it in Starry

Open Settings → ACP (or the ACP tab in the Connections panel). Installed agents appear with an "Installed" badge; if none show up, click Refresh status — Starry re-probes your PATH. From there it's three steps:

1. Install an agent — pick one in the dropdown and run its install command in your terminal.
2. Use it as a model — open the model menu in the AI input at the bottom of the canvas and choose the agent under "Your agents".
3. Let it edit the canvas — just chat. The agent calls Starry's canvas tools to create and modify elements.

How a turn works

When you send a prompt, Starry opens an ACP session, launches the agent, and hands it a design-context system prompt: you're inside Starry, use the starryai MCP tools to draw on the live canvas, render JSX, and never write HTML files or run terminal commands. The agent calls canvas tools; Starry applies the changes to the live canvas as real, editable nodes.

Turns run one at a time. If you start a new request while one is still going, Starry asks whether to queue it behind the current one or replace it.

Permissions

Before certain tool calls the agent asks for permission; Starry shows a dialog you approve or reject. Unanswered requests auto-reject after 60 seconds. You choose how much to confirm in Settings → ACP:

• Always ask — every step needs your confirmation.
• Canvas actions auto-approved (default) — drawing and editing the canvas runs without prompts; file and terminal access still asks.
• Fully auto-approved — everything runs without asking.

You can also trust Starry's canvas tools for the current project, so repeated canvas actions never prompt again. Trust is stored per agent and per project.

Troubleshooting

• "No local agents detected." Run the install command for the agent you chose, then click Refresh status in Settings → ACP.
• Codex ACP can't read its model cache. It's out of date — update it with npm i -g @zed-industries/codex-acp@latest, then restart Starry.
• "AI agent error, please retry." That's an ACP protocol-level error (a handler threw). Check the agent's own CLI for auth or quota issues and retry.
• ACP agents and external MCP clients can run together; Starry serializes document writes.
• Behind the scenes the flow is: browser ↔ WebSocket ↔ Starry's MCP server ↔ HTTP ↔ the agent subprocess.

Local-first & collaboration

Starry is local-first: your work stays on your machine by default and plays nicely with Git and the tools you already use.

Files on your machine

Every project is a plain .pen file — commit it, branch it, review it like code. The .pen format is Kiwi binary + Zstd + ZIP: open, not proprietary.

Real-time collaboration

Share a link to co-edit live. Peers connect directly over WebRTC — no server, no account. You see each other's cursors, selections, and presence; click an avatar to follow their viewport.

Components & auto-layout

Build reusable components and component sets, and lay everything out with flex or CSS-grid auto-layout via Yoga WASM. Variants switch from the inspector.

Model management

Starry is model-agnostic: pick any provider, add your own API key, and start designing. The model list shows every model you've configured and lets you add, edit, or remove them. Open Settings → Models.

Supported providers

Starry ships with 20 providers out of the box. Each provider has a "get API key" link, a default model, and a preset model list.

• Global hubs — OpenRouter: one key unlocks 100+ models from many providers.
• Direct providers — Anthropic (Claude), OpenAI (GPT), Google AI (Gemini), DeepSeek, Z.ai (GLM), MiniMax.
• China-friendly providers — 通义千问 (Qwen), 豆包 (Doubao), Kimi, 零一万物 (Yi), 百川智能 (Baichuan), 阶跃星辰 (StepFun).
• More global providers — xAI (Grok), Mistral, Cohere, Perplexity.
• Bring your own endpoint — OpenAI-compatible, Anthropic-compatible, or a fully custom provider with any base URL and model ID.

Add a model

Click Add model in Settings → Models. A configuration dialog opens: pick the provider, then fill in:

• API key — paste the key for that provider (a link to the provider's key page is right there).
• Model ID — choose from the provider's preset list, or type a custom one.
• Model name (optional) — a friendly display name; leave empty and the list shows "model ID · provider".
• Base URL — only for compatible/custom providers, e.g. http://localhost:11434/v1 for a local endpoint.
• Protocol & API type — OpenAI/Anthropic-compatible, plus Completions vs Responses for OpenAI-style APIs.

Use Test connection to verify the endpoint and Multimodal test to detect whether the model accepts images. Models without a key are marked "Not configured" in the list.

Edit and remove

Click any model row to edit its configuration. Hover a row to reveal the remove (×) button — removal only appears when you have more than one model.

Switch models

Pick the active model from the model menu in the chat input at the bottom of the canvas. ACP agents (Claude Code, Codex, Gemini CLI) show up under "Your agents" there, not in the model list — see ACP & agents.

Stock photo keys

Starry can fill shapes with real stock photos when the AI generates an interface. This is optional — without keys, Starry uses placeholder colors — but with a free key the result looks like a finished design instead of a wireframe.

Add keys

Open Settings → Stock photo. Two optional keys are supported and saved automatically as you type:

• Pexels API key (primary) — free from pexels.com/api.
• Unsplash access key (alternative) — from unsplash.com/oauth/applications.

How AI uses them

When generating a screen, Starry's stock_photo tool places real Pexels images onto leaf shapes (Rectangle/Ellipse) — a hero image, a card thumbnail, a portrait avatar. All photos are fetched in one batched call, and you can hint the orientation: landscape (default), portrait, or square.