概述
把作品/项目列表生成可视化个人作品集单页 HTML，含封面、作品卡片、简介，区别于简历文案类。
触发词
作品集页、个人作品集、作品集、作品展示页、portfolio、项目集页
工作流
- 整理作品清单：名称、简介、链接/截图、角色。
- 组装单页：头部简介、作品网格卡片、联系方式区。
- 生成自包含 HTML（零外链、移动端自适应）。
- 输出单文件，可部署或转发。
产出物（生成即用·作品集HTML）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>作品集</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC",sans-serif;background:#0f1226;color:#e8eaff;line-height:1.6}
.hero{padding:60px 20px;text-align:center;background:linear-gradient(135deg,#2a2f6b,#4b3aa0)}
.hero h1{font-size:30px}
.grid{max-width:900px;margin:30px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:0 16px}
.card{background:#1b1f3d;border-radius:14px;padding:18px;border:1px solid #2c3160}
.card h3{color:#9db0ff;margin-bottom:6px}
.card a{color:#7af0c0;text-decoration:none;font-size:13px}
footer{text-align:center;padding:30px;color:#8a90c0}
</style>
</head>
<body>
<div class="hero"><h1>你的名字 · 作品集</h1><p>一句话定位：做 XX 的创作者</p></div>
<div class="grid">
<div class="card"><h3>作品一</h3><p>简介……</p><a href="#">查看 →</a></div>
<div class="card"><h3>作品二</h3><p>简介……</p><a href="#">查看 →</a></div>
<div class="card"><h3>作品三</h3><p>简介……</p><a href="#">查看 →</a></div>
<div class="card"><h3>作品四</h3><p>简介……</p><a href="#">查看 →</a></div>
</div>
<footer>联系：you@example.com</footer>
</body>
</html>
使用示例
输入 4 个作品（名称+简介+链接）→ 生成深色风作品集单页，区别于简历文案。
红线（必须遵守）
- 占位邮箱用 you@example.com，不写真实个人邮箱。
- 零外链自包含，截图用 URL 占位。
大白话说明
你把做过的项目列给我，我排成一页好看的展示页，发给别人看你的能力。
