Playroom Product Designer Portfolio Template

A public portfolio for one product designer, set in Geist with an Instrument Serif italic on near-white paper. The owner’s name sits in a dashed selection frame, like a layer on a design canvas, above a sticky Work, Play, About, and Writing tab bar. Each card on the Work wall runs a small demo of its product on a loop, built from real React components: an agent filling in a layout, a class scheduler, and a medication reminder. Hover a card to pause it and try the product yourself. Play holds seven small experiments you can use in place, such as nested corner radii, smart guides, and a contrast finder, and Writing has three short essays. Case studies give the client, year, role, and team up front, then the problem, decisions, and outcome, with live demos, images, video, before and after sliders, and metrics. About lists services, experience, and clients with a CV download, and the contact form saves each message to the database and emails you once you set your address. There are no accounts or admin screens: projects and essays are files you change by asking the agent. Includes 5 fictional projects. Built with Layerwise, React, and TanStack Start.

Use Playroom for a product or UX designer who builds what they design and wants visitors to try the work. In the live demo, hover a card on the Work wall to pause its loop and use the product, then open Play. Mina Okafor and every client are fictional, so replace them before you publish.

• A sticky Work, Play, About, and Writing tab bar, a two-column Work wall where each card runs a live demo of its product, and case studies with the client, role, team, problem, decisions, and outcome up front.
• A Play wall of seven experiments you can use in place, three essays in Writing, an About page with services, experience, clients, and a CV download, and a contact form with a honeypot and a rate limit.
• Five fictional projects whose screens are real React components, a script that makes 800, 1600, and 2880 px WebP images with blur placeholders, and a README that explains how to add a project or swap a demo for an image or video.

The template opens as a local project you can change through the conversation or the code editor. You can inspect the source for this template version before choosing how to extend it.

1. 1
   Install Layerwise and sign in. Choose Use this template, select a team and project name in the app, then choose Copy to Layerwise. Wait for setup and the local preview to finish.
2. 2
   Start in src/portfolio.config.ts for your name, intro, bio, social links, fonts, colors, and ownerEmail. Each project is one file in src/content/work, with its images, theme color, and optional live demo in a folder beside it. Essays live in src/content/writing, and About lives in src/content/about.ts. New images should go through pnpm add-images. You can do all of this by asking the agent and attaching your work.
3. 3
   Ask for the change in the project conversation. This prompt is a starting point; adjust it to describe your intended result.

   Make this portfolio mine: I’m Priya Shah, a product designer in Austin who prototypes in React. Remove the five sample projects and add one case study from the screens I attached, using pnpm add-images, with the first image as the cover. Keep the tab bar, the selection frame, and the card wall, and show the cover on its card until I add a live demo. Check Work, Play, and the new case study at phone width.

• On the home page at desktop width, hover a Work card and confirm its demo pauses and responds to clicks, then move away and confirm the loop resumes. Choose another tab and the pill should slide to it.
• Open Play and try a few experiments in place. On a phone-width window, nothing should scroll sideways, and every card should work without hover.
• Send the form on Contact and confirm the message appears in the contact_messages table under Database in Local. Open /sign-in and it should return a 404.

New projects on paid plans start private, so turn off Private in the Publish menu before sharing your site. Local and published apps use separate databases, so messages sent to the preview won’t appear on the live site. Email only sends after the first publish and only once ownerEmail is set; until then, read messages under Database. Replace the fictional owner, clients, figures, and social links before you publish. Passwords for private case studies, a CMS, and comments on essays are not included.

Use the local preview controls to test the affected path. When it works, publish a release and repeat the check at the live URL. For saved records or accounts, read about the separate Local and Online databases.

• How to Build a UX Designer Portfolio with AIBuild a UX designer portfolio in Layerwise where visitors can try your work, with live product demos, purposeful motion, and 3D that falls back well.