원클릭으로 Manus에서 모든 스킬 실행

visual-design

스타7

포크2

업데이트2026년 7월 24일 10:41

直出好看的网页/落地页/banner/海报/产品介绍页/数据报告/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

Pinvou

Pinvou/pinvou-agent

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

视觉设计（设计系统直出 HTML）

把用户要的视觉物料，套下面这套设计系统、自己写一份完整自包含的 HTML，写到会话产物目录后调 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_file 写到会话产物目录（.html）。
调 present_artifact(path, title) 上产物卡。
用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。

用户传图（可选）

用户 📎 传了本地图（头像/产品图）→ 把图base64 内联进 HTML（<img src="data:image/...;base64,...">），自包含、移动不裂。
图片字段一律可选：没图先生成，给了图再带上重写。

이 저장소의 다른 Skills

같은 저장소

speckit-implement

Pinvou/pinvou-agent

Execute the implementation plan by processing and executing all tasks defined in tasks.md

2026-07-247

speckit-tasks

Pinvou/pinvou-agent

Generate an actionable, dependency-ordered tasks.md for the feature based on available design artifacts.

2026-07-247

dws

Pinvou/pinvou-agent

管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报（钉钉日志模版）、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。

2026-07-247

lark-base

Pinvou/pinvou-agent

【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书多维表格（Base）操作：建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、workflow、角色权限；遇到 Base/多维表格/bitable 或 /base/ 链接时使用。文件导入转 lark-drive，认证/授权转 lark-shared。

2026-07-247

lark-calendar

Pinvou/pinvou-agent

【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书日历：管理日历日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。当用户需要查看日程安排、创建/修改会议、查询/预定会议室时使用。不负责：查询过去的视频会议记录（走 lark-vc）、待办任务（走 lark-task）。

2026-07-247

lark-doc

Pinvou/pinvou-agent

【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书云文档（Docx / Wiki 文档，v2 API）：读取和编辑飞书文档内容。当用户给出文档 URL 或 token，或需要查看、创建、编辑文档、插入或下载文档图片附件时使用。文档中嵌入的电子表格、多维表格、画板，先用本 skill 提取 token 再切到对应 skill。当用户给出 doubao.com 的 /docx/ 或 /wiki/ URL/token 时，也应直接使用本 skill；路由依据是 URL 路径模式和 token，而不是域名。不负责文档评论管理，也不负责表格或 Base 的数据操作。

2026-07-247

name	visual-design
description	直出好看的网页/落地页/banner/海报/产品介绍页/数据报告/简历/作品集等视觉物料——套一套设计系统，模型自由写自包含 HTML，颜值由规则锁死、不靠模板。用户说"做个网页/页面/落地页/banner/海报/报告页/作品集/简历"或"把这份内容做成网页版"时使用。⚠️ 不含信息检索：查天气/查行情/查股价/查数据请走对应连接器，不是本技能。
metadata	{"type":"builtin","version":"0.8.0"}

视觉设计（设计系统直出 HTML）

何时用 / 何时不用

✅ 用：网页、落地页、产品介绍页、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_file 写到会话产物目录（.html）。
调 present_artifact(path, title) 上产物卡。
用户要改（换色/改文案/改尺寸/加图）→ 拿原内容重写一版。

用户传图（可选）

用户 📎 传了本地图（头像/产品图）→ 把图base64 内联进 HTML（<img src="data:image/...;base64,...">），自包含、移动不裂。
图片字段一律可选：没图先生成，给了图再带上重写。