What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Playful UI/UX Portfolio

When to use

• You are a UI/UX designer whose work is colorful, characterful, and fun, but your portfolio reads like everyone else's grid of screenshots
• You are applying for product design roles and need hiring managers to see your process, not just your finished screens
• Your portfolio has 15 projects and no case studies, or 2 case studies that each run 3,000 words nobody finishes
• You want the site itself to prove the playfulness — micro-interactions, tone, and layout — while staying fast and readable
• You are rebuilding your portfolio from scratch and want a structure you can fill in project by project, not a template you have to fight

Workflow

1. Define the promise (input: your work + target roles → output: positioning statement)
   Write one paragraph: who you design for, what kind of problems you love, and what makes your approach different — in your own voice, with the playfulness turned up to the level you actually want to be hired for. Name the roles you are targeting (product designer, interaction designer, design systems with personality) and the 3–5 projects that best prove the promise. Everything that does not support the promise gets cut or demoted: a portfolio is an argument, not an archive.
2. Structure the site (input: positioning statement → output: site map + homepage flow)
   Plan five sections: Home (promise + 3 best projects + one line of personality), Work (all projects, scannable, filterable by type), Case studies (2–4 deep dives), About (photo, story, tools, what you are looking for), Contact (one clear way to reach you). On the homepage, order matters: promise first, proof second, personality third — a visitor should understand what you do within five seconds and see your best work within two scrolls. Sketch the homepage as blocks with sizes before writing any copy; if the blocks do not sell the promise, the copy will not save them.
3. Shape each case study (input: project materials → output: case study outlines)
   Give every featured project the same spine: Problem (one paragraph, whose pain and why it mattered), Constraints (time, platform, team, technical limits — constraints are where craft shows), Process (3–5 key decisions, each with the options you weighed and why you chose), Outcome (what shipped, what changed, with honest numbers or honest qualitative evidence), What I would do differently (one paragraph — hiring managers trust this more than any success claim). Keep each case study to 600–900 words plus images: long enough to show thinking, short enough to finish. For non-featured projects, write a 2–3 sentence card instead — a small portfolio that is finished beats a big one that is half-empty.

Template preview

Playful UI/UX Portfolio — Build Planner

One portfolio, one argument. Fill this in before building any pages.

Positioning statement

Who I design for: {…} Problems I love: {…} What makes my approach different: {…} (in my own voice, playfulness at the level I want to be hired for) Target roles: {e.g. product designer / interaction designer} Proof projects (3–5): {1} / {2} / {3}

Cut list (does not support the promise): {…}

Site map

Homepage block flow: promise → proof → personality Five-second test: a visitor understands what I do in 5 seconds — [ ] tested with a friend

Case study template (repeat per featured project, 600–900 words + images)

Buy the full skill pack — $4.99 Pro — all 471 skills