Head to head

First Website Kit vs UI Kit for Builders (2026)

A side-by-side look at First Website Kit and UI Kit for Builders — what each does, pricing, and how the iScale community has voted. Pick the one that fits your workflow.

First Website Kit

UI Kit for Builders

What it is

Download one folder, open it in your AI assistant (Claude, Codex, Cursor, Gemini, Copilot…) and build your first website together — step by step, live today. Free. You can do this You already have everything that matters: an idea, something to say, and an AI assistant that can build. The only thing missing was a guide that starts where you are — and that's exactly what this is. If you can describe your business, your hobby, or your project to a friend, you can make a website today. Words like "deploy" and "front end" don't need to slow you down — the kit teaches your AI to explain each one the moment it comes up, in plain language, and to do the technical work for you. You bring the vision. It brings the keyboard. What this is First Website Kit is a folder. Inside it is a rulebook that your AI assistant reads at the start of every session. It ships under the two filenames AI tools look for — AGENTS.md (Codex, Cursor, Gemini CLI, GitHub Copilot, Windsurf, and most others) and CLAUDE.md (Claude Cowork / Claude Code) — the same rules under both names. Whatever AI tool you already use, the kit works with it — with or without a built-in browser or terminal; the rulebook has a path for both. The rulebook tells your assistant, over and over: "The person you're helping is building their first website — they know their idea inside out; the technical side is your job. Plain words, define every term the first time, one step at a time, do all the technical work yourself, and celebrate every win." "All the technical decisions are already made. Don't ask them to choose anything technical. Never install anything for a first website." "Follow this exact path: find out what they want → build it on their computer → let them change it until they love it → put it online for free → teach them how to come back and edit it." "Never ask for a credit card or password. Never run anything that can't be undone without saying so in plain English. Always say out loud when something is free and when something costs money. Never hand over a link you haven't checked." "Make it look like a real, modern site — proper fonts, real spacing, their colors, works on phones — not the generic 'made by AI in 5 seconds' look." Every site starts from two well-known open-source style foundations (Pico CSS + Open Props) so it can't look broken or improvised, and the kit carries a slice of the design rules we use on iScaleLabs' own sites. The AI also runs its own quiet quality check (readable contrast, alt text, works on a phone) before it says done. That's it. The AI does the rest. You just talk. How to use it (3 steps) Download the folder: https://www.iscalelabs.com/iscalexchange/kits/first-website-kit-v1.4.zip — then unzip it wherever you usually keep your project files. Open your AI tool and point it at that folder — the same way you'd open any project (in Claude that's the app → Cowork → choose the folder; in Codex, Cursor, Gemini, Copilot or Windsurf, open the folder as usual). Type: "hi, I want to make a website for ____" and press enter. The AI will ask you a few easy questions, build the site, show it to you in your browser, and change anything you ask. When you're happy, it walks you through putting it online — free: you drag the folder onto a web page (Netlify), and later make one free account so the site stays up. That's the only account you'll create, and the AI tells you every click. You get a link like your-site.netlify.app to send to anyone. If you want your own .com later, the AI explains what that is and what it costs (about $10–15/year), and you buy it yourself. Who it's for Anyone in the community with an AI assistant (Claude, Codex, Cursor, Gemini, Copilot…) who's ready to build something real with it Anyone with a simple site in mind — a small business page, a portfolio, a hobby site, a family page, a landing page Anyone who's been meaning to start — today's the day What it builds (and what comes next) Version 1 is a website: pages, words, pictures, links, live on the internet with a link you can share. That's a real accomplishment and it's the right first step. Bigger things — online stores, member logins, apps — are a next chapter. Ask for them once your first site is live, and the kit starts you with the simple version. What's in the folder AGENTS.md — the guide-by-your-side rulebook, read automatically by Codex, Cursor, Gemini CLI, Copilot, Windsurf and most AI tools (you never need to open it). It's the open standard file those tools look for. CLAUDE.md — the same rules under the filename Claude looks for README.md — the only thing you read: three steps, plain English START-HERE.txt — the three steps again, even shorter VERSION.txt — which version you have and what changed LICENSE — MIT: free to use, share, and change images/ — drop your photos and logo here Pictures: drop your own photos in images/. Want AI-made pictures? Codex, Grok, and Gemini (its "Nano Banana" image model) can create them; Claude can't — if you're on Claude, ask one of those to make the picture, save it, drop it in images/, and the kit places it. Want to read the rulebook first? It's here: https://www.iscalelabs.com/iscalexchange/kits/first-website-kit/AGENTS.md · https://www.iscalelabs.com/iscalexchange/kits/first-website-kit/CLAUDE.md (same rules) Current version: the download link always points at the latest zip; the version number is in the file name (e.g. first-website-kit-v1.4.zip), at the top of the README, and in VERSION.txt inside. Tell us how it went Come back to this listing and comment: what you built, what clicked, and anything you'd make smoother. Every note you leave makes the kit better for the next person — and drop your link, we want to see it.

A drop-in rulebook that makes your AI design first: tokens before components, a clear primary action per screen, real states, honest verification before "done" — plus a /ui-review prompt for your worst screen. Free. Your code works. Now make it look like it. You already ship real software with Claude Code, Codex, Cursor, Gemini CLI, Copilot, Windsurf — whichever you use. The product works. And the UI looks like every other AI-generated app: default shadcn, a gradient hero, three cards with emoji, forty controls on one screen, no empty states. That is not a taste problem. It's a missing design system. Nobody told the model what "good" looks like in your repo, so it reached for defaults. Hand it the rules and it stops. What this is UI Kit for Builders is a folder you drop into your repo: a rulebook your AI loads at the start of every session, shipped under every filename AI tools look for — AGENTS.md (Codex, Cursor, most tools), CLAUDE.md (Claude), GEMINI.md (Gemini CLI), .github/copilot-instructions.md (Copilot), .windsurf/rules/ (Windsurf) — identical bodies, so it works with whichever one you use — plus a design-system template, a review prompt, and a license-checked repo list. It makes your AI design first: Tokens before components. If your repo already has a token system it builds inside it — never re-themes a working app on a one-screen task. If it doesn't, the first UI turn creates a one-page DESIGN.md (template included) and the token block where your stack reads it (Tailwind v4 @theme / v3 config + shadcn variables): type scale, 8px spacing rhythm, one gray + one accent scale, radius and shadow scales, a motion language, locked primitives. Everything after composes those. The banned list — 37 starter smells, each with the fix. Default shadcn, gradient heroes, emoji feature cards, glass blobs, centered-everything, feature dumping, control overload, system font stacks, cards inside cards, hand-typed hex, placeholder copy, one-off styles, more than one hero effect, linear animation, missing states, dark mode by inversion, dashboards of identical cards… The UX floor, per screen. A clear primary task; hierarchy that survives the squint test; mobile at 375px; loading / empty / error states; forms with labels, inline validation, focus; keyboard and focus rings; WCAG AA contrast; reduced motion; clean console; unique meta. The AI runs it itself and fixes what fails. Motion + effects doctrine. One memorable moment, then restraint. Spring/ease-out, a small CSS-only micro-interaction floor (more only where the product's moment calls for it), and a straight answer on when 3D is warranted (rarely) and how to do it right when it is — the same rules we use on iScaleLabs' own sites. The stack and how to keep it from looking default. Tailwind v4, shadcn/ui (always themed), Radix Colors, Motion, Lucide, Magic UI for one or two accents, R3F for 3D — with the license caveats that bite. Honest verification before "done". No self-graded score: it names any banned row still failing, what it verified (build, console, viewports, live URL) and — plainly — what it could not. /ui-review. Paste it with a screenshot or URL of your worst screen: verdict, then the top 5 fixes with exact code changes. Tool-agnostic. The doctrine is framework-agnostic; the concrete defaults are React / Tailwind / shadcn — on another stack, apply the same rules with your stack's equivalents. No install, no dependency. How to use it (3 steps) Get it from GitHub: https://github.com/iScale-Builders/ui-kit-for-builders — Code → Download ZIP (or grab the latest release, or git clone) — then copy its files into your repo root — the rulebook is already there under your tool's filename (or paste it into your existing instructions file under a ## UI Kit heading). Open the repo in your AI tool as usual. Either start a task and watch it create DESIGN.md + tokens before the first component — or run /ui-review on your worst screen and take the top 5 fixes. Who it's for Builders who already ship with AI and want their product to look as good as it works Anyone whose app "does the thing" but reads as a template Teams that want one design floor every AI in the repo obeys What's in the folder AGENTS.md — the rulebook (~500 lines), read automatically by most AI coding tools CLAUDE.md · GEMINI.md · .github/copilot-instructions.md · .windsurf/rules/ — the same rules under the filenames the other tools look for DESIGN.template.md — the one-page design-system file your AI fills in UI-REVIEW-PROMPT.md — the standalone review prompt, paste-ready REPOS.md — the curated open-source list, every entry license-verified, each with "how to use it so it doesn't look default" VERSION.txt · LICENSE (MIT) Read the rulebook first if you like: https://github.com/iScale-Builders/ui-kit-for-builders/blob/main/AGENTS.md — and star/fork/open issues there; that's where the kit lives and evolves. Current version: see the repo's Releases page (https://github.com/iScale-Builders/ui-kit-for-builders/releases); the version is at the top of the README and in VERSION.txt. Tell us how it went Run /ui-review on a screen, apply the top 5, and post the before/after here. If a rule produced worse UI in practice, that's the most useful feedback there is.

Pricing

free

First Website Kit vs UI Kit for Builders — frequently asked questions

What is the difference between First Website Kit and UI Kit for Builders?

First Website Kit and UI Kit for Builders are both tools builders use, compared here side by side on what they do, pricing, and community votes. The right pick depends on your workflow — see the table above for the specifics.

Is First Website Kit or UI Kit for Builders better?

Neither is universally better. First Website Kit has 0 community upvotes and UI Kit for Builders has 0; upvotes reflect real usage, but the better choice is the one that fits your specific needs and budget.

See more in all tools or read how we evaluate tools.