Figma Design to Code
warpdotdev/warp
Turns a Figma frame or component into production code that matches the design, using the Figma MCP server and the project's own design system.
直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️…
Install Visual Design
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Pinvou/pinvou-agent visual-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .claude/skills/visual-design && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .claude/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Pinvou/pinvou-agent visual-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .agents/skills/visual-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .agents/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Pinvou/pinvou-agent visual-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .cursor/skills/visual-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .cursor/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Pinvou/pinvou-agent.git --path pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Pinvou/pinvou-agent visual-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .gemini/skills/visual-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .gemini/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Pinvou/pinvou-agent visual-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .github/skills/visual-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .github/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Pinvou/pinvou-agent --skill visual-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Pinvou/pinvou-agent visual-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Pinvou/pinvou-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design .opencode/skills/visual-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "visual-design" agent skill from https://github.com/Pinvou/pinvou-agent/tree/main/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design into .opencode/skills/visual-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
visual-design- GitHub stars
- 2.4k
- Token cost
- ~672 tokens
- SKILL.md length
- 140 words
- Files
- 1
- Skills in repo
- 28
- Repo updated
- First seen
- Licence
- MIT
At a glance
直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️…
- Works in 6 steps: 想清楚：品牌/主题、主色、物料类型/尺寸、要哪些区块。 → 自己写完整 HTML（含 <!DOCTYPE html>，内联… → 自查一遍（落盘前）：对照设计系统过一遍——有没有用了外链 CDN / 廉价渐变… → …
- Tasks that involve UI design
- SKILL.md covers 何时用 / 何时不用, 设计系统（必守）, 按物料类型/尺寸产出 and 流程, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Visual Design is an agent skill from Pinvou/pinvou-agent. 直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
Its SKILL.md is about 670 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering UI design. It works with Model Context Protocol. The repository describes itself as: Open-source desktop AI agent for tools, files, knowledge, workflows, and real deliverables. The licence is MIT.
When your agent uses it
- Tasks that involve UI design
Example prompts
- “做个网页/页面/落地页/banner/海报/报告页/作品集/简历”
- “把这份内容做成网页版”
- “/visual-design”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- 想清楚：品牌/主题、主色、物料类型/尺寸、要哪些区块。
- 自己写完整 HTML（含 <!DOCTYPE html>，内联 CSS、无外链），套上面设计系统。
- 自查一遍（落盘前）：对照设计系统过一遍——有没有用了外链 CDN / 廉价渐变 / 错位 / 间距挤 / 配色或品牌色跑偏 / 溢出 / 死宽度 / 没 收尾？有毛病就改掉再落盘。
- write 用相对路径写到会话产物目录（如 write(path="xxx.html", content=…)，自动落本会话工作目录）。
- 调 mcp_pinvou3_present_artifact 上产物卡（path 传绝对路径，title 用一句话说清这是什么作品；工具列表里没有它时先 tool_search 激活，返回 mcp_boot connecting（MCP…
- 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。
What it can do on your machine
Read from SKILL.md and the folder at commit 76cb1db. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Visual Design loads about 672 tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 140 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Pinvou/pinvou-agent at commit 76cb1db, republished under its MIT licence (© Pinvou). 140 words, ~672 tokens.
Download SKILL.mdSave it as
.claude/skills/visual-design/SKILL.md (or your agent's skills folder).- name
- visual-design
- description
- 直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
- metadata.type
- builtin
- metadata.version
- 0.8.0
视觉设计（设计系统直出 HTML）
把用户要的视觉物料，套下面这套设计系统、自己写一份完整自包含的 HTML，写到会话产物目录；写完调 mcp_pinvou3_present_artifact 上卡（内置 MCP 工具，默认延迟加载：工具列表里没有它时先 tool_search 激活；tool_search 返回 mcp_boot connecting（MCP 服务仍在启动）就等待数秒重试，connecting 消失后仍搜不到，才说明产物卡本轮不可用，直接交付成品并在回复里说明）。颜值来自设计系统约束，不是套固定模板。
何时用 / 何时不用
- ✅ 用：网页、落地页、产品介绍页、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>收尾？有毛病就改掉再落盘。 write用相对路径写到会话产物目录（如write(path="xxx.html", content=…)，自动落本会话工作目录）。- 调
mcp_pinvou3_present_artifact上产物卡（path 传绝对路径，title 用一句话说清这是什么作品；工具列表里没有它时先tool_search激活，返回mcp_bootconnecting（MCP 服务仍在启动）就等待数秒重试，connecting 消失后仍搜不到才直接交付成品并说明产物卡本轮不可用）。 - 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。
用户传图（可选）
- 用户 📎 传了本地图（头像/产品图）→ 把图base64 内联进 HTML（
<img src="data:image/...;base64,...">），自包含、移动不裂。 - 图片字段一律可选：没图先生成，给了图再带上重写。
© Pinvou, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design of Pinvou/pinvou-agent.
Open the folder on GitHubat commit 76cb1db
Compare with similar skills
Visual Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Visual Design this skillPinvou/pinvou-agent | 2.4k | — | ~672 | Automated safety check: Pass | MIT | |
| Figma Design to Codewarpdotdev/warp | 65k | 4 repos | ~2.9k | Automated safety check: Pass | AGPL-3.0 | |
| UI UX Pro Maxsaoudi-h/solar-icons | 184 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Website Design Taste Extractorsenlindesign/taste-skill | 381 | — | ~5.3k | Automated safety check: Pass | None | |
| Refero Designreferodesign/refero_skill | 295 | — | ~5.3k | Automated safety check: Pass | MIT | |
| Build Figmacursor/plugins | 10k | — | ~961 | Automated safety check: Pass | None |
Similar skills
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Website Design Taste Extractor
senlindesign/taste-skill
Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.
Refero Design
referodesign/refero_skill
Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive…
- Official
Build Figma
cursor/plugins
Guides an agent through turning a Figma node into production UI with the repo's own components, then checks the result visually before finishing.
Better Design
marvkr/better-design
Build, improve, and review production interfaces with the Better Design MCP.
More from Pinvou/pinvou-agent
All 28 skills in this repoTmeet Skill
Pinvou/pinvou-agent
何时用：用户明确要通过命令行操作腾讯会议（tmeet），或 Agent 遇到工具缺失/调用失败/能力不足想反馈平台时。OAuth 登录/登出/状态、会议管理（创建/更新/取消/查询/搜索/受邀者）、录制管理（列表/播放地址/智能纪要/转写/权限申请）、元宝纪要（按关键词/时间搜索、稳态/瞬态详情）、会议报告（参会人/等候室/导出明细/异步任务）、通讯录（仅限会议邀请/呼叫入会前置解析，严禁单独查…
Wecomcli Doc
Pinvou/pinvou-agent
何时用:仅当用户明确指定 doc/docx/word/在线文档/office文档或提供 doc.weixin.qq.com/doc/ 链接时使用;泛指「做个文档/写文档/整理成文档」默认走 wecomcli-smartpage 或本地工具,本技能不得抢占。doc 内容操作:新建、导入(.doc/.docx/.txt)、读取、追加、覆盖写入;结构化数据需求改用智能文档/智能表格;公共管理走…
Dws
Pinvou/pinvou-agent
【何时用:仅当用户明确指向钉钉/DingTalk(钉钉文档、钉钉日程等)时使用;泛指做文档/表格/待办/审批默认走本地工具,不要误用钉钉】用 dws CLI 管理钉钉:AI表格/AI搜问(找人首选)/目标管理(Agoal)/组织大脑/日历/通讯录/群聊与机器人消息/待办/审批/考勤/日志(日报周报)/DING消息/钉钉文档/云盘/Markdown文件/AI听记/邮箱/在线电子表格(axls)/知…
Lark Sheets
Pinvou/pinvou-agent
【何时用:仅当用户明确指向飞书/Lark 电子表格;泛指做表格默认走本地工具】创建/操作飞书电子表格:工作表与行列结构、读写单元格(值/公式/样式/批注/图片)、查找替换、批量更新、图表/透视表/条件格式/筛选/迷你图/浮动图片。按名称搜索云空间表格文件改用 lark-drive 的 drive +search。doubao.com 的 /sheets/ URL 也走本 skill。不适用本地…
Lark Base
Pinvou/pinvou-agent
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书多维表格（Base）操作：建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、BaseApp 应用模式（页面与组件）、Workspace 目录、workflow、角色权限、模板中心（模板分类/列表/搜索）；遇到…
Lark Calendar
Pinvou/pinvou-agent
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书日历:管理日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。不负责:查询视频会议记录(本 skill 只覆盖日程;lark-vc 技能未随包收录,可 CLI 直连,见意图路由)、待办任务(走 lark-task)。
Related
Works with
Categories
Questions about Visual Design
What does Visual Design do?
直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️…. Visual Design is an agent skill from Pinvou/pinvou-agent.
When should I use Visual Design?
Visual Design fits situations like: tasks that involve UI design.
How do I install Visual Design in Claude Code?
Run `npx skills add Pinvou/pinvou-agent --skill visual-design -a claude-code`. Or copy the skill folder (pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design in Pinvou/pinvou-agent) into .claude/skills/visual-design in your project. Claude Code loads it when a task matches its description.
How do I install Visual Design in Codex?
Run `npx skills add Pinvou/pinvou-agent --skill visual-design -a codex`. Or copy the skill folder (pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design in Pinvou/pinvou-agent) into .agents/skills/visual-design in your project. Codex loads it when a task matches its description.
Can I use Visual Design in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Pinvou/pinvou-agent --skill visual-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-design, .gemini/skills/visual-design, .github/skills/visual-design and .opencode/skills/visual-design in your project.
What does Visual Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Visual Design is instructions for the agent only.
Does Visual Design access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Visual Design safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Visual Design use?
Visual Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Visual Design use?
About 672 tokens (SKILL.md is roughly 2.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Visual Design?
Skills that share tags, products or a category with Visual Design: Figma Design to Code (warpdotdev/warp, 65k stars), UI UX Pro Max (saoudi-h/solar-icons, 184 stars), Website Design Taste Extractor (senlindesign/taste-skill, 381 stars) and Refero Design (referodesign/refero_skill, 295 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Visual Design?
Pinvou (a GitHub organization) maintains it in Pinvou/pinvou-agent, which has 2,377 GitHub stars. The repository holds 28 skills in this directory. The repository was last updated on October 8, 2026.
Source: Pinvou/pinvou-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.