← All runbooks
anthropics / frontend-design

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. This runbook guides an AI agent through building web components, pages, artifacts, posters, or applications — including websites, landing pages, dashboards, React components, and HTML/CSS layouts —

agent claude-codemodel claude-sonnet-4-6snapshot python312-uveval programmatic6 stepsv1.0.0

Deploy frontend-design to your jetty.io

One-click installs this runbook into a collection on your Jetty account. You can run it from the Spot dashboard, schedule it, or pipe inputs in via the API.

Deploy on jetty.io →View source
The shape of the run

6 steps · start to finish.

  1. 1
    Step 1

    Environment Setup

    ▶

    Verify prerequisites and prepare the output directory.

    mkdir -p /app/results/frontend_output

# Confirm the user has provided frontend requirements
if [ -z "$FRONTEND_REQUIREMENTS" ]; then
  echo "WARNING: No explicit FRONTEND_REQUIREMENTS env var set — proceeding with task description."
fi

echo "Output directory ready: /app/results/frontend_output"

    Confirm:

    • The user's requirements are clear (component, page, or application to build)
    • Any technical constraints (framework, performance, accessibility targets) are noted
    • Any brand guidelines or aesthetic preferences are captured

    If requirements are ambiguous, document your interpretation in design_rationale.md before proceeding.

  2. 2
    Step 2

    Design Thinking — Aesthetic Direction

    ▶

    Before writing any code, commit to a clear aesthetic direction. This is the most critical step. Document your choices in `/app/results/design_rationale.md`.

  3. 3
    Step 3

    Implement the Frontend

    ▶

    Generate working, production-grade code that executes your chosen aesthetic direction precisely.

  4. 4
    Step 4

    Iterate on Design Quality (max 3 rounds)

    ▶

    After generating the initial output, evaluate it against the design quality checklist. If any check fails, refine the code and re-evaluate. Repeat up to 3 rounds.

  5. 5
    Step 5

    Write Design Rationale

    ▶

    Write `/app/results/design_rationale.md` documenting:

  6. 6
    Step 6

    Final Checklist (MANDATORY — do not skip)

    ▶

    echo "=== FINAL OUTPUT VERIFICATION ===" RESULTS_DIR="/app/results"