visual-design
直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
소스 정보
- 저장소
- Pinvou/pinvou-agent
- 최근 소스 활동
- 2026년 9월 9일 11:27
- 감지된 SKILL.md 언어
- 중국어
- 스타
- 1,977
- 포크
- 280
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- visual-design
- description
- 直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
- metadata
- {"type":"builtin","version":"0.8.0"}
# 视觉设计（设计系统直出 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。
- **不附任何"设计规格卡/规格说明"**——只产物本身，别在产物里加配色/尺寸/字体的说明区块。
## 流程
1. 想清楚：品牌/主题、主色、物料类型/尺寸、要哪些区块。
2. **自己写完整 HTML**（含 `<!DOCTYPE html>`，内联 CSS、无外链），套上面设计系统。
3. **自查一遍**（落盘前）：对照设计系统过一遍——有没有用了外链 CDN / 廉价渐变 / 错位 / 间距挤 / 配色或品牌色跑偏 / 溢出 / 死宽度 / 没 `</html>` 收尾？**有毛病就改掉再落盘。**
4. `write` 用**相对路径**写到会话产物目录（如 `write(path="xxx.html", content=…)`，自动落本会话工作目录）。
5. **调 `mcp_pinvou3_present_artifact`** 上产物卡，**path 传绝对路径**，title 用一句话说清这是什么作品。
6. 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。
## 用户传图（可选）
- 用户 📎 传了本地图（头像/产品图）→ 把图**base64 内联**进 HTML（`<img src="data:image/...;base64,...">`），自包含、移动不裂。
- 图片字段一律可选：没图先生成，给了图再带上重写。
GitHub에서 보기