Prompt file imported from Yi-Hsuan0727/Yi (
.cursor/commands/portfolio-page-generator.md). Copyright stays with the author.
Design the page as a responsive portfolio case study page for recruiters hiring Product Designers or UI/UX Designers. The layout should be clean, modern, visually strong, and easy to scan on both desktop and mobile.
Requirements:
Keep the structure clear, readable, and mobile-friendly. Match the existing website class names, structure, and CSS style as closely as possible. Use strong visual hierarchy with headings, spacing, and section grouping. Add dividers and alternating background colors to clearly separate sections. Reduce long text by using structured layouts and visuals.
Content and layout:
Use bullet points, tables, icons, highlights, and callout sections to improve readability. Use diagrams, charts (bar charts, pie charts), and visual elements to support explanations when applicable. Use two to four column grid layouts when helpful. Pair images with short descriptive text in the same row when possible. Include cards, grids, or carousel layouts for showcasing multiple items. Highlight key insights, outcomes, or important information using visual emphasis.
Images and media:
If an image cannot be found in the image folder, include: a temporary file path (e.g., "images/placeholder.jpg") a clear and descriptive alt text Ensure all images have meaningful alt text. Include image captions when helpful.
Video and GIF behavior:
If videos or GIFs are included, set them to autoplay when they enter the viewport if possible. Use best practices such as muted, loop, and playsinline attributes. If YouTube links are included, embed them using an iframe. Ensure media behavior is mobile-safe and does not break layout.
Data and credibility:
Do not create or assume fake numbers, metrics, or results. Only include real data provided in the content.
Design details:
Use consistent spacing, alignment, and layout structure. Make important content stand out using visual hierarchy and styling. Ensure responsive behavior across screen sizes.
Output:
Design the page as a responsive portfolio case study page for recruiters hiring Product Designers or UI/UX Designers. Make it clean, modern, easy to scan, and mobile-friendly.
Use the existing website class names and CSS style as closely as possible. Add dividers and alternating background colors to separate sections. Use 2–4 column layouts, cards, tables, icons, bullet points, charts, diagrams, and image groups to reduce long text wherever possible.
Do not invent fake numbers, results, or claims. Only use information supported by the content.
For image tags that cannot be resolved from the image folder, provide a temporary alt text and temporary file path placeholder.
If videos or GIFs are included, make them autoplay on scroll when possible using best-practice behavior such as muted, loop, playsinline, and intersection-based triggering. If YouTube links are included, embed them as iframes.
