SuperAPI AI Directory

sample-rendering

Design & creation

View repository

Updated 10-16 05:07

About this skill

Sample Rendering — Sample Rendering Methodology

The method sample-renderer follows when fairly rendering pack-applied samples and the baseline.

Fair Comparison Principles

To measure diversity, the content must be the same and only the design different . The pack-applied version and the baseline use the same dummy content (fixture). prompt.md is input as-is without modification — if the style doesn't come through from prompt.md alone, that is a defect of the pack, and it is diversity-qa's job to catch it.

Dummy Content (fixture)

Use fixed fake content per track. Applied identically to every pack and baseline.

PPT fixture — fictional company "Northwind" quarterly report:

  • Cover: "2026 Q1 Business Review / Northwind / April 30"
  • Body: "3 Key Achievements" — revenue growth, new customers, cost efficiency (one line of explanation each)
  • Chart: quarterly revenue bar chart (Q1 120, Q2 145, Q3 138, Q4 170)

웹 fixture — fictional product "Northwind" landing:

  • Hero: title "Put your team's work in one place" + one-line subtitle + 2 CTA buttons
  • Section: 3 feature cards (title + 1 sentence)
  • Footer: logo + 4 links + copyright

Render Path

Web track: Write a single HTML file (inline CSS or Tailwind CDN) as instructed by prompt.md → _workspace/03_render_{slug}.html → full-page screenshot at desktop width (1280px) with a headless browser such as Playwright → design-packs/{slug}/preview.png.

PPT track: The default approach is to render as an HTML mockup with the 3 slide types (cover, body, chart) on a 16:9 canvas arranged vertically on a single page (most stable). One HTML page → screenshot → preview.png. If an actual .pptx is needed, generate it with python-pptx and then convert with LibreOffice (soffice --headless --convert-to png), but if no conversion tool is available, fall back to the HTML mockup.

baseline: Render the same fixture as a pack-less basic requestat the level of "make me a PPT" / "make me a landing page" → _workspace/03_render_baseline-{track}.png. Create it only once per track and reuse it for all pack validation.

Font Fallback

If the specified font is not available as a system or web font, fall back to an available font in the same category (sans/serif/mono/display), and leave a note in the render memo that a fallback occurred. For Korean content, secure a Pretendard/Noto Sans KR family — if Korean characters render as tofu boxes (口), treat it as a render failure.

Outputs

  • design-packs/{slug}/preview.png — pack-applied sample (also used in the site catalog).
  • _workspace/03_render_baseline-{track}.png — track baseline.
  • _workspace/03_render_{slug}.html(or .pptx) — render source, preserved for audit and reproduction.

Error Handling

Render failures (missing fonts, conversion tools, etc.) are retried once and then marked as render_failedand reported with the reason to diversity-qa and pack-architect. Do not automatically exclude from publishing — a human decides.