Menu

Individual skill

visual-design

0upvotes

直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠<U+FE0F> 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。

pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design/SKILL.md

Read pinned source

Source commit b7a814bc8b90987fff4443fc265fb36e3a435749

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Instructions only
Last checked
Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
2,961
Repository last updated
Nov 10, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 视觉设计（设计系统直出 HTML）

把用户要的视觉物料，**套下面这套设计系统、自己写一份完整自包含的 HTML**，写到会话产物目录；写完**调 `mcp_pinvou3_present_artifact` 上卡**（工具可用性与 `mcp_boot` 重试规则见「流程」第 5 步）。颜值来自设计系统约束，不是套固定模板。

## 何时用 / 何时不用
- ✅ 用：网页、落地页、产品介绍页、banner、海报、活动图、数据报告页、简历、作品集、可嵌入的 UI 卡片/组件。
- ❌ 不用：查天气、查股价、查行情、查企业、读文档、发消息等**信息检索/操作类** → 走对应连接器或工具；**含数据图表的可视化报告/仪表盘** → 交由 `visualizer` 技能。

## 设计系统（必守）
- **扁平现代、克制高级**；禁止廉价渐变堆叠、噪点、俗气投影、霓虹、花哨动效。
- 字体 `'PingFang SC', system-ui, sans-serif`；层级清晰（大标题粗、正文 14–16px 偏灰）、**留白充足**。
- 配色：每个作品选**一套主色 + 1 辅色 + 中性灰**，与品牌/主题相符，**别花**。
- **构图饱满、别空心**：banner 不要把文字挤最左、装饰挤最右、**中间留一大片空白**。要么内容**一整块**自然铺开（左对齐或居中、留白均匀），要么左文右图时**两边分量均衡、右侧视觉块要够大填住空间**。**能一行放下的标题/文案别硬拆成两行**（容器给够宽、用合适字号、必要时 `white-space:nowrap`）。
- **品牌事实别瞎编**：某品牌的**主色 / logo / slogan 拿不准时，先问用户或用中性配色**，别凭记忆假设（小模型易记错——例：爱奇艺主色是**绿色 `#00BE06`**，不是粉色）。
Back to top