design-agent-onboarding

$npx mdskill add langchain-ai/design-agent/design-agent-onboarding

Work through these with the person, in order. Never print a key or token; report missing settings by name. Do not deploy, connect accounts or publish anything until the person asks.

SKILL.md

.github/skills/design-agent-onboardingView on GitHub ↗
---
name: design-agent-onboarding
description: Install and configure Design Agent, add a brand, connect Paper, choose MDA or self-hosting, and diagnose setup without exposing credentials.
---

# Set up Design Agent

Work through these with the person, in order. Never print a key or token; report missing settings
by name. Do not deploy, connect accounts or publish anything until the person asks.

1. **Install and prove the computer.** `uv sync`, then `uv run design-agent sandbox build` (Docker;
   a cold build downloads about 2 GB and takes several minutes) and `uv run design-agent demo`: a
   scripted run renders the sample brand's launch card in three sizes and a 4-second teaser with no
   keys. If it fails, `uv run design-agent doctor` says what is missing.
2. **Model.** `uv run design-agent config set DESIGN_AGENT_MODEL=provider:model` and the provider's
   key (`ANTHROPIC_API_KEY=…`, or `LANGSMITH_GATEWAY_API_KEY` for a `langsmith:` model; typed by the
   person, or set in `.env` by hand). Defaults and other roles: `docs/models.md`. Re-run `doctor`,
   then `uv run design-agent test model`: `doctor` only checks that a key is set, the test makes
   one cheap call with it.
3. **Media keys (optional).** `OPENAI_API_KEY` (image generation), `ELEVENLABS_API_KEY` (voice,
   music, sound effects), `GROQ_API_KEY` (fast transcription). Each tool says plainly when its key
   is missing.
4. **Brand.** Follow the `brand-onboarding` skill to build `workspace/brand/` from what the person
   has (a brand guide, a website, files, or a Paper file). Until then the sample brand is used.
5. **Paper (optional).** `PAPER_MODE=local` when Paper Desktop runs on this machine; `bridged` for a
   deployed agent (see `docs/partners/paper.md`). `off` is fine: boards render in the sandbox.
6. **Try it.** `uv run design-agent ask "Make a LinkedIn card announcing …"`. Finals land in
   `workspace/out/<thread>/`, the last line estimates what the run cost, and `--thread <id>`
   continues a conversation.
7. **Choose where it runs.** Managed Deep Agents (managed runtime, sandboxes, Slack app and
   schedules; one command) or self-hosted (Docker Compose with Postgres and their own Slack app).
   The [design-agent-deploy](../design-agent-deploy/SKILL.md) skill takes it from there, including
   verifying with a real request.
8. **What next.** Teach it the deliverable the team asks for every week
   ([design-agent-customize](../design-agent-customize/SKILL.md)), and measure changes with
   [design-agent-evals](../design-agent-evals/SKILL.md).

More from langchain-ai/design-agent

SkillDescription
brand-onboardingBuild the active brand pack in workspace/brand/ from a brand guide, website, files or a Paper file, validate it, and have a person review it.
data-vizCharts, stat cards, flywheels and diagrams (flows, architectures, hierarchies) rendered on brand from a JSON spec to PNG and SVG. Use for any visual whose job is numbers or relationships, including restyling an attached chart or diagram.
design-agent-customizeChange what Design Agent knows and does. Teach it a new deliverable with a runtime skill, change its instructions, design doctrine or checks, connect MCP servers and tools, or change models and cost caps. Use when someone wants it to make something new, follow a new rule, or use another tool.
design-agent-deployPut Design Agent in a team's Slack. Deploy it to Managed Deep Agents (one command, managed Slack app) or self-host it with Docker Compose, verify it with a real request, ship updates, and keep a separate test copy. Use when someone wants the agent running for their team.
design-agent-evalsFind out whether a change made Design Agent better or worse. Run the eval set or a few tasks before and after against the same model, read the reports, look at the files, and turn a real request that went wrong into a task. Use after changing instructions, skills, checks or models, or when someone asks how good it is.
design-agent-troubleshootDiagnose Design Agent when something fails. Setup, a render, a deploy, Slack or a model call. Run doctor and the connection tests, read logs and traces, match the symptom to its fix, and never print credentials. Use when a command errors, a reply never comes, or a file looks wrong.
design-agent-updateBring a fork or clone of Design Agent up to date with the upstream repository while keeping the team's brand, skills and edits, rebuild what changed, and redeploy safely. Use when someone asks to update, upgrade or pull the latest Design Agent.
design-wikiDesign doctrine to weigh on any visual. Hierarchy, typography, colour, layout, platform sizes, chart and diagram principles, and the review rubric critics score against.
embedded-captions>
faceless-explainerTurn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.