Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/aws-samples/sample-strands-agent-with-agentcore/visual-designnpx skills add aws-samples/sample-strands-agent-with-agentcore --skill visual-designgit clone --depth 1 https://github.com/aws-samples/sample-strands-agent-with-agentcoreWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/aws-samples/sample-strands-agent-with-agentcore/visual-design)<a href="https://agentmods.dev/skills/aws-samples/sample-strands-agent-with-agentcore/visual-design"><img src="https://agentmods.dev/badge/skills/aws-samples/sample-strands-agent-with-agentcore/visual-design.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00095 | $0.01380 |
| Opus 5 | $0.00048 | $0.00690 |
| Sonnet 5 | $0.00019 | $0.00276 |
| Haiku 4.5 | $0.00010 | $0.00138 |
Grade A, and why
visual-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 133 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual Design
Quick Reference
| Task | Tool | Guide |
|---|---|---|
| Data chart or graph | generate_chart |
Read SKILL.md Design Ideas |
| Poster / infographic / art | create_visual_design |
Read canvas-design.md |
| Architecture / flow diagram | create_visual_design |
Read diagram-design.md |
Available Tools
generate_chart
Data visualization. Executes matplotlib/plotly code to produce chart PNGs.
python_code(str, required): Chart generation Python codeoutput_filename(str, required):.pngfilename
create_visual_design
Visual design creation: posters, infographics, artwork, diagrams. Uses reportlab, Pillow, svgwrite, or any available library.
python_code(str, required): Design generation Python codeoutput_filename(str, required):.pngor.pdffilename
Available Libraries
| Purpose | Libraries | Output | Notes |
|---|---|---|---|
| Data charts | matplotlib, plotly, bokeh | PNG | Best for charts |
| PDF design | reportlab, fpdf | Full control | |
| Image design | Pillow + fonttools | PNG | Best for PNG designs |
| Vector graphics | svgwrite → svglib + renderPDF | SVG → PDF | SVG→PNG NOT supported (no renderPM) |
| Image processing | Wand (ImageMagick), opencv-python | PNG | Check availability first |
IMPORTANT: For PNG output, use Pillow or matplotlib. Do NOT use svgwrite→renderPM (rlPyCairo is unavailable).
Design Workflow
Data Charts (generate_chart)
- Identify data structure and choose appropriate chart type
- Select color palette (see Design Ideas below)
- Write code with
plt.savefig(filename, dpi=300, bbox_inches='tight') - Review the generated chart
Visual Design (create_visual_design)
- Establish design concept/philosophy (internally)
- Follow the process in canvas-design.md
- Select appropriate library and write code
- Save: reportlab
canvas.save(), Pillowimage.save(), matplotlibplt.savefig() - Review output and refine
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 133 lines · 95 tokens per session scan A 1aeea9d89a55
visual-design is a skill published in the GitHub repository aws-samples/sample-strands-agent-with-agentcore (191 stars, last pushed 7d ago), licensed MIT. It adds 95 tokens to every session and 1,380 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
draw-image
Generate an image from a text prompt using an OpenAI-compatible image generation API (gpt-image-1-mini or compatible). The image is uploaded to the gofile.io public file sharing service and ONLY the public download page URL is returned. Trigger when user asks to draw, paint, generate, or create an image.
edit-canva
Create and edit designs in Canva. Add elements, change text, apply templates, download designs, resize, add images. Use when: "edit Canva", "create in Canva", "add text in Canva", "download Canva design", "Canva template", "resize design", "change background in Canva".
motion-graphics
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI…
liquid-glass
Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
openbot-screen-layout
The default layout for every OpenBot configuration screen — PageShell and its prose/wide widths, PageSection and PageRows, Item row composition, the settings-row pattern where a summary and a chevron open a dialog, and the size and variant vocabulary. This is what a new screen looks like unless an instruction says…
feishu-cli-visual
飞书可视化与展示统一入口，负责选择合适载体，并覆盖画板、Slides、妙笔BOX 动态组件、 妙搭 HTML 应用和统一数据可视化设计规范。用户要求画板/whiteboard、架构图、流程图、飞轮、 鱼骨、路线图、海报、插画、SVG/Mermaid、数据图表或 dashboard，创建 Slides/PPT，嵌入会动的 ECharts/地图/3D/window.magic 组件，或用妙搭/Miaoda/spark 发布 HTML 应用时必须使用本 Skill。 消息卡片由 feishu-cli-messaging 构造和发送；Markdown 图表导入由 feishu-cli-docs 执行。.