explaingit

basejb/likethat

Analysis updated 2026-05-18

0TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A Claude Code skill that studies a website or repo's design and rewrites your project's styles, fonts, and components to match its mood.

Mindmap

mindmap
  root((likethat))
    What it does
      Reads reference design
      Writes matching styles
      Updates components
    Tech stack
      TypeScript
      Claude Code skill
      Node scripts
    Use cases
      Restyle a project
      Blend multiple references
      Generate design docs
    Audience
      Developers
      AI agent users
    Steps
      Ask questions
      Read references
      Choose values
      Write and preview

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Restyle your app's colors, fonts, and spacing to match a site you admire, like linear.app or stripe.com.

USE CASE 2

Pull design values from several reference repos or sites and blend them into one consistent look.

USE CASE 3

Generate a design document explaining every style choice and which reference it came from.

USE CASE 4

Bootstrap a landing page's visual style automatically instead of manually picking a color palette.

What is it built with?

TypeScriptClaude CodeNode.js

How does it compare?

basejb/likethat0xradioac7iv/tempfs7vignesh/pgpulse
Stars000
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderatemoderate
Complexity2/53/54/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Runs as a Claude Code skill, needs a browser MCP tool for full website screenshot analysis, otherwise falls back to HTML and CSS fetch.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

likethat is a Claude Code skill that copies the look and feel of a website or repository you admire and applies it to your own project. Its tagline is steal the mood, not the pixels. You point it at one or more reference sites or repos, and it studies their colors, fonts, spacing, corner rounding, shadows, motion, layout, and even wording. It then writes those choices into your own project's code, adjusted to fit what you are building, rather than copying anything file for file. It installs as a Claude Code skill along with two helper subagents, and copies of the same command are also generated for other tools like Cursor, Codex, Windsurf, Gemini CLI, and several others. Getting started means cloning the repository, running an install script that copies the skill into your Claude configuration folder, then running a single command inside the project you want restyled, followed by the web address or repo path you want to match. When run, it works through a series of steps. First it asks a few questions about your project and who uses it. Then it reads each reference in parallel, producing a short report on the style values found in each one. Next it chooses which values to use, asking you again only if two references disagree and your earlier answers do not resolve it. After that it writes a design document and updates your project's main stylesheet, font setup, and a handful of representative components to match. Finally it builds a temporary preview page so you can see the result and confirms the project still builds correctly. The skill automatically detects where your stylesheet and layout files live, supporting common setups like Next.js, Vite, Remix, and Astro, and it asks before writing anything in a monorepo with multiple apps or packages. This is a solo built, MIT licensed tool aimed at developers using AI coding assistants who want a fast way to give their project a polished look inspired by a site or repo they like, without hand copying design details one by one.

Copy-paste prompts

Prompt 1
Run likethat on my Next.js project using https://linear.app as the design reference.
Prompt 2
Help me install likethat globally so I can use it across all my projects.
Prompt 3
Explain what docs/likethat/DESIGN.md contains after running the skill.
Prompt 4
Show me how to combine two reference sites so likethat blends their colors and fonts.
Prompt 5
Help me clean up the temporary preview route likethat creates before I ship.

Frequently asked questions

What is likethat?

A Claude Code skill that studies a website or repo's design and rewrites your project's styles, fonts, and components to match its mood.

What language is likethat written in?

Mainly TypeScript. The stack also includes TypeScript, Claude Code, Node.js.

What license does likethat use?

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is likethat to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is likethat for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.