Skill: Writing System Prompts for Structured JSON Output (and Using It in the Frontend)

Overview

This skill focuses on designing system prompts that reliably return structured data (JSON) from an LLM, and how to safely parse and use that data in a frontend application.

The goal is to move from: > loosely formatted text responses

to: > predictable, machine-readable JSON that your app can directly consume

Why Structured JSON Matters

Structured output allows you to: - Avoid brittle string parsing - Build deterministic UI behavior - Treat the LLM as a data generator, not just a text generator - Cleanly separate backend logic from frontend rendering

Core Concept

Instead of asking: “What recipes for jello salads do I have?”

You ask: “Return a JSON object with specific fields that represent the answer.”

1. Designing a Strong System Prompt

Key Principles

Explicit structure
Strict rules
Clear constraints
Defined failure behavior

Minimal Example of System Prompt

    OUTPUT_REQUIREMENTS: - Return valid JSON only. Do not include any
    text outside the JSON.

    {{
  "jello_salads": [
    {{
      "items": [
        {{"id": "...", "title": "..."}},
        {{"id": "...", "title": "..."}},
        {{"id": "...", "title": "..."}}
      ]
    }}
  ],
  "text_answer": "..."
}}

FAILURE_MODE: - If you cannot follow these rules exactly, return an
    empty JSON object {{}}.

Note: You may need to escape braces if using templating systems in your backend