Quartz SaaS Landing
+6Skillry Pick
Playful UI/UX Portfoliov1.0.2
Use this Skill to build website page.
Rising
5.012 downloads1 likes0 saves
$4.99
What do I get when I buy this Skill?Build a playful UI/UX portfolio with bouncing black display letters around an illustrated portrait, a lanyard ID badge, a three-column experience and contact block, and a huge outlined content index above five coloured, numbered columns of product screens in device frames. It includes Home, About, Work with five case-study pages, Resume and Contact, with filters, outcome stats and a validated contact form. By default it is one self-contained file that opens offline, made for product and interaction designers.
Picked most often by
Updated Oct 3, 2026
Similar Skills
View all skills+6
What you get
- An 11-route example for the fictional Ines Okafor: home, about, work with five case-study pages, resume, contact and a designed 404.
- Product screens built as live interface in phone, tablet and laptop frames, plus work filters, search, sort, a quote carousel, FAQ and a contact form with success state.
- One self-contained file with Unbounded, Figtree and Geist Mono embedded, a flat illustrated portrait with true transparency, and built-in checks.
Good fit
- Product and interaction designers who want a warm, personable portfolio that still reads as serious work.
- Designers whose case studies are apps, checkouts or dashboards that can be shown as live screens.
- UX researchers or small studios who can map studies or projects onto the same case-page anatomy.
Not for
- Photographers or artists who mainly need large galleries of their own images.
- Minimal, monochrome personal brands; the site uses five bright column colours and bouncing letters.
- Receiving messages out of the box: the contact form confirms in the page until you connect a backend.
Brand IdentityDigital Publications & Web PagesBuild Website PageBuild Portfolio SiteStyle-lockedEditable OutputBouncing Display LettersDevice MockupsFlat Illustration PortraitLanyard BadgeNumbered Color Columns
About this Skill
Give the Skill your story and three to six case studies, and it builds a portfolio that feels like a well-made self-promo poster from someone who also ships software: bouncing display letters around an illustrated portrait, a lanyard badge and bright numbered columns of product screens. The worked example is the fictional product designer Ines Okafor, with 11 connected routes. The default result is one self-contained file that opens offline in any browser.
What you get
- Home with the letter hero, badge and greeting, experience, community and contact columns, the content index, process steps, client quotes and a call-to-action band
- Case-study pages with brief, findings, process, a three-screen gallery, outcome stats, a client quote and previous and next links
- About, a Resume with skill chips and a contact page with FAQ and a validated form
- Unbounded, Figtree and Geist Mono embedded in the file, so nothing loads from the network
How to use it
- Share your name, discipline, city, a short greeting, experience and three to six case studies with brief, process and outcomes.
- Your agent builds each product screen, makes the illustrations from your photos and runs the built-in checks.
- Click through every page and form on desktop and phone, then ask for changes.
Illustrations made with your agent's image tool may incur that tool's usage charges. The contact form confirms in the page and sends nothing until a backend is connected.
What you need before you start
- You bring
- Name, discipline, city, availability and a short first-person greeting · Three to six case studies with brief, findings, process steps, outcomes and a client quote · Experience, skills, contact details and photos of yourself for the illustrations
- Dependencies
- Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image generation tool in your agent for the illustrated portrait and studio scenes
- Outside costs
- Making the illustrated portrait and scenes with your agent's image tool may incur that tool's usage charges. Product screens are built in the page and need no image generation.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…