Back 中文 CC Prompt Galaxy
{"type":"desktop browser screenshot of a minimalist personal portfolio website homepage design draft","style"… - AI prompt reference from CC Prompt Galaxy

Minimalist Portfolio Website Browser Mockup AI Image Prompt

Prompt

Type: desktop browser screenshot of a minimalist personal portfolio website homepage design draft. Style: Swiss grid system, brutalist minimalism, black and white palette, faint technical blueprint guides, thin gray borders, lots of whitespace, monospace micro-labels mixed with bold geometric sans-serif display type. Canvas: aspect ratio wide 16:9, shown inside a Chrome-like browser window at localhost:5173 with visible tabs, bookmarks bar, and address bar, background white. Brand: logo small square outlined mark with initials NRS, name {argument name='character name' default='Naufaldi Rafif S.'}. Header: position top fixed website navbar below browser chrome, height about 64px, left brand NRS logo followed by Naufaldi Rafif S., navigation 6 items: HOME, BLOG, PROJECTS, ABOUT, SPEAKER, OTHER with down chevron, active item HOME in a thin outlined rectangular tab. Actions 3 items: Contact white outlined button, Download CV black filled button with arrow, small square sun/theme icon button. Layout: main container large centered rectangular grid area with faint vertical and horizontal guide lines, coordinate labels, and thin border. Technical annotations 7 labels: X-1440, X-768, X-0, X-1024, X-768, X-480, Y-0 / Y-360 / Y-720 guide markings. Sections: 01 // INTRO - left large content column, huge boxed headline reading {argument name='headline text' default='NAUFALDI RAFIF S.'} split across two lines, black all-caps extra-bold type. professional summary - below headline in left column, subtitle {argument name='role title' default='Software Engineer & Mentor'}, specialty tags PRODUCT SYSTEMS | BACKEND FOUNDATIONS | ENGINEERING MENTORSHIP, paragraph {argument name='bio paragraph' default='My foundation is frontend, but the direction is broader: backend ownership, product architecture, and end-to-end software delivery.'}. 02 // ROUTES - right sidebar separated by a vertical divider, items: 01 View projects, black active card with code icon and right arrow; 02 Get in touch, white row with right arrow; 03 Download CV, white row with right arrow. bottom status strip - bottom of bordered container, items: OPEN TO WORK, 7 YRS EXPERIENCE, 1000+ MENTEES, BEKASI, INDONESIA. Footer meta: right side of bottom strip shows BUILD:2026 and PRD:01. Typography: headline massive uppercase bold sans-serif, tight spacing; body clean readable sans-serif; microcopy small uppercase monospace with wide letter spacing. Color palette: primary #0b0d0e near-black, background #ffffff, border #e8e8e8 light gray, guides #edf2ef very faint green-gray, accent thin green line on active route card and top grid guide. Composition notes: Make it look like a polished web design system mockup generated for implementation, not a marketing landing page; emphasize precise alignment, grid overlays, coordinate labels, and modern developer portfolio aesthetics.

AI Image Content Analysis

Content: Structure: browser screenshot → brand & header nav → grid layout with coordinate annotations → two sections (Intro personal info + Routes right sidebar) → bottom status bar & footer. Style: Swiss grid + brutalist minimalism, black/white/gray with faint green-gray guides. Emphasizes precise alignment and developer aesthetics.

Pros: 1 Extremely detailed (focus, color codes, guide lines) for producible mockup. 2 Clear uniform style to generate minimalist portfolio reliably.

Cons: 1 Over-specification may limit generative creativity. 2 Specific browser chrome/tab elements may not suit all contexts.

Reference image: No obvious reference-image dependency

Author
λL-D1 | AI for Buzzer 🍉
Type
Image
Aspect ratio
3:2
Size
1200 × 753
Added
2026-06-04

Source materials are collected from publicly accessible web pages. Contact us if a rights issue needs review. Copyright & Privacy