This is Linear. It's worth one and a
quarter billion dollars with a B, and
not only is it beautiful, it's an
incredibly useful product management
tool. Now, this this is an app I built
with Claude code with Claude code in an
afternoon. Everything down to the radial
gradient inside the buttons has been
more or less replicated. So, in the next
18 minutes, I'll show you exactly how I
cloned Linear and how you too, using a
custom system that I built, can clone
pretty much any SaaS you want without
writing a single line of code. Cue the
SaaS platform fear mongers. Now, before
we get started, I just wanted to say
that yes, I know we're not going to
clone this and suddenly become Linear
and make a billion dollars. The point of
this video, though, is to not
necessarily profit, but rather to show
you how easy it is to replace a lot of
the software in your stack, save
yourself a ton of money, and then make
it completely yours by customizing it.
And I really wanted to show off this
system that I have built that you can
use yourself and just make building your
own software a bit easier. So, let's get
into it. Now, normally, if you want to
copy an app or copy certain parts of it,
you would just open up the AI and tell
it something like copy this. You may
have tried this yourself, and what we've
probably seen is the AI comes back with
is generally pretty sloppy. This is
exactly what happened when I went to
[music] Claude and told it to copy
Linear. So, it says the Linear clone is
complete, but if we go to localhost, uh
we can see that it is pretty sloppy. We
have just random purple here. There's
emojis. It's not a proper circle for the
user avatar. Obviously, we can't click
any of these. If we compare this to
actual Linear, we can see it's a much
cleaner dashboard. So, that is where
this system here comes in. This is Clone
App Hat Pro. It'll be available for you
in the description, and I'll walk
through in a second how we cloned this
and actually use this system. But, the
way it works is it will first go through
the live site and the code behind it and
captures everything we can: the colors,
the spacing, the gradients. We then have
an AI analyze all of it and build the
copy. Then, a separate set of agents
will go in and grade that copy against
the real Linear, in this case, pixel for
pixel and then keep fixing those
differences until they match. So, it'll
go into a loop until finally the QA
agents approve the implementation agents
and it's ready for me to review. So,
let's actually just do that now. Start
cloning. So, once you have access to
this repo, you can just go here, copy
this, or just copy the URL and feed it
into your agent. We'll go back to
cursor. We have a new session open with
Claude code and just tell Claude clone
this website's dashboard. Use the skill
here. And then I'm also just going to
say make sure all UX is mapped out,
everything is clickable. Then we'll hit
enter and then let this thing run. So,
it has cloned the repo, in other words,
opened up the system as a whole. It is
logging in to Linear first via the URL I
gave it with the Claude Chrome extension
here. I'll talk all about that in a
second, but it's just going through
right now and the first step is for it
to just get a feel for the app. So, it's
taking a bunch of screenshots. It's
testing a bunch of different states and
then it's just saving those all to a
dedicated folder for our future agents
when they actually go in and clone this
to access. Here's what it found so far
in this recon step. I've discovered the
routes and confirmed dark theme, retina,
viewport, routes, inbox, my issues,
reviews, projects views. So, it's going
through and it's clicked through. If we
go back to the Chrome extension, you can
see it's clicking through all these
different views on the side panel and
it's going through the app one by one.
So, it has finished the first phase,
recon, and after each phase it will
check in with us. So, we can now go into
the screenshots that are saved in our
folder here in cursor. We just open up
this tab here. Then under Linear,
another recon, and under screenshots,
then we have all of these different
screenshots that were taken.
>> [music]
>> So, we have the actual issues here. So,
we just zoom in on some of these. It's
going through and it's taking
screenshots one by one. So, that is the
active issues. Here is another view of
the all issues. Here is another view of
the backlog. It even selected different
views like the Kanban board in Linear.
And we also have these interaction
states, which are super important as
well. So, we have things like the
command menu. When you hit control K,
that's showing up. So, it screenshotted
that. It has another create issue modal.
So, it seems like for the most part, it
covered off on all these different
states, but I'm just going to go back to
Linear and see if it missed anything.
So, the last thing is this this
workspace menu as well. So, it looks
like this settings and then any of the
hover states. Doesn't look like it got
any of the hover states. So, I'm
thinking it missed a couple of these.
And this is the beauty of this system as
a whole, an ability to steer it through
feedback after each phase. So, that's
exactly what we're going to do. I'm
going to give a few points of feedback
here. going back to Linear and just
clicking around. And then one thing I
don't think it captured was an ability
to when you click in to see this view.
So, I'm going to tell Claude that. Go
back to cursor and say, "Okay, we're
very close. I need you to continue do
another round of recon. What you're
missing is when you click into a Linear
issue. So, you go issues, then you click
into it. You can see this breadcrumb
shows up, the properties on the side,
the assign, the labels, the project. So,
I need you to click all of those
interaction states as well. Make sure
you're not missing any of those, as well
as an ability to update the issue. So,
typing into this. And then even the um
what do you call this this pane that
shows up at the top for formatting. So,
I need you to spawn the agents and go
through another round of recon to make
sure we haven't missed anything. So,
it's going back in and this is it
clicking right now. It's highlighting
this. It's clicking these properties on
the right-hand side, just taking a bunch
more screenshots. Okay, the agent is
telling me that round two recon is done.
Clicked through every issue detail. It
pulled up all these different
screenshots, saved with these file
names. So, if we go back, you can see
all of these different interaction
states have now been added. I'm not
going to click through all of these. I
think though, if I just see one, yep,
it's getting all of those states that I
mentioned. So, now it has a nice
comprehensive view of the entire app
through all these screenshots. But
seeing the app [music] through
screenshots can only get the AI so far
when it's trying to climb. What we need
to do now is get super scientific with
this. Extraction is the next step. This
is where it goes through everything it
captured and reads the live code. And
the way it does this is with the claw
chrome extension again. So the CSS, the
exact colors, the spacing down to the
pixels, gradients, and it's downloading
all of these real fonts, iconography,
images, all of that to really closely
mimic as much as possible. Now it
doesn't get everything. There are some
things you just can't pull out of the
code, but between the code and the
screenshots, it has enough to compile a
very close replica. Basically a full
definition of what it takes to rebuild
this app. So that's what we're going to
do right now. Have it proceed with step
two. And in about 10 minutes we have
part two extraction complete. And in
this step it created what's called a
states manifest doc. Essentially all of
the code it could find it could extract
from Linear. So if you've ever right
clicked a website and hit inspect
elements, let me just show you that now.
If we go back to Linear, we go command
shift I, these elements, the computed
styles, that's exactly where it's
pulling from. But now we just have a
giant pile of values and a bunch of
screenshots, not really usable yet. So
what it needs to do is turn all of this
into something we can actually build
from. And that next step is coming up
with a design spec, what's called a
design.md. You might have seen these
before, it's becoming the kind of
standard portable way to describe a
design so any coding agent can build
from it. And so what it's doing right
now, if we go back to Cursor and tell it
to proceed with the next step. Proceed
with step three. So it's now taking all
those raw values and turning it into one
clean design system. So the official
colors, the type, the spacing, the
components, everything that goes into
Linear. And in a couple more minutes
we've got our design spec ready, the
design.md with the whole visual theme,
colors, iconography, typography,
components. I mean, we've even got it
down to like gradients and shadows. So
if we actually go to this folder here
where the design.md is located in this
design spec, we can take a closer look
at everything included. Now I recommend
you are seeing through this. I mean,
some of this is isn't just going to make
any sense like color tokens, but just do
a quick once over and make sure that
everything is captured across the board.
To me this all looks good. So we can
proceed with the next step. And the
beauty of a design.md is I can reference
it later. Say I wanted to build new
pages in this Linear clone to kind of
customize this Linear clone more, or I
could bring this whole design style into
a completely different project. So, say
I wanted to, I don't know, build a voice
transcription app. What I could do is I
could take this Linear style that we
just cloned and then drop in the
design.md. And it's basically a
protocol. It'll carry over anything to
that coding agent, whether it's, you
know, GPT, whether it's Gemini, whether
it's Opus, and we'll build out that new
app in this style, in this design.md
kind of Linear style that we've defined.
So, now we've got everything in place,
but we still haven't written a single
line of code. None of this is actually
built yet. So, how do we put this all
together? Now we're getting to the fun
part. So, once I approve that design
spec, we can go back to the agent and
say, "Approved. Move to step four." And
it will start coding. So, it's going to
take everything we set up in the earlier
steps and then write the whole app out
in the code. And it's just going to
build this piece to piece together. So,
the screenshots it's going to use, it's
going to use the code that we extracted,
and the design.md as another reference
point, and in a couple minutes we'll
have this app more or less built out.
See how incredibly easy this is, right?
It just had to do a quick architecture
check in, which it did, and it wrote
this whole file tree and component map.
You don't really need to worry about
that. I'm not even going to look at
this. Uh we'll just say proceed. And
we've got our first version of our
build. So, let's check it out at
localhost 3050. Open a new tab here.
Jesus. Uh I honestly thought I was I was
on Linear for a second. So, that's
Linear. Let's already just do a
comparison. Issues. [music]
Issues. Boom. Boom. I mean, it got You
can see the icons are the same. Looks
like it missed projects. For whatever
reason that icon isn't showing up. Uh
but the iconography is about the same.
The like placement of the tabs just
being kind of tabbed over is missed, but
this is like little nitpicky stuff. But,
let's actually like click around, too,
and see how it looks. Uh it even brought
in this linear diffs little announcement
here. Linear diffs, linear diffs. So,
let's click into an issue. Import your
data. Let's look at the right-hand side
panel properties. Very close. It's just
translucent for some reason. Same with
that. Same with that. Same with that.
Looks like all the labels are there. And
then does this? Okay, that doesn't work
either. Breadcrumbs, those work.
Backlog, projects. What does projects
look like in linear? Pretty darn close.
Views. What does views do? If views
doesn't do anything, I don't even know
what views is if I'm being honest.
Create custom views using filters to
show only the issues you want to see. I
don't think we need that, but yeah,
that's a that's only a nice to have. And
then we have projects here. I can't even
tell which one I'm on. Okay, I'm I'm on
linear there. Projects here. Issues,
what happens when we go command K,
command palette? Pretty good. What does
linear is this a a little bit better
looking. I like their shading. It's
pretty darn close there. Uh, what else?
Okay, actually creating an issue. I keep
choosing the wrong app. Okay, we're on
linear. Okay, there it is. Back to
linear. Okay, all this filtering, does
this work? Uh, it's so close. It's just
translucent for some reason. Oh, nice,
we got a nice little Kanban board. I
think linear does that, too. Board. Look
how close this is. You know, granted
we're not making incredibly complex app,
but to just one shot this output is
pretty darn impressive. It's usually,
honestly, it not this accurate on the
first go. I have this system set up to
where it shouldn't be that great because
it's only one agent doing one pass.
After the agent checks in a second time
here, that's when it will spawn sub
agents and have it check its work and
kind of go in this QA loop that I have
built into the system. But, we haven't
even done that yet. So, that's just the
first one shot output. I always like to
just have a check-in gate there. But,
now we can go back to the agent, give
our feedback, and then the agent knows
to also spawn QA sub agents, and it just
goes in a loop from implementation to QA
with other agents until it finally has
something worth bringing to me and then
I'll finally review it. So, this is
really just step one there, but for this
first output, pretty darn good. So, I'm
just going to go back to this agent and
riff for a second. Okay, um first pass
is pretty good. There are some things
missing though. For example, when I go
into linear into the main homepage, if I
select the filter, it is uh it's like
this weird translucent kind of view
where you can't actually see some of the
stuff. Like it gets cut off. Take a look
at the screenshot. And then also, when I
go when I click into an issue, the the
pop-up like toolbar, I see an emoji for
some reason. That's definitely wrong.
You need a map I see a bunch of emojis
with this pop-up toolbar, but you can't
even see this. Like look at the
screenshot. I can you're barely even
going to make this out, but I need you
to double-check this. This is an
important one with the agents cuz I have
a feeling that it's going to take some
work to get that right, but it needs to
match Linear's pop-up toolbar as closely
as possible. Let me just give you
Linear's. It's uh I don't even know what
you would call this. It's this
formatting toolbar. You should match the
iconography exactly and this needs to
work. So, you need to test this somehow
or have the agents test this in this
next QA step. There's other issues too.
For example, when I click into an issue,
we don't have the ability to add sub
issues. The comment box is not formatted
properly. Our comment box is not exactly
like Linear's. It's way cleaner of a
design and they have this nice little
send button and this attach feature.
That needs to be fixed. And then when
I'm in an issue, the properties tab on
the left or on the right, when I select
priority or assign or labels, that is
just again, it's I can't see it. It's
just translucent. Here's here's a
screenshot. And then finally, when I hit
command K, the command palette, that you
can't see it really either. So, stick to
the systems. Stick to the skill exactly.
Spawn QA agents and do not stop until
everything is fixed.
And it took a couple rounds of me just
telling the agent, keep going, keep
going, keep going, just pushing it
along. But now we've got apparently a
faithful recreation of Linear, a pixel
faithful according to Collab. Let's
check it out. And we'll go back to
localhost:3050,
hit refresh, and let's see if some of
these changes were made. Let's check out
command palette first. Nice, that's
looking pretty similar to Linear's. The
iconography is a little little bit
different, but I like the shading.
That's exactly what I wanted. Let's
click into an issue here. All right,
nice. We have this comment feature now.
Very similar to Linear's. If we just go
into Linear's, just do a random test,
test. Nice little comment feature. What
about sub issues? Sub issues could use a
little bit of work. Ours is not exactly
styled like theirs. So, let's just look
at the rest of these. If we look at the
panel on the right, to do, nice, that's
working. Nice. All of these are working.
Set due date, next week. Nice. Label,
add to project. Boom, that's looking
great. Projects, issues, filter. Filter
is now showing up properly. We can
select [music] board list. So, I'd say
we're about 95% of the way there in
cloning Linear. But let's just get this
thing deployed first because right now
it's on localhost:3050, and then we can
go back and make tweaks if we'd like.
So, I'll quickly discuss how to do that.
This is relatively easy. I just deployed
to Vercel. It's my preferred way to
deploy these apps. And what I do is I
have just given an agent previously the
Vercel API key, so it can just access my
Vercel right away and it knows my
account and it just deploys that
automatically. So, I don't need to go
into the Vercel UI, click around,
connect the GitHub repo, anything like
that. It just will automatically deploy
to Vercel. So, that's what I'm going to
tell the agent now. Okay, approved.
We're good to deploy to Vercel, and it
is fully deployed. So, we'll just go in
and check on that live link. Open it up
in our browser. And boom, just like
that, we have a live link. We've got a
fully functioning linear clone live
online. But like I mentioned, the point
is not to try to profit off this. I
guess you could, but best of luck. But
rather, now that it's ours, we can
customize it however we like and even
rebuild the stuff that Linear makes you
pay for. For example, I noticed Linear
keeps its insights dashboard, this
thing, insights. They keep this behind a
paywall. It seems like a pretty cool
feature. You have all these different
people on your team showing how many
tasks they have open, in progress, in
review. So, what we could do is we could
just take this. Looks like this is just
kind of docs, but we have a screenshot
here to reference. And that's probably
enough to just give it to an agent, copy
this, paste it into the agent, and say,
"Okay, now I want to build out this
feature." And then you can just
customize it however you like. It really
is kind of endless. So, you can keep
customizing, keep adding features,
however many you like. And then when
you're in a comfortable spot, the last
thing I want to build, and this is
arguably the most important part of this
entire thing, and that is giving an
agent like Claude access to this app
directly. So, let me show you what I
mean. If we go back to Linear, or our
>> [music]
>> Linear clone here, I want Claude to be
able to do everything that I could in
this application. So, creating new
issues, or going into the issue and
updating the contents in here, or adding
comments, or changing [music]
priorities, statuses, assignees, like
literally everything I could in the
application. Because if I'm clicking
around UIs, that is just so 2025. Like,
I'm joking, [clears throat] but I'm
seriously that lazy now where I don't
even want to press any buttons anymore.
I want the agents to be able to do
everything. And the beauty of this app
being our own is we can now do exactly
that. So, let me quickly show you how to
build this out and have your agent talk
to the app you just built. And to do
that, to get our agent to talk to our
custom app, we're going to build out an
MCP server. And I know that sounds
complicated. A year and a half ago, this
would have been a real project, but now
an agent could just do this in basically
one shot, especially since our system is
already pre-programmed to know how to do
this. So, if we just go back to our
agent in Cursor, I can say, "Now, build
out the MCP server and the API endpoints
follow the directions in our system.
Every button should be accessible by an
agent with the MCP. And it's going to
take that run with it look at the skill
file look at part B API and MCP to
follow the approach. We've got the API
endpoints and the MCP server built out.
It is connected. The agent went through
the entire MCP config set this up. So if
I go to another agent like a whole new
chat go to new terminal here open up
another Claude session I go slash MCP
and your clone is right here. Boom boom
it's connected. So I can just say create
an issue in linear clone for the
redesign set it to high due tomorrow and
then in like two seconds it just created
an issue. So if we go back to our clone
and just hit refresh boom there it is
just like that that easy. So now we've
got Claude or any agent with an ability
to chat with our application. So now
this starts to become a genuinely useful
project management tool. And yeah, I
know linear has an MCP server but it's
also just kind of fun to know that we've
built a platform from scratch for us and
an agent to access. Like we built an
entirely agentic platform in just a few
prompts. That to me is really fun.
That's much more fun than just using an
out of the box software. Okay, that is
how to clone linear and really most of
these SAS applications. I will include
the GitHub repo to this linear clone if
you want to just swipe that along with a
repo to the full cloning system. Just
copy the URL like I did in the beginning
of this video give it to your agent and
say follow this system exactly and would
love for people to put the system to the
test see how it does send me feedback so
I can keep making it better. Now an app
your agent can talk to isn't able to do
much if the agent itself hasn't been
configured properly. So check out this
video next I'll take you from zero to
your first working AI agent in 10
minutes no code no n8n just by talking
to it exactly like we just did in this
demo.