# Rainbow cassette catalogue deck

> A cream catalogue deck for an analog-product studio: a packaging-style cover, studio statement, four product spec columns, quotation layouts, a release schedule and a colophon. An HTML template a coding agent clones and adapts.

- Kind: Slides
- Live deck: https://htmlpreview.github.io/?https://github.com/zarazhangrui/beautiful-html-templates/blob/main/templates/sakura-chroma/template.html
- Page: https://meetreference.com/v/cassette-catalogue-deck-rainbow-ribbons/
- Ready-to-use agent handoff: https://meetreference.com/v/cassette-catalogue-deck-rainbow-ribbons/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/cassette-catalogue-deck-rainbow-ribbons/prompt.txt
- Authorship: Not stated
- Made with: Not stated
- Model: not stated
- Built with: HTML and CSS
- Style: Decks; retro packaging, rainbow stripes, condensed typography, cream background, editorial grid, geometric, specification labels
- Slides: 9
- Preview: a flip-through of inspected screenshots; open the live work to experience its motion and interactions.
- Shared by @zarazhangrui in GitHub, May 5, 2026: https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/sakura-chroma
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: Coding agent that can clone the repo; Your own deck content.

## Recreating this deck

These are the creator's published instructions, unedited.

## Prompt

```text
Clone https://github.com/zarazhangrui/beautiful-html-templates and follow the instructions in AGENTS.md to build me a beautiful HTML slide deck.
```

## What it looks like

Written by Reference from the captured walkthrough frames, not by the creator.

Editorial product catalogue for a small maker of analog tape recorders, combining bold typography, simple geometric graphics, and practical product information.

- Color: Warm cream backgrounds, near-black text, and vivid red, orange, yellow, green, blue, and magenta accents.
- Type: Large, heavy condensed sans-serif headlines paired with small, restrained sans-serif labels and body copy.
- Framing: Clean, mostly flat layouts with strong alignment and generous open space. Rainbow bands and overlapping colored circles provide graphic accents alongside charts, tables, and product columns.
- Structure: A branded cover leads into a studio statement, a four-product catalogue, a prominent quotation, an annual output chart, and a release schedule, followed by a concise closing page.

Storyboard of the slides: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/storyboard.webp

- Slide 1: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f1.webp
- Slide 2: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f2.webp
- Slide 3: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f3.webp
- Slide 4: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f4.webp
- Slide 5: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f5.webp
- Slide 6: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f6.webp
- Slide 7: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f7.webp
- Slide 8: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f8.webp
- Slide 9: https://meetreference.com/media/cassette-catalogue-deck-rainbow-ribbons/f9.webp

## How it was made, per the creator

- Notes: Template library meant for coding agents: the agent reads AGENTS.md and index.json, picks a template matching the brief, clones it and adapts content. Announced on X: https://x.com/zarazhangrui/status/2051768995188228178

## Links

- View deck: https://htmlpreview.github.io/?https://github.com/zarazhangrui/beautiful-html-templates/blob/main/templates/sakura-chroma/template.html
- Original post: https://github.com/zarazhangrui/beautiful-html-templates/tree/main/templates/sakura-chroma