Template

Portfolio di studio sobrio

Un portfolio bianco e silenzioso dove parla solo il lavoro: testo compatto, molto spazio, anteprime dei progetti in una griglia calma.

Settori: design studio
Colori: whiteblackgrey
Stili: minimaleditorialwhite space
Categoria: portfoliowebsite

Vedi originale

REFERENCE
- Gallery page: https://magpui.com/en/i/restrained-studio-portfolio-99c7e2
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/restrained-studio-portfolio-99c7e2/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/restrained-studio-portfolio-99c7e2/clip.mp4
- Original post: https://x.com/dmcgco/status/2110780662399602912 by @dmcgco
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.

BUILD
A minimal design-studio portfolio: a short statement at the top, then client projects in a calm grid of large thumbnails with small captions; each project opens on its own page.

DESIGN SYSTEM
- Background #FFFFFF, text #111, captions 13px #777.
- 12-column grid, 24px gutters, thumbnails 4:3 with no radius.
- Statement 28px weight 400, max 640px.

MOTION
- Thumbnails fade in on scroll, 500ms, opacity + 8px translate, 40ms stagger.
- Hover: image scales 1.02 over 400ms; caption underline grows.

SECTIONS
- Header with name and two links.
- Statement.
- Project grid.
- Footer with contact.

IMPLEMENTATION
- Plain CSS grid + IntersectionObserver for the reveal; lazy-load images.
- prefers-reduced-motion: skip the animation and show the end state.

ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.

SUCCESS CHECK
- Nothing moves until it enters the viewport.
- Grid stays aligned at every breakpoint.
- Images reserve their aspect ratio (no layout shift).

1
Installa la skill
Lancia questi comandi una volta in Claude Code. La skill dà all'agente il mestiere per questo tipo di pezzo. Con altri agenti, segui le istruzioni nella pagina della skill.
frontend-design
```
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills
```
2
Incolla il prompt nel tuo agente
Premi Copia prompt qui sopra, apri il progetto nell'agente e incollalo. Il prompt contiene i link ai fotogrammi originali, così l'agente li guarda prima di costruire.
Claude Code Codex
3
Confronta con l'originale
Mettili uno accanto all'altro. Se qualcosa non torna, di' all'agente cosa esattamente: tempi, dimensioni, colori o spazi.

Installa la skill

Incolla il prompt nel tuo agente

Confronta con l'originale