Free Tools

9 tools, no signup required to use any of them. Three built specifically for Claude Code work, six for general front-end/SEO tasks.

These are small, single-purpose developer tools you use directly in the browser — no account, no install, no build step. Three exist specifically for Claude Code work: estimating cost before a task, generating a starting CLAUDE.md file, and picking a realistic first project. The other six are general web development tools for everyday front-end and SEO jobs — CSS generation, meta tags, contrast checking, JSON formatting — the kind of small task that doesn't need a full app, just a page that does one thing correctly.

Built for Claude Code

These three answer the questions that actually come up before a Claude Code session — not a generic checklist, but a real number, a real starting file, or a real suggestion based on what you enter. If you're still deciding whether Claude Code fits your workflow at all, the full guide covers that first; these tools are for once you're past that and into a specific task. The cost estimator pairs naturally with how Claude Code's usage-based pricing actually works if you want the underlying model, not just an estimate.

Cost Estimator

Estimate what a real task might cost, by scope and session pattern.

CLAUDE.md Generator

A real starting CLAUDE.md file, based on your project type.

First Task Picker

3 questions, one real scoped suggestion — not a generic list.

General Dev & SEO Tools

These six aren't tied to Claude Code — they're the CSS and JSON tools that come up in ordinary front-end work regardless of how the code gets written: visually building a gradient or box-shadow instead of guessing at values, checking a color pair actually clears WCAG before shipping it, formatting JSON that came back unreadable, or generating meta tags without re-deriving the Open Graph spec from memory.

Meta Tag Generator

Title, description, Open Graph, and Twitter Card tags, with a live preview.

CSS Gradient Generator

Build and copy gradient CSS visually.

Box-Shadow Generator

Layer and copy box-shadow CSS visually.

Color Contrast Checker

WCAG AA/AAA contrast checking for any color pair.

JSON Formatter

Format and validate JSON instantly.

Glassmorphism Generator

Blur, transparency, and border CSS for the glass effect.

No signup, mostly no server either

None of these 9 tools require an account to use — every calculator, generator, and checker runs its core logic in your browser the moment you open the page. There's nothing to install and nothing to wait on.

Most of the tools also include an optional "email me the result" box if you want a copy sent to you later — using that box does send that specific output to our server so we can email it, the same way any contact form works. Skip it, and nothing you type or generate leaves your browser. The Glassmorphism Generator has no such box at all; it never talks to a server in any form.

Frequently asked

Are these developer tools free?

Yes, all 9 are free with no usage limit and no account required.

Do I need an account to use the tools?

No. Every tool works immediately on page load — there's no sign-in step before you can use one.

Is my data sent to a server?

The core function of every tool (the estimate, the generated CSS, the formatted JSON, the contrast check) runs entirely in your browser. The only exception is the optional "email me the result" box present on most tools — using it sends that specific result to our server to deliver the email. If you don't use that box, nothing is sent anywhere.