# Things That > Human-first intelligence product design and development I'm Jack, a product engineer and designer. I build products that help people think, work, and play. I build human-first products that treat the human side as seriously as the technical side. Interfaces that feel conversational, systems that explain their reasoning, and technology that fits into how people actually work rather than forcing them to adapt. For over 20 years, I've worked with teams at Google, IBM, Air New Zealand, Kpler, EE, News UK, Tesco, and The Economist, sitting in the space between product strategy and hands-on engineering, designing systems and shipping products that make the complex feel simple. Work on the site includes Mass, On the River, Emmly, Beryl, Appo, and FaultFixers. Contact: hello@thingsthat.com Book a call: https://cal.com/thingsthat/30min ## Pages - [Home](https://www.thingsthat.com/): Studio feed of work, writing, and how Things That works - [About](https://www.thingsthat.com/#about): Who Jack is, how the practice works, and how to get in touch - [Services](https://www.thingsthat.com/#services): Fractional design and build, team workshops, and pair sessions - [Insights](https://www.thingsthat.com/#insights): Notes and writing on products, audiences, and AI - [Get started](https://www.thingsthat.com/#get-started): Contact and booking - [Library](https://www.thingsthat.com/#library): Tools, books, and people - [Sitemap](https://www.thingsthat.com/sitemap.xml): Machine-readable list of public URLs ## Projects - [Mass](https://holdmass.com): Human insight, reimagined through synthetic minds. A platform that allows you to create synthetic human personas that can think, reason, and respond like real people. - [On the River](https://ontherivermap.com): Rivers and canals, mapped. Britain, Ireland, France, the Netherlands and Belgium waterways, locks, clubs, channel guides, and route planning. - [Emmly](https://emmly.xyz): Make space for what you imagine. Creative partner that unlocks new ways of thinking, feeling, and making. Emmly empowers creators to explore, experiment, and create without limits. - [Beryl](https://www.thingsthat.com/): E-commerce website for Beryl, a London-based bike light and transport company. Today, they support over 300,000 people using their bikes, e-bikes, e-scooters and cargo bikes to get to work, to university, and to explore. - [Appo](https://www.thingsthat.com/): Prototype build to help businesses automate customer support and sales for dental practices using AI and chatbots, with HIPAA-compliant data collection, storage, and insights. - [FaultFixers](https://www.thingsthat.com/): Identity for FaultFixers, a facilities maintenance company. ## Insights - [Analysing Christmas Adverts 2025](https://www.thingsthat.com/insights/analysing-christmas-adverts): Mass Vision is a persona-based video sentiment tool: a synthetic screening room for ads. You upload a film, synthetic personas watch it, and narrate reactions moment by moment, explaining why, tied to identity, lived experience, ethics, and context. The output is a tension map (not a safe average): where the same scene splits audiences, who feels seen, and who feels repelled. - [Mass](https://www.thingsthat.com/insights/mass): My mum thinks it's cool. My friends think it's as odd as a cat with wings. Getting human opinion is hard. It's time-consuming, expensive, and we're not sure we can trust the result. That's why we built Mass, a platform to deploy hundreds of synthetic human personas that think, reason, and respond like the target audience. ## Library - [Accessibility Checker](https://mcpmarket.com/): A Claude skill on MCP Market. It looks for WCAG problems in a web app: semantic HTML, ARIA, keyboard, contrast. Run it by hand or as a first automated pass. - [Agent Skills Client Showcase](https://agentskills.io/): Products that already load the agent skills format. Useful if you want to see who ships with a skill file. - [Anthropic Skills Repo](https://github.com/anthropics/skills): Skills Anthropic publishes for Claude. The repo to copy if you are writing or installing a skill folder. - [Astro](https://astro.build): A web framework for sites that are mostly content. You can use Vue, React, Svelte, or HTML. Made to keep pages fast. - [Awesome Agent Skills](https://github.com/VoltAgent/awesome-claude-skills): Agent skills from official teams and from the community, in one list. Claude Code, Codex, Cursor, and Gemini CLI. - [Awesome Claude Skills](https://github.com/travisvn/awesome-claude-skills): Skills, tools, and links for Claude, gathered so you do not have to open twenty repos. - [Balsamiq](https://balsamiq.com): Wireframes that stay rough on purpose, so a review stays on structure instead of polish. - [Bolt](https://bolt.new): StackBlitz's AI builder. A prompt becomes a full-stack app in the browser, without a local install. - [Bun](https://bun.sh): A JavaScript runtime, bundler, and package manager in one. Fast to start. - [Career-Ops](https://career-ops.org): Open-source job search helpers for Claude Code and other agent CLIs. It scores a role against a CV, writes tailored PDFs, and watches career pages. - [Claude A11y Skill](https://github.com/airowe/claude-a11y-skill): A Claude Code skill that audits a web project with axe-core in the live DOM and jsx-a11y in the source. WCAG 2.1 A and AA: alt text, contrast, headings, broken ARIA. - [Claude Code](https://code.claude.com): An AI pair programmer in the terminal. Brief the model, read the diff, keep the work in the repo. - [Cloudflare](https://www.cloudflare.com): CDN, DNS, and Workers at the edge. Sites and functions close to the visitor. - [Codex](https://openai.com/codex): OpenAI's coding agent. In ChatGPT, the editor, and the terminal. - [Cursor](https://cursor.com): An AI coding editor. Agents work in the repo, the terminal, and the browser. The diff stays in front of you. - [Design Engineer Tools](https://www.desengs.com): James Warner's directory of tools for design engineers. AI editors, component libraries, 3D, shaders, motion. - [Drizzle](https://orm.drizzle.team): A TypeScript ORM for SQL. Schema in code, queries you can read. - [Expo](https://expo.dev): React Native with cloud services. iOS, Android, and web from one codebase. - [Figma](https://www.figma.com): Shared interface design. Usually where a wireframe goes next. - [Figma MCP](https://developers.figma.com/docs/figma-mcp-server/): Figma's MCP server. An agent can read the file, draw on the canvas, and turn live UI into layers. Remote or from the desktop app. - [Gemini CLI](https://github.com/google-gemini/gemini-cli): Google Gemini in the terminal, for generating code. - [GitHub](https://github.com): Where the code lives. Repos, pull requests, issues, and the history of how something got made. - [Grok Bot](https://x.ai/bot): Named AI teammates on a cloud computer. They log into your tools, keep working after you close the lid, and come back when they need you. - [GSAP](https://gsap.com): Timeline animation for the web. Tweens, scroll, SVG, and UI motion. - [html.to.design](https://html.to.design): A live website becomes editable Figma layers, instead of tracing a screenshot. - [Impeccable](https://github.com/pbakaus/impeccable): Commands and checks for an AI coding harness, so generated UI comes out tighter than a first pass. - [60fps](https://60fps.design/): Interface animation and interaction details, taken from iOS and web apps. - [a16z Speedrun](https://speedrun.a16z.com/companies): Company directory for Speedrun, the a16z accelerator for games, AI, and consumer tech. Early teams in the programme that are hiring. - [abtest.design](https://abtest.design/): A/B test results from well-known apps, with what they tried and what moved. - [AIGA Design Jobs](https://designcareers.aiga.org/): AIGA's job board. Institutions, agencies, universities, and in-house teams, more than startups. - [Are.na](https://www.are.na/): Public boards of visual research. No likes, no feed algorithm. Type, buildings, theory. - [Authentic Jobs](https://authenticjobs.com/): Job board for designers, developers, and other creative roles, running since 2005. Full-time, freelance, and remote. - [Awwwards](https://www.awwwards.com/): Daily awards for web design, plus courses, a directory, and a shop for digital products. - [Brian Lovin / HN Reader](https://brianlovin.com/hn): Brian Lovin's reader for Hacker News. Better type and hierarchy than the original. - [Codrops](https://tympanus.net/codrops/): Frontend experiments and tutorials. A long record of what CSS and JavaScript can still do on a page. - [Contra](https://contra.com/): Freelance and independent work with no commission on payments. Project showcases and client matching. Contract roles, where the other boards are mostly full-time. - [Cosmos](https://www.cosmos.so/): A quieter board than Pinterest or Behance for saving visual work. - [Creative Boom](https://www.creativeboom.com/): Write-ups and interviews with independent designers and studios. - [CSS-Tricks](https://css-tricks.com/): Guides, tutorials, and the CSS almanac, built up over more than a decade. Quieter since DigitalOcean bought it. The archive is still the thing. - [Dense Discovery](https://www.densediscovery.com/): Kai Brach's weekly newsletter on design, technology, and culture. - [Design Engineer](https://designengineer.io/): Newsletter for people who design and ship the interface themselves. - [Design Observer](https://designobserver.com/): Design criticism. Michael Bierut, Rick Poynor, and others started it. Essays, not case studies. - [Design Substack Newsletters](https://substack.com/explore/category/design): Design writing that has moved onto Substack. - [Design Spells](https://designspells.com/): Small interface details: micro-interactions, easter eggs, extras that give a product a bit of character. - [Designspiration](https://www.designspiration.com/): A bookmark gallery for saving and finding visual design work. - [Dribbble Jobs](https://dribbble.com/jobs): Dribbble's job board. Product, brand, and UX roles, filterable by specialty and place. - [Fonts In Use](https://fontsinuse.com/): Typefaces as they actually ran, with the designer and the job attached. - [Footer](https://www.footer.design/): A gallery of website footers, sorted by type and style. - [HN Who's Hiring](https://news.ycombinator.com/submitted?id=whoishiring): Monthly Ask HN: Who is hiring? threads from the whoishiring account. Plain listings from founders and hiring managers. Often good for design-engineer roles on small teams. - [If You Could Jobs](https://www.ifyoucouldjobs.com/): It's Nice That's creative job board. Design, branding, and motion, junior to director. Mostly UK, some further out. - [Interactions](https://khagwal.com/interactions): Interface interactions and small animations, collected in one place. - [It's Nice That](https://www.itsnicethat.com/): A magazine of graphic design, type foundries, and independent studios. - [Layers Jobs](https://layers.to/jobs): Jobs on Layers, the design community. Roles that lean toward design-led startups and high-craft teams. - [Lenny's Jobs](https://www.lennysjobs.com/): Product, growth, AI, and startup jobs for Lenny's Newsletter readers. - [Letterform Archive](https://oa.letterformarchive.org/): San Francisco collection of type and graphic design. Specimens and printed ephemera, some of it online. - [Minimalissimo](https://minimalissimo.com/): A gallery of minimalist design from around the world. - [Recent](https://recent.design/): A gallery of websites, often with motion, and a high bar for what gets in. - [Remote Jobs](https://www.remotejobs.com/jobs?q=&category_id%5B%5D=11143&remote=0&commit=Filter+jobs): Remote-only jobs across design, engineering, marketing, and finance. The design filter has an RSS feed. - [Rosenverse](https://rosenverse.rosenfeldmedia.com/): Rosenfeld Media's video library. More than 1,000 UX and design conference talks, plus live webinars. Some free, full access with a paid membership. - [Sidebar.io](https://sidebar.io/): Five design links a day, picked since 2012. - [Smashing Magazine](https://www.smashingmagazine.com/): Long reads on web design, UX, frontend, and accessibility, from practitioners. - [The Brand Identity](https://the-brandidentity.com/): Identity work shown with interviews about how it was built. - [Typographica](https://typographica.org/): Once a year, working designers review new typefaces at some length. - [UI Playbook](https://uiplaybook.dev/): Interactive UI components with notes and live demos. - [UX Collective](https://uxdesign.cc/): A Medium publication. Essays on UX, research, and process. - [UX Design Weekly](https://uxdesignweekly.com/): UX links, once a week, chosen by a person. - [UX Snaps](https://www.uxsnaps.com/): Screenshots and flows from real apps, filed for reference. - [We Work Remotely](https://weworkremotely.com/categories/remote-design-jobs): Remote-only job board, more than a decade old. The design category has its own RSS feed. - [Wellfound](https://wellfound.com/jobs): Startup jobs with salary and equity shown on the posting. Design and engineering at early-stage companies. - [Works That Work](https://worksthatwork.com/): Independent magazine. Design that solves a real problem, often away from the awards circuit. - [Y Combinator Jobs](https://www.ycombinator.com/jobs): Jobs at Y Combinator-funded startups. Apply with one profile that founders can search. - [Knip](https://knip.dev): Finds unused files, exports, and dependencies in JavaScript and TypeScript. Dead code you can delete. - [Land-book](https://land-book.com): A gallery of website design. Landing pages, portfolios, and sections, hand-picked. - [Lenis](https://lenis.dev): Smooth scrolling. A small library that takes over the scroll, without fighting the page. - [Linear](https://linear.app): Issue tracking for product work. Fast, keyboard-first, and built for agents too. - [LobeHub](https://lobehub.com): An open-source desktop app for chatting with local and cloud models. Agents, plugins, and a UI you can run yourself. - [Lovable](https://lovable.dev): An AI builder that turns a prompt into a working full-stack app, without writing the boilerplate first. - [Lucide](https://lucide.dev): An icon set. Consistent strokes, one name per icon, easy to import. - [Mass](https://holdmass.com): Synthetic personas for research. They think, reason, and answer like the audience, before you talk to the real one. - [Matter.js](https://brm.io/matter-js): A 2D rigid-body engine for the browser. Gravity, collisions, constraints, without writing the physics yourself. - [MCP Market](https://mcpmarket.com): A directory of agent skills and MCP servers for Claude Code, Claude.ai, Codex, and ChatGPT. Grouped by job: tools, security, testing, accessibility. - [MCP Servers Directory](https://github.com/modelcontextprotocol/servers): The official list of Model Context Protocol servers. The plugins that let an agent work on real files and services. - [Mobbin](https://mobbin.com): Real app screens and flows. Search by pattern when you need a shipped example. - [Netlify](https://www.netlify.com): Hosting and deploys for static and hybrid sites. - [Nuxt](https://nuxt.com): Vue for the whole site. File-based routing, server routes, and a build that can go static or stay live. - [Nuxt UI](https://ui.nuxt.com): Vue components for Nuxt. Accessible, themed with Tailwind, built on Reka. - [Ollama](https://ollama.com): Run open models on your machine. Local inference for agents and chat. - [OpenRouter](https://openrouter.ai): One API for many models. Swap providers without rewriting the call. - [Oxfmt](https://oxc.rs/docs/guide/usage/formatter): A formatter from the Oxc project. Prettier's job, in less time. - [Oxlint](https://oxc.rs/docs/guide/usage/linter): A JavaScript linter from the Oxc project. Same job as ESLint, without the wait. - [Palette Talent Skill](https://mcpmarket.com/): A Claude Code skill for job search and interview prep. A few role profiles, discovery, fit, a CV, and notes after each round. - [Parallel](https://www.parallel.ai): Web search and extract built for agents. Structured results instead of a page of links. - [Perplexity](https://www.perplexity.ai): Search with citations. Ask a question, get answers with sources. - [Playwright](https://playwright.dev): Microsoft's open-source browser automation. One API for Chromium, Firefox, and WebKit. Tests and scripted browser work. - [pnpm](https://pnpm.io): A package manager that shares installs across projects. Less disk, same lockfile. - [Refero](https://refero.design): A library of real product screens. Search by pattern, flow, or product when you need to see how someone else solved it. - [Reka UI](https://reka-ui.com): Unstyled Vue primitives. Accessible building blocks you style yourself. - [Resend](https://resend.com): Email for developers. Transactional mail through an API. - [RTK (Rust Token Killer)](https://www.rtk-ai.app): A CLI proxy that filters and compresses the output of common dev commands before it reaches an AI coding assistant, so fewer tokens get wasted. - [Secretlint](https://github.com/secretlint/secretlint): A pluggable linter for committed credentials. Hook or CI. Rules for the usual cloud and AI keys. - [Sentry](https://sentry.io): Error tracking. See the crash, the stack, and the release that caused it. - [shadcn/vue](https://www.shadcn-vue.com): Copy the component into the repo. Accessible Vue UI you own, not a package you wait on. - [Sharp](https://sharp.pixelplumbing.com): Image processing in Node. Resize, crop, convert, without sending the file somewhere else. - [Storybook](https://storybook.js.org): A workshop for UI components. Build them in isolation, then document and test. - [Stripe](https://stripe.com): Payments. Cards, subscriptions, and billing through an API. - [Supabase](https://supabase.com): Postgres with auth, storage, and APIs. A backend you can stand up without running the server yourself. - [Tailwind](https://tailwindcss.com): Utility CSS. Classes on the element, instead of a stylesheet you have to hunt through. - [Tauri](https://tauri.app): Small, locked-down apps with a web frontend and a Rust backend. Linux, macOS, Windows, Android, and iOS from one codebase. - [Three.js](https://threejs.org): WebGL in the browser, without writing the shaders first. Scenes, cameras, lights, meshes. - [tldraw](https://www.tldraw.com): A whiteboard, and an SDK if you want drawing in the product. - [TypeScript](https://www.typescriptlang.org): JavaScript with types. Catch the shape of the data before it runs. - [UI Skills for Design Engineers](https://www.ui-skills.com): A directory of UI skills for design engineers: accessibility, motion, frontend craft, with install commands you can paste. - [Untitled UI](https://www.untitledui.com): A Figma UI kit and React library. Large, organised, and built as a system. - [Vercel](https://vercel.com): Hosting for frontend apps. Git deploys, preview URLs, and an edge network. - [Vibe Security Skill](https://github.com/raroque/vibe-security-skill): An agent skill that looks through AI-generated code for the usual holes: hardcoded secrets, missing row-level security, tokens in localStorage. Loads the checks that fit the stack. - [Vite](https://vite.dev): The frontend build tool. A fast local server, then a production bundle. - [VoidZero](https://voidzero.dev): The company behind Vite, Vitest, and Oxc. JavaScript tooling, written to be fast. - [Vue.js](https://vuejs.org): A JavaScript framework for interfaces. Templates, reactivity, and components you can grow into a site. - [VueUse](https://vueuse.org): Composition utilities for Vue. Mouse, storage, timers, and the rest, as functions you import. - [WCAG Audit Patterns Skill](https://github.com/wshobson/agents/tree/main/plugins/accessibility-compliance/skills/wcag-audit-patterns): A Claude Code skill for WCAG 2.2. Automated testing, a pass by hand, and notes on how to fix what it finds. - [Zod](https://zod.dev): Runtime validation for TypeScript. Parse at the edge, then the rest of the code can trust the shape. ## Optional - [Full site content](https://www.thingsthat.com/llms-full.txt): Complete public copy in one file - [Privacy](https://www.thingsthat.com/privacy): Privacy policy for thingsthat.com