Kueh Machine

Days
Hours
Min
Sec

Skills worth picking up next

You've already got Claude Code and VS Code building something real. Here are a few more skills and tools worth exploring as you keep building this month.

n00b level I

Put a live link in your pocket

A real address on the open internet, not just something running on your laptop: test it on an actual phone, or send the link to anyone and have them open it themselves. Start with Netlify Drop.

01

Open Netlify Drop and drag your folder in

Go to the page below and drag your whole project folder onto it. Netlify uploads it and hands you back a live URL you can open on your phone right away. Open Netlify Drop

02

Create a free account to keep the link

A dropped site without an account expires after a while. Sign up for free and claim the site, then drag an updated folder onto the same link whenever you make changes.

n00b level II

Never lose your work, and auto-publish every change

Real version control, the way professional teams track every change, plus free hosting that updates itself every time you push. Start with GitHub and GitHub Pages.

01

Create a GitHub account

Create a free account if you don't have one already. Sign up for GitHub

02

Create a new repository for your project

On github.com, click New repository, give it a name, and keep it public.

03

Give Claude Code the repository's URL and ask it to push

On your new repository's page, click the green Code button and copy the URL. Paste that into Claude Code and ask it to push your project there, it'll set that as your project's remote and handle the rest. Or use VS Code's Source Control panel to stage, commit, and push by hand.

04

Turn on GitHub Pages

In your repository, go to Settings, then Pages, and set the source to your main branch. GitHub publishes your project at username.github.io/repo-name within a minute or two, and every push after that updates it automatically.

Ditch the emoji, use real icon sets

Emoji as icons is one of the fastest tells that a project's still in prototype mode.

  • Lucide (lucide.dev) — the most common default Claude Code reaches for already.
  • Heroicons (heroicons.com) — from the Tailwind CSS team, solid and outline styles.
  • Phosphor Icons (phosphoricons.com) — six weights from thin to bold, for matching a specific tone.
  • Tabler Icons (tabler.io/icons) — thousands of icons, useful when you need something oddly specific.

Make your project sound like you wrote it

Claude Code's first draft of your project's copy can default to generic, over-dramatic phrasing that reads as AI-written.

  • Watch for tells like copious em dashes (—) standing in for periods and commas, hollow intensifiers like "genuinely" or "truly" that add emphasis without adding information, and endings that oversell what was just said.
  • This write-up covers the specific patterns to catch and cut. Read the write-up

24 June

Kick-off meeting

2:00 PM SGT
First look at the project

29 July

Check-in meeting

2:00 PM SGT
Show what you have

26 August

Showcase & submission

2:00 PM SGT
Present and hand off

What is Kueh Machine?

Well, it's a random phrase. Kueh is handmade and cultural, machine is systematic and mechanical, and the tension between them is the brief. Take it anywhere: something directly about kueh or machines, something that treats the name as texture or rhythm, something poetic and personal, or something that deliberately pushes against it. There is no wrong interpretation. There should be a thread, however loose.

This is a team L&D project built around making. Each person builds their own small app or website using Claude Code — their own individual interpretation of "Kueh Machine" — getting hands-on experience with tools that are changing what designers can do. Every person's piece comes together into one collective Kueh Machine, live at www.kuehmachine.com.

Set up your workspace for this project

The steps below get VS Code and the Claude Code extension running on your machine. Step 5 is the important one: you'll drop in a project file that tells Claude what you're building, so you can start a conversation and it already has the context.

01

Download VS Code

Get the editor from Microsoft. It's free and runs on Mac and Windows. Download VS Code

02

Open the Extensions panel

In VS Code, click the Extensions icon in the left sidebar. It looks like this:

03

Search "Claude Code" and install the extension

Find the extension by Anthropic and install it. Open in Marketplace

04

Sign in with your Claude account

VS Code will prompt you when the extension loads. Use your Anthropic account. If you don't have one, create one at claude.ai first.

05

Create a project folder and drop CLAUDE.md into it

Make a new folder anywhere on your computer (your Desktop works fine). Download CLAUDE.md below and move it into that folder. This file gives Claude its instructions for your project.

CLAUDE.md Text file · 4 KB
06

Open your project folder in VS Code

In VS Code, go to File, then Open Folder, and select the project folder you just created.

07

Click the Spark icon in the left sidebar

Look for the icon in the sidebar. Click it to open the Claude panel.

08

Start chatting with Claude Code

Type in the Claude panel and describe what you want to build. Claude has already read the instructions from the file you dropped in. Tell it what you're making and go from there.