--- 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**（抽象几何、光斑、点阵、图标）营造层次，**不要外链图片**；用户传了本地图再内联。 - **严格自包含**：所有样式写进 `