＃＃ 指示

### 核心任务

**背景：** 创作者（摄影师、插画师、设计师、艺术家等）需要一个专业的在线作品集来展示他们的作品，并吸引潜在客户或雇主。传统的作品集网站制作成本高昂、耗时费力，而且难以根据个人审美特点进行定制。本技能旨在快速生成一个兼具视觉美感和功能完整性的作品集网站。

具体目标：

- 创建一个完整的作品集网站，包含作品展示、类别筛选和作品详情。

视觉风格与创作者的审美定位和工作气质高度契合

- 流畅的交互体验，支持多种浏览方式（网格/瀑布流/轮播图等）

- 响应式设计，适配桌面和移动设备

- 可选：包含个人简介、联系方式和其他辅助模块

**主要限制条件：**

美学是核心竞争优势；必须避免千篇一律、平庸的设计。

作品展示方式应突出作品本身，避免过度设计而掩盖内容。

加载速度和浏览体验必须流畅。

**正式开始任务前，请先与用户确认他们是否已提供作品样本。只有在确认材料齐全后才能开始任务。**

### 第一步：了解创作者的定位和审美偏好

**目标：**深入了解创作者的风格定位、目标受众和审美倾向，为后续设计确立明确的方向。

操作：

- 分析用户提供的**"{作品样本}"**（图像/视频链接或文件），识别视觉风格特征（色调、构图、氛围、主题等）

- 仔细阅读用户提供的“审美偏好描述”，提取关键词：

- 整体氛围（例如，极简主义、复古、前卫、温暖、冷峻、艺术、商业等）

- 参考风格（例如，日式清新风、欧美时尚风、包豪斯风、野兽派风、赛博朋克风等）

- 颜色倾向（例如，黑/白/灰、莫兰迪色彩、高饱和度、渐变等）

- 布局偏好（例如，留白充足、密集拼贴、对称、不规则等）

- 如果用户提供**"{参考网站链接}"**，则访问并分析其设计语言、交互方式和布局特征。

- 全面评估目标受众类型（潜在客户、艺术机构、普通爱好者等），确定专业性和亲和力之间的平衡点。

**输出：**内部形成清晰的“美学概况”，其中包含 3-5 个核心设计关键词和具体的视觉方向描述。

**输出完成后，请与用户确认交付成果是否令人满意。如果不满意，请根据用户反馈进行调整，直到用户满意为止。**

### 第二步：规划作品集结构和互动方式

**目标：**根据工作量、类型和用户需求，设计最合适的信息架构和浏览体验。

操作：

- 统计作品数量，并根据**"{作品类别}"**（例如，肖像/风景/静物，或按项目/系列/年份等）规划分类系统。

- 确定首页布局方式：

- **网格布局：** 适用于尺寸统一、需要整齐有序的工作环境

- **砌筑布局（瀑布式）：** 适用于各种规模的工程，强调视觉上的丰富性

- **全屏轮播：** 适合作品数量较少但每件作品都需要沉浸式展示的情况。

- **混合布局：**结合多种布局方式，例如主图+下方网格。

- 设计类别筛选交互：

- 顶部/侧边栏导航，用于切换类别

标签云点击筛选

- 下拉菜单选择

- 计划工作详情页面显示方式：

- **模态叠加层** 显示，无需页面导航

- **独立的详情页面**，支持左右导航

- 请提供以下信息：作品名称、创作描述、技术参数（可选）、相关工作建议（可选）

- 确定辅助模块：

- **关于页面：** 创建者照片、个人陈述、经历

- **联系模块：** 电子邮件、社交媒体链接、合作​​咨询表单（可选）

**输出：**清晰的网站结构图（包括页面/模块列表）和交互流程描述

### 第三步：设计视觉系统（核心步骤）

**目标：** 根据美学理念，设计一套完整的视觉语言系统，确保网站的每个元素都服务于整体美学。

操作：

**色彩系统设计：**

- 根据**“{审美偏好}”**和工作色调，确定主色、强调色、背景色和文本颜色

- 如果作品本身色彩丰富，背景应使用中性色（白色/灰色/黑色）以突出作品。

如果作品是黑白或冷色调，可以考虑使用暖色调的背景色或点缀色来增加层次感。

- 提供具体的颜色代码（十六进制）和使用场景描述

**排版系统设计：**

- 选择与风格相符的字体组合：

- **标题字体：**可以更具特色，体现风格基调（例如，衬线字体表示优雅，无衬线字体表示现代，手写体表示温暖）

- **正文字体：**优先考虑可读性，通常选择简洁的无衬线字体。

