## Instructions

### Core Mission

**Background:** Creators (photographers, illustrators, designers, artists, etc.) need a professional online portfolio to showcase their work and attract potential clients or employers. Traditional portfolio websites are expensive, time-consuming to create, and difficult to customize to reflect personal aesthetic characteristics. This Skill aims to rapidly generate a portfolio website that combines visual beauty with functional completeness.

**Specific Goals:**

- Generate a complete portfolio website with work display, category filtering, and work details

- Visual style highly aligned with the creator's aesthetic positioning and work temperament

- Smooth interactive experience, supporting multiple browsing methods (grid/masonry/carousel, etc.)

- Responsive design, adapted for desktop and mobile

- Optional: Include personal bio, contact information, and other auxiliary modules

**Key Constraints:**

- Aesthetics is the core competitive advantage; must avoid templated, mediocre design

- Work presentation methods should highlight the work itself, avoiding over-design that overshadows content

- Loading speed and browsing experience must be smooth

**Before formally starting the task, first confirm with the user whether they have provided their work samples. Only proceed with the task after confirming materials are available.**

### Step 1: Understand Creator Positioning & Aesthetic Preferences

**Goal:** Deeply understand the creator's style positioning, target audience, and aesthetic tendencies to establish a clear direction for subsequent design.

**Actions:**

- Analyze the user-provided **"{work samples}"** (image/video links or files), identifying visual style characteristics (color tone, composition, mood, subject matter, etc.)

- Carefully read the user-provided **"{aesthetic preference description}"**, extracting keywords:

- Overall atmosphere (e.g., minimalist, vintage, avant-garde, warm, cool, artistic, commercial, etc.)

- Reference styles (e.g., Japanese fresh, European/American fashion, Bauhaus, Fauvism, cyberpunk, etc.)

- Color tendencies (e.g., black/white/gray, Morandi colors, high saturation, gradients, etc.)

- Layout preferences (e.g., ample whitespace, dense collage, symmetrical, irregular, etc.)

- If the user provides **"{reference website links}"**, visit and analyze their design language, interaction methods, and layout characteristics

- Comprehensively assess target audience type (potential clients, art institutions, general appreciators, etc.), determining the balance point between professionalism and approachability

**Output:** Internally form a clear "aesthetic profile" containing 3-5 core design keywords and specific visual direction descriptions.

**After completing the output, confirm with the user whether the deliverable is satisfactory. If not satisfied, readjust based on user feedback until the user is satisfied.**

### Step 2: Plan Portfolio Structure & Interaction Methods

**Goal:** Design the most appropriate information architecture and browsing experience based on work quantity, type, and user needs.

**Actions:**

- Count the number of works, and plan the classification system according to **"{work categories}"** (e.g., portrait/landscape/still life, or by project/series/year, etc.)

- Determine homepage layout method:

- **Grid Layout:** Suitable for uniform work sizes, requiring neat orderliness

- **Masonry Layout (Waterfall):** Suitable for varied work sizes, emphasizing visual richness

- **Fullscreen Carousel:** Suitable for fewer works, each requiring immersive display

- **Hybrid Layout:** Combining multiple methods, such as hero image + grid below

- Design category filtering interaction:

- Top/sidebar navigation to switch categories

- Tag cloud click filtering

- Dropdown menu selection

- Plan work detail page display method:

- **Modal overlay** display without page navigation

- **Separate detail page** with left/right navigation support

- Include information: work title, creation description, technical parameters (optional), related work recommendations (optional)

- Determine auxiliary modules:

- **About page:** Creator photo, personal statement, experience

- **Contact module:** Email, social media links, collaboration inquiry form (optional)

**Output:** Clear website structure diagram (including page/module list) and interaction flow descriptio

### Step 3: Design Visual System (Core Step)

**Goal:** Based on the aesthetic profile, design a complete visual language system ensuring every element of the website serves the overall aesthetics.

**Actions:**

**Color System Design:**

- Based on **"{aesthetic preferences}"** and work color tones, determine primary color, accent color, background color, and text color

- If the work itself is colorful, background should use neutral colors (white/gray/black) to highlight work

- If work is black/white or cool-toned, consider warm background colors or accent colors to add depth

- Provide specific color codes (Hex) and usage scenario descriptions

**Typography System Design:**

- Choose font combinations matching the style:

- **Heading Font:** Can be more distinctive, reflecting style tone (e.g., serif shows elegance, sans-serif shows modernity, handwritten shows warmth)

