visual-design
直出好看的网页/落地页/banner/海报/产品介绍页/数据报告/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
git clone --depth 1 https://github.com/Pinvou/pinvou-agent /tmp/visual-design && cp -r /tmp/visual-design/pinvou3-app/src-tauri/resources/common/bundle/builtin-skills/visual-design ~/.claude/skills/visual-designSKILL.md
# 视觉设计（设计系统直出 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. `File(action="write")` 用**相对路径**写到会话产物目录（如 `File(action="write", path="xxx.html", content=…)`，自动落本会话工作目录）。 5. **调 `mcp_pinvou3_present_artifact`** 上产物卡，**path 传绝对路径**，title 用一句话说清这是什么作品。 6. 用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。 ## 用户传图（可选） - 用户 📎 传了本地图（头像/产品图）→ 把图**base64 内联**进 HTML（`<img src="data:image/...;base64,...">`），自包含、移动不裂。 - 图片字段一律可选：没图先生成，给了图再带上重写。
【何时用:仅当用户明确指向钉钉/DingTalk(钉钉文档、钉钉日程等)时使用;泛指做文档/表格/待办/审批默认走本地工具,不要误用钉钉】用 dws CLI 管理钉钉:AI表格/AI搜问(找人首选)/目标管理(Agoal)/组织大脑/日历/通讯录/群聊与机器人消息/待办/审批/考勤/日志(日报周报)/DING消息/钉钉文档/云盘/Markdown文件/AI听记/邮箱/在线电子表格(axls)/知识库/白板/开放平台文档/个人IM与OA事件订阅。用户要求操作上述钉钉产品时使用。
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书多维表格（Base）操作：建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、应用模式（BaseApp/AppMode 页面与组件）、Workspace 目录、workflow、角色权限；遇到 Base/多维表格/bitable、BaseApp/AppMode 或 /app/ 链接时使用。BaseApp 不走 lark-apps；文件导入转 lark-drive，认证/授权转 lark-shared。
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书日历:管理日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。不负责:查询视频会议记录(本 skill 只覆盖日程;lark-vc 技能未随包收录,可 CLI 直连,见意图路由)、待办任务(走 lark-task)。
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书云文档(Docx/Wiki)与思维笔记内容操作:读取、创建、编辑文档,插入或下载图片附件,查询或回滚历史版本。用户给出文档 URL/token(含 doubao.com 的 /docx/、/wiki/)时使用,按 URL 路径/token 而非域名路由;内嵌表格、多维表格、画板先提取 token 再切对应 skill。文档评论走 lark-drive;表格或 Base 内部数据操作不在本 skill。
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书云空间:管理 Drive 文件/文件夹,上传下载、复制移动删除、评论、权限、密级标签、版本、改标题,导入 Word/Markdown/Excel/CSV/PPTX/.base 为在线文档;doubao.com 云空间 URL 同走本 skill,不回退 WebFetch。不负责:文档内容编辑(lark-doc)、表格/Base 表内数据(lark-sheets/lark-base)、知识库节点(lark-wiki)。
【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书即时通讯：收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片（Interactive Card）与卡片按钮回调（card.action.trigger）。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索或创建群聊/话题群、管理标记数据、Feed 置顶与标签数据、处理卡片回调时使用。
【何时用:仅在其他 lark-* 技能遇到认证/授权/身份/配置问题时,或首次使用 lark-cli 时;泛指需求默认走本地工具】lark-cli 共享规则:首次配置(config init)、认证登录(auth login --domain/--scope,split-flow)、登录态查询与撤销(auth status/logout/whoami)、--as user/bot 身份切换、权限不足与 missing_scope 处理、JSON 输出契约与 _notice、update 更新、高风险操作审批(exit 10)。
【何时用:仅当用户明确指向飞书/Lark 电子表格;泛指做表格默认走本地工具】创建/操作飞书电子表格:工作表与行列结构、读写单元格(值/公式/样式/批注/图片)、查找替换、批量更新、图表/透视表/条件格式/筛选/迷你图/浮动图片。按名称搜索云空间表格文件改用 lark-drive 的 drive +search。doubao.com 的 /sheets/ URL 也走本 skill。不适用本地 Excel。