- name
- visual-design
- description
- 直出好看的网页/落地页/banner/海报/产品介绍页/无数据图表的静态报告页/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。含数据图表的可视化报告/仪表盘交由 visualizer。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
- metadata
- type: builtin version: 0.8.0
视觉设计（设计系统直出 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，不是粉色）。 - 装饰性视觉元素用纯 CSS/SVG（抽象几何、光斑、点阵、图标）营造层次；需要真实图片（海报主视觉/产品图）时，检索并下载后 base64 内联为 data URL 引用（
<img src="data:image/...;base64,...">，与用户传图同一形态），禁止外链图片 URL，也禁止相对路径图片文件（产物卡内嵌预览没有资产解析，相对路径图必裂）。只有在无法联网检索或无法下载图片时，才降级为可替换图片占位、真实质感背景和明确图片尺寸/位置，并在回复中说明能力限制。 - 严格自包含 = 零网络请求：所有样式写进
<style>内联 CSS，禁止任何外部 CDN / 外链脚本与样式（含 Tailwind CDN、Google Fonts、Chart.js CDN），外链图片 URL 一律禁止；图表用内联 SVG/CSS 自己画。真实图片按上条内联为 data URL 是唯一许可的图片形态——HTML 本身不发任何网络请求，单文件自包含、离线可打开，应用内产物预览和浏览器打开都不裂图。 - 固定尺寸物料（banner/海报）= 老老实实固定 px，别加任何"自适应缩放魔法"：不要
transform:scale/cqw/aspect-ratio/@container/媒体查询改flex-direction——这些模型反复实现错（漏container-type→scale(0)把 banner 缩没；或窄了竖排变形）。就width:Wpx;height:Hpx居中，内部全用固定 px 布局。它在浏览器宽窗里就是对的；窄预览里显示偏大/可横向滚动是正常的、可接受。