Social Media Graphics: a Tokeny case study

Prepare the inputs

Create a separate workspace in Tokeny, download and unpack the sample inputs, then select a model that supports tools. The sample uses synthetic data or the public sources named in the article.

product-brief.md

Download sample inputs

Send the task to Tokeny

The original task was executed in Chinese. Copying these instructions reproduces the same task; the results below include an English report.

为产品设计三种社交平台配图版式：1080×1080、1080×1440、1200×630；使用 SVG 排版与几何图形，保留安全边距。

交付文件：square.svg、portrait.svg、landscape.svg。
验收要点：
- 三个 SVG 的 viewBox 符合尺寸
- 价格和功能一致
- 不截断标题
这是使用合成演示输入或指定公开资料的真实操作案例。请先读取工作空间输入，再实际生成文件并自检。所有写入、脚本与临时服务限于当前工作空间；临时服务只监听 127.0.0.1，执行后关闭；不触达外部收件人、不发布、不付款、不更改系统设置，不调用子智能体。需要公开资料时可读取给定 URL。只启用完成任务必需的工具。另写 report.md（中文）和 report.en.md（英文），简洁、完整，包含输入、处理步骤、真实结果、检查方式和局限；失败或未验证部分如实记录，不能宣称成功。最终回复用中文列出产物、关键结果与待核实项。

Follow-up instructions after review (1)

真实浏览器渲染发现 square.svg 的副标题“清楚分工 · 看见截止日期 · 随时导出”与深绿色斜切背景边缘相交，右半段浅色文字落到浅色背景上而难以阅读。请检查三种尺寸的真实渲染，将整行副标题放在统一高对比背景中（例如上移或调整背景形状），保留全部文案、价格和尺寸。修复后生成实际浏览器截图自检，更新双语报告，不要求固定字数。

The recorded run used an isolated demonstration workspace. Review the commands and file paths before approving operations in your own workspace.

What actually ran

The task was submitted through the Tokeny input box. An online model read the inputs and executed tools. This run covers the local sample task and its actual files. Results and checks are recorded below.

The actual Tokeny 1.7.8 session and files for Social Media Graphics. Open the image at full size.

A preview of the actual generated file included in the download.

A real browser preview of landscape.svg.

Results and verification

Input

Source: product-brief.md in the workspace.
Product: Songguo Task Board (fictional demo product) for teams of 3–10.
Features: task list, assignee, due date, CSV export.
Pricing: Free plan up to 3 people; Team plan at RMB 29 per person per month.
Visual input: brand color #176B52. No customer testimonials, sales figures, or third-party endorsements were invented.

Processing

Read and verified the workspace product brief and environment notes.
Created square, portrait, and landscape layouts with native SVG text, rectangles, circles, paths, and lines.
Kept the same feature and pricing copy in all three assets while adapting the information layout to each aspect ratio.
Used a light background, brand green, and yellow accent, with approximately 72–96 px of safe margin for primary content.
Read the generated files back and used XML parsing to verify structure, dimensions, and required copy.
In response to the real-rendering issue, added a full-row brand-green band behind the subtitle in all three layouts so the light text no longer crosses light and dark backgrounds.
Served the files locally on 127.0.0.1 and used Edge + Playwright to load each SVG and capture screenshots at the target canvas size.

Actual Results

square.svg generated at 1080 × 1080, with viewBox 0 0 1080 1080.
portrait.svg generated at 1080 × 1440, with viewBox 0 0 1080 1440.
landscape.svg generated at 1200 × 630, with viewBox 0 0 1200 630.
All three SVG files parse as XML; their shared feature and pricing description is identical.
All files contain task list, assignee, due date, CSV export, Free plan up to 3 people, and Team plan at RMB 29 per person per month.
The headline is split into two lines, “让小团队，” and “按时交付”, so it does not depend on single-line overflow. A static coordinate and canvas-boundary check was used for the title and safe area.
Fixed the subtitle/background issue: all three layouts now place the complete subtitle on a single brand-green band, preserving all feature and pricing copy.
Edge-rendered screenshots were generated at .tmp/tokeny/svg-render-check/square.png, .tmp/tokeny/svg-render-check/portrait.png, and .tmp/tokeny/svg-render-check/landscape.png.
Browser-reported subtitle bounds were: square x=72..494.97, y=353..389; portrait x=72..510.63, y=414..451; landscape x=72..447.97, y=329..360. Each is inside its corresponding background band.

Verification Method

Parsed each SVG with Python xml.etree.ElementTree.
Asserted that width, height, and viewBox match the requested dimensions.
Asserted that all required feature and pricing strings are present.
Asserted that the desc text is exactly the same in all three files.
Re-read the generated files and reviewed title, feature, and pricing coordinates; the landscape price text was reduced slightly after checking to increase right-side clearance.
Playwright confirmed the three viewport/viewBox pairs: 1080×1080 / 0 0 1080 1080, 1080×1440 / 0 0 1080 1440, and 1200×630 / 0 0 1200 630.
Pillow sampled eight pixels around each screenshot subtitle band. All three images returned #176B52 at 8/8 sample points.

Limitations

The real-browser verification used local Edge and the fonts available in this environment; font substitution on other systems may change actual Chinese pixel widths.
The screenshot check covered the original local SVGs, not social-platform compression, font substitution, or automated cropping.
The brief did not provide a public URL, so no external material was read.

Download and inspect the outputs

The archive contains the files created during this run. Use these checks when adapting the example to your own data.

Reconcile the reported results against the downloadable sample inputs.
Open the generated files and check the contents relevant to your task.
Review the limitations and any unverified steps in the report.

square.svg · 3 KBportrait.svg · 3 KBlandscape.svg · 3 KBreport.md · 3 KBreport.en.md · 4 KB

Download actual outputs