Your Resources

You're in

Everything, unlocked

Bookmark this page. One email got you all of it, and this link keeps working.

CodeStitch + Figma Prompt Kit

The three prompts I give Claude Code to turn a Figma file into a working CodeStitch site.

Before any of these work

Every section in your Figma file ends in its numeric CodeStitch ID - `Navbar - 2318`, `Page banner - 1106`. This is the whole trick; without it Claude has nothing to map components to.
The Figma MCP server is connected and Claude has the file link.
You've cloned a CodeStitch starter kit, renamed it, removed the original origin, and pushed to your own repo.
One page per unique page type is designed - not every page. One homepage, one about, one service-page template.

Pull the component list

Run this first, with the Figma link pasted in. Some sections repeat on every page, so you want the UNIQUE list - otherwise you'll pull the same component's code four times.

I'm about to build a CodeStitch [KIT NAME] project, and I'm giving you access to the Figma file I used to design the pages.

Right now there's a homepage, an about page, and a service page template. All of these pages have components that are unique to them, plus components shared across them.

Every section in the Figma file has a numerical code at the end of its name. The navbar is 2318. The page banner is 1106.

Look at all of the different sections in the Figma file and give me a unique list of all the section ID numbers that appear in this design.

[KIT NAME]: "Astro" or "intermediate LESS" - whichever kit you cloned.
2318 / 1106: Two real IDs from your own file. Two examples is enough to teach it the pattern.

Build the pages

Between step 1 and step 2 you do the boring part by hand: pull each component's HTML, CSS/LESS and JS from CodeStitch into one Google Doc, then download it as Markdown. Attach that file to this prompt.

We're starting to build [CLIENT]'s website.

You have access to the Figma file, and you already told me which CodeStitch components we need. I'm attaching a markdown file with all the HTML, the LESS/CSS, and some JavaScript - mostly for the navigation.

Take that markdown file, look at the section tags with the number IDs we talked about, and correspond those to the existing pages in the Figma file.

For each page, look at what sections it needs based on the Figma file, what photos are in that section, and what SVG elements are in that section. Then take the HTML and CSS components and build them out into the corresponding pages, downloading the assets as you go.

Use the design context from the Figma file - not a screenshot.

There's a bunch of placeholder content in this repository already. You don't have to do anything with the blog, but we want to start from scratch without the pages that are already built into the site, and only build the ones in our Figma file. I'll give you the HTML for the contact page later on.

Just build out the [N] pages that are already in there. Does that make sense?

[CLIENT]: The business name. Naming the real client keeps its copy and tone consistent.
[N]: How many page types you designed. Three is typical: home, about, service template.
The blog / contact-page lines: Delete if they don't apply. Every kit ships with different placeholder pages - tell it explicitly what to leave alone.

Coach it into shape

The first pass lands around 85-90%, and the gap is always small details - corner radius, hover states, a missing background SVG, dropped bullet points. Go section by section and be specific. Vague notes get vague fixes.

I have a couple of edits - some general, some specific.

GENERAL
- The hero section on load should be 100vh, like in the Figma file.
- You didn't adopt the border radius from the design file. On most components the corner radius is actually zero, but you've rounded the images, the cards, and all of the buttons.

SECTION [ID]
- You didn't include the [N] bullet points before the [BUTTON LABEL] button.
- The text in that section is off-centre from the button.
- There's an SVG vector in this section that's a background overlay, position absolute to the right side of the screen. It's missing.

SECTION [ID]
- The different styling on one card in the Figma file is a HOVER state, not a default. [CARD NAME] should only get that background colour on hover, and so should all the others.
- You put hover elements on the text, so it disappears when you hover. That shouldn't be the case.
- On hover, the SVG icon background should turn [COLOUR] and the SVG path should turn white.
- The bullet point on each of those [N] cards should be the [SHAPE] shape instead of a square.

I'll start with that - does that all make sense? I'll paste the Figma file nodes in for your reference.

Work one section at a time: Name the section by its CodeStitch ID. It already knows what that maps to.
Say what it did wrong, then what's correct: "You rounded the cards, the radius is zero" beats "fix the cards".
Paste the Figma nodes: Ending with the node reference is what stops it guessing.

The one that cost me a rebuild

Claude will sometimes take a screenshot of your Figma file instead of reading it. You get something that looks roughly right and matches none of the real values. Say "use the design context from the Figma file" explicitly, in every build prompt - that's what makes it read the actual CSS.

Everything else

The rest of the library. Same email, no second form.