Miguel Clavel · Product Designer · Live demos and kits

Try it live

Interactions from my sites and kits for AI products. One file each, no libraries.

Pixel Trail
A grid of squares that remembers your pointer and never draws over the text.
Code
Name Hover
Every letter of a name gets its own hover animation.
Code
Wave Line
A divider that bends toward your cursor and wobbles back.
Code
Scroll Into Header
A big name that travels into the header as you scroll.
Code
Pixel Dissolve
Scroll from light into dark and the page comes apart in squares.
Code
Curve Carousel
Case studies that ride a huge circle.
Code
Dark Mode
A theme toggle that remembers you, with no flash on load.
Code
Sticker Burst
Click a heading and it bursts into stickers.
Code
Pixel Run
The little runner from my footer. Bring your own face.
Code
Portfolio details
A viewed badge, the short version, and a brand selection colour.
Code
AI UX patterns
Seven patterns for AI products people can trust.
Code
Portfolio chat starter
A portfolio people can talk to, in one file.
Code

Read and copy

How I work, written down: a playbook, prompts and Claude Code skills, plus how my portfolios were built.

Product design playbook
From a vague request to live, in eight steps, with templates.
UX research skills
Eighteen Claude Code skills, one per research job.
Claude skills for designers
Ten skills: reviews, privacy scans, copy, experiments, launch checks.
AI prompts for product designers
Ten prompts, each with the checks to run after.
Interaction recipes
Twenty interactions and fixes, each with a recording and a prompt.
A portfolio you can talk to
How chat.miguelclavel.com works, and its build log.
miguelclavel.com
The portfolio, its small moments, and what broke at launch.

All 28 Claude Code skills install as two plugins. In Claude Code, run:

/plugin marketplace add miguelclavel/claude-skills-for-designers
/plugin install claude-skills-for-designers@miguelclavel
/plugin install ux-research-skills@miguelclavel