Skip to content

Tools · 15 in daily use

The stack behind the work.

What I design, build and ship with, and what each tool is actually for on a project.

acme.com · Pricing launchProject

Design
Build
Review
Ship

Pricing.figComponents

ButtonGet startedDocs

CardTeam$79

Inputyou@company.com

radius.sm 6space.3 12focus.ring emerald

PricingCard.tsxReact · TypeScript

import { Button } from "@/ui"; export function PricingCard() {  return (    <Card tone="surface">      <Price value={79} />      <Button variant="primary">        Get started      </Button>    </Card>  );}

Preview

Team$79Get started

Add pricing section using tokens#128 · +184 −12

LintPassed
Type checkPassed
Tests · 128 passingPassed
Preview deployReady

Merged into main ✓1 approval

Production deployVercel

Lighthouse · mobile

100Perf

98A11y

100Best pr.

100SEO

Deployed ✓acme.com · 42s

Liveacme.comPerf 100 · 42s build

01

Design

Where the work starts: layouts, components and the system behind them.

Figma

Every screen is designed with auto-layout, variants and tokens, so it maps 1:1 to real components.
6+ yrs · Design systems from scratch
Framer

Fast, animated marketing sites when a full code build isn’t needed. Recognized as a Framer Expert.
Framer Expert

02

Build

Front-end code built on design tokens, typed and documented.

React

Typed, reusable components built on design tokens, easy for your team to extend.
Component kits
Next.js

Marketing sites and web apps with performance, SEO and accessibility built in.
AirSupp · PlatePing · klep.dev
TypeScript

Typed components and data, so changes are safer and refactors are faster.
PlatePing
Tailwind CSS

Utility styles wired to the same tokens as the Figma library.
Token-driven styling
Storybook

Every component documented with its variants and states, so the team can find and reuse it.
Component docs

03

CMS & no-code

Platforms your team can edit without a developer.

Webflow

Marketing sites with a visual CMS, extended with custom code where it’s needed.
Enametrix
HubSpot

Custom modules, migrations and integrations for teams that run marketing on HubSpot.
100+ pages migrated from Drupal

04

AI

AI-accelerated, human-reviewed.

Claude Code

Used daily to explore, build and refactor faster, with every change reviewed before it ships.
Daily workflow
Cursor

AI-assisted editing for day-to-day code, alongside Claude Code.
Daily workflow

05

Ship

Reviewed, tested and deployed.

GitHub

Every change lands as a reviewed pull request with CI checks, so your team sees exactly what changed.
PRs · GitHub Actions
Vercel

A preview deploy for every pull request, and fast production hosting.
Vercel previews
Playwright

Browser automation and end-to-end tests for the flows that matter.
PlatePing
Cloudflare Workers

Edge functions, like the spam-protection layer across 12 forms.
Enametrix

Have a project in mind?

Tell me what you’re building. If I’m not the right fit, I’ll tell you that too.

Get a quote Book a 20-min call

or email hi@klep.dev