视觉设计（设计系统直出 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。
- 不附任何"设计规格卡/规格说明"——只产物本身，别在产物里加配色/尺寸/字体的说明区块。
流程
- 想清楚：品牌/主题、主色、物料类型/尺寸、要哪些区块。
- 自己写完整 HTML（含
<!DOCTYPE html>，内联 CSS、无外链），套上面设计系统。 - 自查一遍（落盘前）：对照设计系统过一遍——有没有用了外链 CDN / 廉价渐变 / 错位 / 间距挤 / 配色或品牌色跑偏 / 溢出 / 死宽度 / 没
</html>收尾？有毛病就改掉再落盘。 write用相对路径写到会话产物目录（如write(path="xxx.html", content=…)，自动落本会话工作目录）。- 调
mcp_pinvou3_present_artifact上产物卡，path 传绝对路径，title 用一句话说清这是什么作品。 - 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。
用户传图（可选）
- 用户 📎 传了本地图（头像/产品图）→ 把图base64 内联进 HTML（
<img src="data:image/...;base64,...">），自包含、移动不裂。 - 图片字段一律可选：没图先生成，给了图再带上重写。
