Pinvou/pinvou-agent is an open-source desktop workspace where an AI agent helps with work, visual design, and software development. People use it to work with files and knowledge, create editable visual artifacts, connect coding agents to projects, and extend the workspace with tools, MCP servers, skills, and workflows; the catalogue skills add capabilities to that environment.
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 skills add Pinvou/pinvou-agent --skill visual-designgit clone --depth 1 https://github.com/Pinvou/pinvou-agentWrote 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/pinvou/pinvou-agent/visual-design)<a href="https://agentmods.dev/skills/pinvou/pinvou-agent/visual-design"><img src="https://agentmods.dev/badge/skills/pinvou/pinvou-agent/visual-design.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.1 | $0.00127 | $0.01540 |
| Opus 5 | $0.00063 | $0.00770 |
| Sonnet 5 | $0.00025 | $0.00308 |
| Haiku 4.5 | $0.00013 | $0.00154 |
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 8d 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 — 46 lines — stays where its author put it; the contents beside it link to each section on GitHub.
视觉设计（设计系统直出 HTML）
把用户要的视觉物料，套下面这套设计系统、自己写一份完整自包含的 HTML，写到会话产物目录后调 mcp_pinvou3_present_artifact 上卡。颜值来自设计系统约束，不是套固定模板。
何时用 / 何时不用
- ✅ 用：网页、落地页、产品介绍页、banner、海报、活动图、数据报告页、简历、作品集、可嵌入的 UI 卡片/组件。
- ❌ 不用：查天气、查股价、查行情、查企业、读文档、发消息等信息检索/操作类 → 走对应连接器或工具。
设计系统（必守）
- 扁平现代、克制高级；禁止廉价渐变堆叠、噪点、俗气投影、霓虹、花哨动效。
- 字体
'PingFang SC', system-ui, sans-serif；层级清晰（大标题粗、正文 14–16px 偏灰）、留白充足。 - 配色：每个作品选一套主色 + 1 辅色 + 中性灰，与品牌/主题相符，别花。
- 构图饱满、别空心：banner 不要把文字挤最左、装饰挤最右、中间留一大片空白。要么内容一整块自然铺开（左对齐或居中、留白均匀），要么左文右图时两边分量均衡、右侧视觉块要够大填住空间。能一行放下的标题/文案别硬拆成两行（容器给够宽、用合适字号、必要时
white-space:nowrap）。 - 品牌事实别瞎编：某品牌的主色 / logo / slogan 拿不准时，先问用户或用中性配色，别凭记忆假设（小模型易记错——例：爱奇艺主色是绿色
#00BE06，不是粉色）。 - 视觉元素用纯 CSS/SVG（抽象几何、光斑、点阵、图标）营造层次，不要外链图片；用户传了本地图再内联。
- 严格自包含：所有样式写进
<style>内联 CSS，禁止任何外部 CDN / 外链脚本与样式（含 Tailwind CDN、Google Fonts、Chart.js CDN）；图表用内联 SVG/CSS 自己画。→ 这样离线、嵌入预览、到哪打开都一样不裂。 - 固定尺寸物料（banner/海报）= 老老实实固定 px，别加任何"自适应缩放魔法"：不要
transform:scale/cqw/aspect-ratio/@container/媒体查询改flex-direction——这些模型反复实现错（漏container-type→scale(0)把 banner 缩没；或窄了竖排变形）。就width:Wpx;height:Hpx居中，内部全用固定 px 布局。它在浏览器宽窗里就是对的；窄预览里显示偏大/可横向滚动是正常的、可接受。 - 只有整页（网页/落地页/报告/简历/作品集）才做响应式：用相对单位 +
clamp()流式自适应，组件不出界。 - 克制不冗长：整页控制在合理区块数（落地页 4–6 段足够），确保在长度内自包含收尾（防截断）。
按物料类型/尺寸产出
- 整页（网页/落地页/产品页/报告/简历/作品集）：做整页，响应式。
- 固定尺寸（banner/海报/活动图）：按用户给的尺寸（如 1000×320）固定 px 设计，居中、圆角、
overflow:hidden；不要加max-width/缩放魔法（见上条）。 - 可嵌入卡片/组件：单个组件，不带整页 chrome。
- 不附任何"设计规格卡/规格说明"——只产物本身，别在产物里加配色/尺寸/字体的说明区块。
流程
- 想清楚：品牌/主题、主色、物料类型/尺寸、要哪些区块。
- 自己写完整 HTML（含
<!DOCTYPE html>，内联 CSS、无外链），套上面设计系统。 - 自查一遍（落盘前）：对照设计系统过一遍——有没有用了外链 CDN / 廉价渐变 / 错位 / 间距挤 / 配色或品牌色跑偏 / 溢出 / 死宽度 / 没
</html>收尾？有毛病就改掉再落盘。 File(action="write")用相对路径写到会话产物目录（如File(action="write", path="xxx.html", content=…)，自动落本会话工作目录）。- 调
mcp_pinvou3_present_artifact上产物卡，path 传绝对路径，title 用一句话说清这是什么作品。 - 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。
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.
- 8d ago First seen · 46 lines · 127 tokens per session scan A e38db7a60805
visual-design is a skill published in the GitHub repository Pinvou/pinvou-agent (1,667 stars, last pushed today), licensed MIT. It adds 127 tokens to every session and 1,540 once invoked, about $0.0006 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
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
infographic
A guide for creating infographics with only HTML and CSS. Infographics present structured information visually, such as timelines, comparisons, funnels and organisation charts.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.