- **Body Font:** Prioritize readability, usually choose clean sans-serif

- Specify exact font names (e.g., Playfair Display, Helvetica Neue, Noto Serif SC, etc.)

- Define font size hierarchy (e.g., titles 32-48px, subtitles 18-24px, body 14-16px)

**Layout & Whitespace Principles:**

- Determine whitespace ratio based on aesthetic preferences:

- **Minimalist style:** Abundant whitespace, fewer works per screen (2-4)

- **Rich style:** Compact arrangement, more works per screen (6-12)

- Define specific values for margins and spacing (e.g., page margin 80px, work spacing 24px)

- Determine alignment method (centered, left-aligned, irregular offset, etc.)

**Visual Detail Design:**

- Work card style: rounded/sharp corners, shadow/no shadow, border/no border

- Hover effects: zoom, overlay, information emergence, color change, etc.

- Transition animations: fade in/out, slide, scale speed and easing curves

- Navigation bar style: fixed/hidden, transparent/solid, underline/block highlight

**Overall Atmosphere Creation:**

- **If artistic style:** Add subtle textures, irregular elements, creative typography

- **If commercial style:** Maintain restraint, professionalism, emphasizing work quality and information clarity

- **If personal style:** Add hand-drawn elements, unique icons, distinctive interactive easter eggs

**Quality Standards:**

- Harmonious color matching, no more than 4 main colors

- Font combinations no more than 2-3 types, clear hierarchy

- Visual elements unified in style, avoiding patchwork feel

- Overall design should have "memorable points" but not overly steal the show

**Output:** A detailed "Visual Design Specification Document" containing specific parameters and usage instructions for colors, fonts, layout, and details.

### Step 4: Organize Work Content & Metadata

**Goal:** Organize user-provided work samples into structured data, preparing content for website generation.

**Actions:**

- Extract/organize the following information for each work:

- **Work file:** Image URL or video link (from **"{work samples}"**)

- **Work title:** Use **"{work title list}"** if provided, otherwise generate concise descriptive titles

- **Work category:** Label according to **"{work categories}"** (supports multiple tags)

- **Work description (optional):** Use **"{work description}"** if provided, otherwise leave blank or generate brief description

- **Creation time/project information (optional):** Add if user provides

- Arrange works by category or chronological order, determining display priority (which works to highlight on homepage)

- If work quantity is large (>20 pieces), suggest pagination or lazy loading to avoid slow initial loading

- Prepare personal bio content:

- Creator name/stage name (from **"{personal information}"**)

- Personal statement/creative philosophy (from **"{personal bio}"**, suggest user supplement if not provided)

- Contact information (email, Instagram, Behance, etc., from **"{contact information}"**)

**Output:** Structured work data list (JSON or table format) containing all required fields.

---

###

### Step 5: Generate Portfolio Website

**Goal:** Transform visual design and content data into an interactive website.

**Actions:**

- Write detailed website generation instruction, including:

- **Overall structure:** Page layout (homepage, About, Contact, etc.) and navigation method

- **Visual system:** Fully reference Step 3 designed color, font, layout, detail parameters

- **Interaction logic:**

- Category filtering implementation (click tags to filter works)

- Work detail display method after clicking (modal or navigation)

- Hover effects and animation details

- Responsive adaptation rules (how mobile adjusts layout)

- **Content population:** Reference Step 4 organized work data and personal information

- **Performance optimization:** Image lazy loading, smooth scrolling, loading animations, etc.

- Clearly specify aesthetic requirements in instruction, for example:

- "Overall atmosphere should embody {aesthetic keywords}, avoiding templated design"

- "Work card hover effects should be subtle and refined, not overly exaggerated"

- "Color transitions should be natural, animations should be smooth (suggest 300-500ms easing)"

- Call generateWebpage tool, passing:

- **instruction:** Above detailed instructions

- **references:** If there are reference craft/material IDs, pass them to provide context

**Quality Standards:**

- Website loads and interacts normally

- Visual presentation conforms to design specifications, no obvious style errors

- Work display complete, category filtering functions normally

- Mobile adaptation good

**Output:** Generated portfolio website (automatically displayed in conversation).

---

## Output Specifications

**Deliverables:**

1. **Personal Portfolio Website (Main Deliverable):**

- Includes homepage work display, category filtering, work details, personal bio, contact information, and other modules