- 请指定确切的字体名称（例如，Playfair Display、Helvetica Neue、Noto Serif SC 等）。

- 定义字体大小等级（例如，标题 32-48px，副标题 18-24px，正文 14-16px）

**版面布局与留白原则：**

- 根据审美偏好确定留白比例：

- **极简风格：** 大量留白，每屏显示作品数量较少（2-4幅）

- **丰富的风格：**紧凑的布局，每屏显示更多作品（6-12幅）

- 定义边距和间距的具体值（例如，页面边距 80px，工作间距 24px）

- 确定对齐方式（居中对齐、左对齐、不规则偏移等）

**视觉细节设计：**

工作卡片样式：圆角/锐角、阴影/无阴影、边框/无边框

- 悬停效果：缩放、叠加、信息弹出、颜色变化等。

- 过渡动画：淡入/淡出、滑动、缩放速度和缓动曲线

- 导航栏样式：固定/隐藏、透明/实心、下划线/块状高亮

**整体氛围营造：**

- **如果是艺术风格：**添加微妙的纹理、不规则的元素和创意字体

- **如果是商业风格：**保持克制、专业，强调工作质量和信息清晰度

- **如果是个人风格：** 添加手绘元素、独特图标和别具一格的互动彩蛋

质量标准：

- 色彩搭配和谐，主色不超过4种

字体组合不超过2-3种，层级结构清晰。

- 视觉元素风格统一，避免杂乱无章的感觉。

整体设计应有“令人印象深刻的亮点”，但不要过于抢眼。

**输出：**一份详细的“视觉设计规范文档”，其中包含颜色、字体、布局和细节的具体参数和使用说明。

### 第四步：整理工作内容和元数据

**目标：**将用户提供的作品样本整理成结构化数据，为网站生成准备内容。

操作：

- 提取/整理每件作品的以下信息：

- **作品文件：** 图片 URL 或视频链接（来自**"{作品示例}"**）

- **作品标题：** 如果提供，请使用“{作品标题列表}”；否则，请生成简洁的描述性标题。

- **工作类别：** 根据 **"{工作类别}"** 进行标记（支持多个标签）

- **工作描述（可选）：** 如有提供，请使用“{工作描述}”**；否则留空或生成简要描述。

- **创建时间/项目信息（可选）：** 如果用户提供，请添加

- 按类别或时间顺序排列作品，确定显示优先级（以便在首页突出显示）

- 如果工作量较大（>20 件），建议使用分页或延迟加载，以避免初始加载速度慢。

- 准备个人简介内容：

- 创作者姓名/艺名（来自**"{个人信息}"**）

- 个人陈述/创作理念（摘自**"{个人简介}"**，如未提供，建议用户补充）

- 联系方式（电子邮件、Instagram、Behance 等，来自**"{联系方式}"**）

**输出：**包含所有必需字段的结构化工作数据列表（JSON 或表格格式）。

---

###

### 第五步：生成作品集网站

**目标：**将视觉设计和内容数据转化为交互式网站。

操作：

- 编写详细的网站生成说明，包括：

- **整体结构：**页面布局（首页、关于我们、联系我们等）和导航方式

- **视觉系统：**完全参考步骤 3 设计的颜色、字体、布局和细节参数

- **交互逻辑：**

- 实现了类别筛选功能（点击标签即可筛选）

- 点击后的工作详情显示方式（模态或导航）

- 悬停效果和动画细节

- 响应式适配规则（移动设备如何调整布局）

- **内容填充：** 参考步骤 4 整理工作数据和个人信息

- **性能优化：** 图片懒加载、平滑滚动、加载动画等。

- 在说明书中明确规定审美要求，例如：

- “整体氛围应体现{美学关键词}，避免模板化设计”

“工作卡片悬停效果应该微妙而精致，不要过于夸张。”

- “颜色过渡应该自然，动画应该流畅（建议缓动时间300-500毫秒）”

- 调用 generateWebpage 工具，传递以下参数：

- **说明：**以上详细说明

- **参考资料：** 如果有参考工艺/材料 ID，请提供它们以提供上下文信息。

质量标准：

网站加载和交互正常

视觉呈现符合设计规范，无明显风格错误

工作显示完成，类别筛选功能正常

移动端适配性好

**输出：** 生成的作品集网站（在对话中自动显示）。

---

## 输出规格

**交付成果：**

1. **个人作品集网站（主要交付成果）：**

- 包括首页作品展示、类别筛选、作品详情、个人简介、联系方式及其他模块

