A quick design exercise on Figma to teach myself more about AI-patterns and coincidentally, didn't use any AI.
Hovering on an image generated, pops open a variations block. Clicking on the card reveals the prompt details.
Animated with Jitter 😊
All I did was copy the Figma page link, paste it into Claude Code, and give it a few instructions. Oh chim! it brought the whole thing to life
What do you think?
Going from a Figma link straight to motion is wild, "oh chim" is the right reaction 😂 Did you connect the Figma MCP, or did Claude Code work it out from the link alone?
That side with all the competitor logos in one grid is the slide I'd steal for a client presentation. Nothing explains "why this direction" faster than showing the sea of sameness first. The navy seal wins easily after that.
Powermatic Technologies helps growing companies with strategy, design and software. I did the whole project on my own: the logo and identity, the design in Figma, the code and the copy on the site.
The site sits on a four-column grid, and you can see its lines on the screen. Graphite palette with no pure black or white, PP Neue Montreal, and a bit of ASCII art.
The page I'm happiest with is Careers. My first idea was to repeat the home page layout. I dropped it. Now the page opens with the open roles set in 72 px type, with a filter by team. A candidate sees the role, the city and the pay before they scroll.
The menu turns like a drum. You can drag it or use the arrow keys, and it opens on the section you're reading.
It's all hand-written HTML, CSS and JS, no framework. It holds up from a phone to an ultrawide monitor.
The live site is open, so you can click through it yourself.