---
name: api-docs-reference
description: "Create Japanese 16:9 slide images in the original API Docs Reference style for API design, integration procedures, and developer-facing explanations. Use when Codex should turn numbered Japanese content into complete one-piece PNG slides matching the bundled white, charcoal, cobalt blue, mint green and orange docs sample family with a sidebar, page chrome and endpoint cards."
---

# API Docs Reference

Create complete 16:9 Japanese slide images in the API Docs Reference style. Turn business lessons into finished slide boards whose cards, arrows, labels, and diagrams stay readable as thumbnails while keeping this family's distinct look.

Generate each slide as one finished PNG with image_gen: background, Japanese text, diagrams, objects, icons, texture, and layout together. Do not rebuild the design with PPTX shapes, HTML/CSS, SVG, or local text overlays.

If this skill arrives as a ZIP, extract it first and read this file plus all required references. Do not infer the style from the ZIP name or cover alone.

## Required Reading

Read these before generating:

1. references/input-workflow.md
2. references/visual-system.md
3. references/slide-recipes.md
4. references/quality-bar.md

Inspect assets/reference-slides/style-reference.png, samples/contact_sheet.png, and all ten sample slides. Treat the ten samples as authoritative finished examples. Preserve the whole family's dark charcoal-navy full-height left sidebar with a cobalt `</>` app tile, line-icon nav rows with gray placeholder bars, one solid cobalt active row and a lower code-tree block; large white page panel with rounded corners, thin border, soft shadow and a browser bar with three dots; huge geometric Japanese gothic headline with cobalt leading characters, charcoal body and mint tail; full-width 1px cobalt rule with round endpoint dots; subline row flanked by a `{ }` chip and a mint check chip; light-gray endpoint cards with 01/02/03 numbered chips; solid rounded footer buttons with white Japanese lettering and square icon badges; dotted connectors with white circular arrow buttons; ghosted dot column in the right margin; white rounded call-out box with a cobalt border, rocket chip and external-link chip. Do not copy only the cover layout.

## Non-Negotiable Workflow

1. Parse numbered user text into an ordered slide plan.
2. Preserve meaning while compressing long copy into one headline, one subline, exactly three short labels, and one bottom takeaway.
3. Choose one role from references/slide-recipes.md.
4. Generate exactly one complete 16:9 Japanese slide image at a time with image_gen.
5. Save as slide_01.png, slide_02.png, and so on.
6. Compare each result with the bundled contact sheet and quality bar.
7. Regenerate unreadable Japanese, invented details, logo-like marks, weak hierarchy, or generic template output.
8. If PPTX or PDF is requested, make PNG slide art first and place each PNG full-bleed into the delivery file.

## Design DNA

Style: API Docs Reference — a developer documentation site captured as a Japanese 16:9 slide. Design DNA: the slide is framed as product UI chrome — a dark charcoal-navy left sidebar runs the full height, opening with a rounded cobalt-blue app tile bearing a `</>` glyph, followed by a column of muted nav rows each pairing a small line icon (home, book, cube, sitemap, database, shield, chart, gear) with a gray placeholder bar and a trailing dot, one row highlighted as an active state in solid cobalt blue with a lighter bar; lower in the sidebar sits a darker rounded block of miniature code-tree lines in blue, green, orange and gray; the remaining area is one large white page panel with softly rounded corners, a thin border and a subtle drop shadow, topped by a slim browser bar with three window dots, two gray and one blue; inside the page the headline is a huge clean geometric Japanese gothic with tight tracking — leading roman characters in cobalt blue, body characters in near-black charcoal, final characters in mint green; directly beneath runs a full-width 1px cobalt rule capped by small round endpoint dots at both ends; the subline row sets a rounded cobalt `{ }` chip at its left and a pale mint check chip at its right with charcoal type between them; the body is ONE dominant three-card endpoint row on very light gray panels with rounded corners, each opened by a small numbered chip reading 01, 02, 03 in cobalt, green and orange, holding soft flat-vector illustrations with light drop shadows; each card closes with a solid rounded footer button in the matching hue carrying white Japanese lettering and a square outlined icon badge at its left; between cards run short dotted connector lines interrupted by white circular buttons with a colored arrow; a vertical column of tiny gray dots ghosts down the right margin like an anchor list; the bottom is one white rounded call-out box with a cobalt border holding charcoal takeaway text with cobalt emphasis, a rocket chip at the left and a mint external-link chip at the right; overall bright, spacious, product-documentation clean, flat and shadow-light with strict alignment.

Make every metaphor documentation and API material, never generic: blockers become failure points on a request path; change becomes a legacy integration panel resolving into an SDK group and a review group; steps become consecutive request stages of authenticate, call and handle response; improvement becomes a request-response-log-refine integration cycle; checks become a spec-compliance docs panel with schema field rows; roadmaps become a versioned release line from v1 node to stable release; priority becomes an integration board with one cobalt-tinted quadrant; daily use becomes a request timeline with handshake, batch and usage markers; recap becomes a quickstart card of documented steps. Do not reduce the family to three equal cards with the right colors.

## Prompt Contract

Use this structure for every image:

Create exactly one complete 16:9 Japanese slide image.
Style: API Docs Reference.
Design DNA: dark charcoal-navy left sidebar with cobalt app tile, line-icon nav rows and one active cobalt row; large white page panel with rounded corners and a browser bar of three dots; huge geometric Japanese gothic headline with cobalt leading characters, charcoal body and mint-green final characters; full-width 1px cobalt rule with round endpoint dots; subline row with a `{ }` chip and a mint check chip; one dominant three-card endpoint row on light-gray panels with 01/02/03 chips in cobalt, green and orange; exactly three solid rounded footer buttons with white Japanese lettering and square icon badges; dotted connectors with white circular arrow buttons; ghosted dot column at the right margin; white rounded call-out box with cobalt border, rocket chip and mint external-link chip
Required Japanese text:
- Headline: [short headline]
- Subline: [short subline]
- Labels: [exactly 3 short labels]
- Bottom takeaway: [one concise sentence]
Slide role: [cover / problem / before-after / three-step / loop / checklist / roadmap / matrix / case / recap]
Composition: follow the matching recipe and inspect samples/contact_sheet.png. Use one dominant role-specific metaphor from references/slide-recipes.md instead of a generic card grid.
Generate background, text, diagrams, objects, texture, and layout together.
Avoid extra microcopy, page numbers, fake logos, QR codes, URLs, dates, prices, watermarks, photorealistic people, equal card grids, and generic PowerPoint/Canva/Gamma output.

## Output Defaults

- One 16:9 PNG per slide, Japanese text only, thumbnail-readable.
- File names slide_01.png through slide_NN.png in content order.
- Keep the family look consistent across every slide in a deck.