- Visual style highly aligned with user aesthetic preferences

- Smooth interaction, responsive design

- Directly shareable webpage link

2. **Visual Design Explanation (Auxiliary):**

- Brief explanation of design thinking: why these colors, fonts, layouts were chosen

- List core design parameters (color codes, font names, key dimensions)

- Helps users understand design logic or make future adjustments

**Format Requirements:**

- Website is an interactive HTML page, automatically displayed in conversation

- Design explanation presented in concise text format, may include key parameter list

**Quality Standards:**

- **Aesthetic level:** Website presents professional, refined, memorable visual effects, avoiding templated and mediocre feel

- **Functional completeness:** Core functions like work display, category filtering, detail viewing operate normally

- **User experience:** Smooth loading, natural interaction, good mobile adaptation

- **Content accuracy:** All works and text information accurate without omissions or errors

---

## Style & Presentation (Core Section)

### Aesthetic Philosophy

Portfolio website design must follow the principle of "work is king, design is auxiliary." All design elements (color, font, layout, animation) should serve the presentation of work, not overshadow it. Meanwhile, the design itself should have sufficient taste and detail, reflecting the creator's professional standards.

### Visual Design Points

**Color Application:**

- Background colors typically use neutral colors (white/light gray/dark gray/black), making work colors the protagonist

- Accent colors (buttons, links, highlights) should be used restrainedly, harmonizing with work color tones

- Avoid overly bright or conflicting color combinations

- Can dynamically adjust interface colors based on work primary colors (advanced technique)

**Font Selection:**

- Prioritize fonts with design sense but not overly ostentatious

- **English font recommendations:** Playfair Display (elegant), Montserrat (modern), Lora (classic), Raleway (clean)

- **Chinese font recommendations:** Source Han Serif (elegant), Source Han Sans (modern), LXGW WenKai (warm), Zcool QingKe HuangYou (powerful)

- Font combinations should have contrast (serif + sans-serif, or bold + thin), but no more than 3 types

**Layout Aesthetics:**

- **Minimalist style:** Abundant whitespace, 2-4 works per screen, center-aligned, emphasizing breathing space

- **Magazine style:** Grid layout, uniform work sizes, neat and orderly, emphasizing professionalism

- **Artistic style:** Irregular layout, varied work sizes, can break grid, emphasizing creativity

- **Immersive style:** Fullscreen carousel, display one work at a time, emphasizing impact

- Regardless of style, maintain visual balance and rhythm

**Interaction Details:**

- **Hover effects should be subtle and refined:**

- Slight image zoom (scale: 1.05) + semi-transparent overlay + title fade-in

- Or: saturation/brightness change + border highlight

- Avoid overly exaggerated animations (rotation, flip, flashing)

- Transition animation duration suggested 300-500ms, using ease-in-out easing

- Scrolling experience should be smooth, can add parallax effects for depth

- Loading animations should be simple and elegant, avoiding flashy loading icons

**Responsive Design:**

- **Desktop:** Fully utilize widescreen advantages, multi-column grid or large image display

- **Tablet:** Adjust to 2-3 columns, maintaining visual balance

- **Mobile:** Single or double column, increase tap areas, simplify navigation

- Key information (title, navigation, contact) should be clearly visible on all devices

### Common Style References

- **Minimalism:** Abundant whitespace, black/white/gray primary colors, sans-serif fonts, simple icons, remove all decoration

- **Japanese Fresh:** Soft tones (off-white, light wood, hazy blue), handwritten fonts, warm delicate details

- **Fashion Editorial:** High contrast, bold fonts, asymmetric layout, black and white photography style

- **Vintage:** Aged textures, warm yellow tones, serif fonts, grain, film quality

- **Tech/Futuristic:** Dark backgrounds, fluorescent accent colors, geometric shapes, dynamic effects, cyberpunk elements

- **Art Gallery:** Pure white background, ultra-large whitespace, centered work display, minimal navigation, simulating physical gallery experience

### Design Pitfalls to Avoid

- ❌ Overuse of gradients, shadows, effects, appearing cheap

- ❌ Too many or overly fancy fonts, affecting readability

- ❌ Color conflicts or excessive saturation, visual fatigue

- ❌ Crowded layout, lack of breathing space between works

- ❌ Animations too complex or slow, affecting experience

- ❌ Poor mobile adaptation, text too small or buttons hard to tap

- ❌ Over-design, letting design steal the show from work