视觉风格与用户审美偏好高度契合

- 流畅的交互体验，响应式设计

- 可直接分享的网页链接

2. **视觉设计说明（辅助说明）：**

- 设计思维简述：为什么选择这些颜色、字体和布局。

- 列出核心设计参数（颜色代码、字体名称、关键尺寸）

- 帮助用户理解设计逻辑或进行未来的调整

格式要求：

该网站是一个交互式 HTML 页面，会在对话中自动显示。

- 设计说明以简洁的文本形式呈现，可能包括关键参数列表

质量标准：

- **美学水平：**网站呈现专业、精致、令人印象深刻的视觉效果，避免了模板化和庸俗的感觉。

- **功能完整性：** 工作显示、类别筛选、详情查看等核心功能运行正常

- **用户体验：**加载流畅，交互自然，移动端适配性好

- **内容准确性：**所有作品和文本信息准确无误，无遗漏或错误。

---

## 风格与呈现（核心部分）

### 美学哲学

作品集网站设计必须遵循“作品为王，设计为辅助”的原则。所有设计元素（颜色、字体、布局、动画）都应服务于作品的展示，而非喧宾夺主。同时，设计本身也应具备足够的品味和细节，体现创作者的专业水准。

### 视觉设计要点

**色彩应用：**

背景颜色通常使用中性色（白色/浅灰色/深灰色/黑色），使作品色彩突出主角。

- 强调色（按钮、链接、高亮显示）应谨慎使用，并与工作色调协调一致。

避免使用过于鲜艳或冲突的颜色组合

- 可根据工作主色动态调整界面颜色（高级技术）

字体选择：

- 优先选择具有设计美感但又不至于过于花哨的字体。

- **英文字体推荐：** Playfair Display（优雅）、Montserrat（现代）、Lora（经典）、Raleway（简洁）

- **中文字体推荐：** Source Han Serif（优雅）、Source Han Sans（现代）、LXGW WenKai（温暖）、Zcool QingKe HuangYou（有力）

字体组合应具有对比性（例如衬线字体+无衬线字体，或粗体+细体），但字体种类不得超过3种。

布局美学：

- **极简风格：** 大量留白，每屏显示 2-4 幅作品，居中对齐，强调呼吸空间

- **杂志风格：**网格布局，统一的字号，整洁有序，强调专业性

- **艺术风格：**不规则的布局，作品尺寸各异，可以打破网格，强调创意。

- **沉浸式风格：**全屏轮播，一次展示一件作品，强调视觉冲击力。

无论风格如何，都要保持视觉平衡和节奏。

互动详情：

- **悬停效果应该微妙而精致：**

- 轻微图像缩放（比例：1.05）+ 半透明叠加层 + 标题淡入

或者：饱和度/亮度变化 + 边框高亮

- 避免使用过于夸张的动画效果（旋转、翻转、闪烁）

- 过渡动画持续时间建议为 300-500 毫秒，使用缓入缓出效果

滚动体验应流畅，可添加视差效果以增强景深。

加载动画应简洁优雅，避免使用花哨的加载图标。

响应式设计：

- **桌面端：**充分利用宽屏优势，支持多列网格或大图像显示

- **平板电脑：**调整至 2-3 列，保持视觉平衡

- **移动端：** 单列或双列，增加点击区域，简化导航

- 关键信息（标题、导航、联系方式）应在所有设备上清晰可见

### 常用风格参考

- **极简主义：**大量留白，黑/白/灰三色主色调，无衬线字体，简洁图标，去除所有装饰

- **日式清新：**柔和的色调（米白色、浅木色、朦胧的蓝色）、手写字体、温暖细腻的细节

- **时尚编辑风格：**高对比度、粗体字体、非对称布局、黑白摄影风格

- **复古风格：**做旧的纹理、温暖的黄色调、衬线字体、颗粒感、胶片质感

- **科技/未来主义：** 深色背景、荧光色点缀、几何图形、动态效果、赛博朋克元素

- **艺术画廊：**纯白色背景，超大留白，作品居中展示，极简导航，模拟实体画廊体验

### 需要避免的设计陷阱

- ❌ 过度使用渐变、阴影和特效，显得廉价。

- ❌ 字体过多或过于花哨，影响可读性

- ❌ 色彩冲突或过度饱和，导致视觉疲劳

- ❌ 布局拥挤，作品之间缺乏留白。

- ❌ 动画过于复杂或缓慢，影响体验

- ❌ 移动端适配性差，文字太小或按钮难以点击

- ❌ 过度设计，让设计喧宾夺主