The illustrations on black canvas. The Claude Code mascot, an avatar of Alexander, and the Claude AI logo.

Spin Skogis™ – A Silly Claude Code Demo

Posted on April 16, 2026

I’ve finally vibe coded something – not to solve an issue, but to get experience. Take it for a spin (pun intended).

It’s available at spin.alexanderskogberg.com. Here’s how I made it using Claude Code and Figma.

Coming up with a simple idea

Since my goal was just to get experience going from having idea to having shipped it, I didn’t try to come up with anything sophisticated.

I simply wanted to build something where you could interact with something and see something happen. 

Since I decided to rotate the logo on this website when you hover, focus, and click on it – I ran with that idea!

Deciding on an AI platform

I chose Claude Code due to its immense popularity and the fact that I’ve already been using Claude AI for several months in my design workflow.

Cursor or Loveable might have been more suitable as a UX / UI Designer. However, since I have a web development experience I felt confident. 

Designing the UI in Figma

I wanted to get experience connecting Claude Code to Figma. Hence, I designed the UI in Figma and set out to do the rest by prompting.

I made sure to:

  • Create variables for spacing, sizes, border radius, and colors.
  • Create text styles for each text layer.
  • Make a button component with a variant for each state.
  • Design the UI for both small and large screens.
  • Use Auto Layout when possible.
  • Properly name all layers.

Explaining and planing with Claude AI

I set up a chat in Claude AI to create a CLAUDE.md file and an initial prompt for Claude Code. Claude AI advised me to not write any Rule or Skill files given the simplicity of this project.

If you are unfamiliar with the types of files, just start a chat with Claude AI and ask as many questions you want (until you hit your daily limit).

Installing Claude Code

To get access to Claude Code, you have to subscribe to Claude. I went with the Pro plan that costs $20 a month (VAT not included). if you pay annually it’s a bit cheaper.

Installation Claude Code using the macOS Terminal was both swift and smooth. You can use it in the native desktop app too, but I didn’t bother since I was already familiar with the terminal.

Building and refining by prompting

Before telling Claude Code to do its thing with the CLAUDE.md file and the initial prompt (saved as a .txt file), I put these files along with the image resources in a local folder on my Macbook.

In a couple of seconds Claude Code generated all HTML, CSS, and Javascript files while displaying the loading status text “Moonwalking…” in the terminal.

I opened the HTML file in my browser – everything looked just like in Figma and it worked as intended. Impressive!

Then, I started prompting to:

  • Edit SEO related text.
  • Restructure files in the project folder.
  • Make the spin animation more fun and realistic.
  • Ask for and implement accessibility improvements.
  • Minify CSS and Javascript files for better performance.
  • Solve layout issues regarding the footer text on small screens.

One thing that had to be fixed was the avatar size
The avatar image It didn’t have its current gap to the top of the red circle background. I didn’t manage to prompt this, so I simply exported a slightly smaller image from Figma.

Another thing that had to be fixed was the button states
These states hadn’t been implemented. Claude AI had missed to parse them from Figma and specify their styling in the CLAUDE.MD file.

I solved this by describing the issue to Claude AI and posting the Figma link ti the component.Claude AI then generated a new version of the CLAUDE.md file. Claude Code then solved this issue in seconds.

Shipping!

Shipping the project was probably the easiest part. I had already set up its subdomain on my web hosting provider and created a limited FTP account just for Claude Code. 

I prompted the FTP host, path, and credentials and Claude Code took care of the rest. I didn’t even open my FTP client.

Wrapping up

Thanks for reading about my first proper vice coding experience. It was education, fun, easy, and anxiety reducing (after months of procrastination).

Now you can spin me right ’round baby right ’round like a record baby right ’round ’round ’round.

/Alexander