For anyone building with AI

Your AI design engineer for building better products

Turtlekit works inside the AI tool you already use. It gives your AI what a professional team knows, so what you build looks polished and works properly.

Join the waitlist

No design or coding background needed. The first 100 on the waitlist pay $7.99 a month.

Client Monitor

Clients 4 of 5 need attention

Ridgeway Roofing
Problem
3,046 clicks Up 45%
1 open issue
Evergreen HVAC
Needs attention
536 clicks Down 35%
2 open issues
Harbour Dental
Needs attention
674 clicks Down 5%
1 open issue
Fulton Movers
Needs attention
687 clicks Down 2%
2 open issues
Fernwood AI
Fine
2,792 clicks Up 52%
No open issues

Client issues

Checked daily, last just now. Check again

High“quote_request” stopped recording0Ridgeway Roofing · Last 7 days
MediumLeads + calls down 38%28Down 38%Evergreen HVAC · Leads + calls
MediumGoogle clicks down 35%536Down 35%Evergreen HVAC · Google clicks
MediumLong distance moving page: clicks down 45%70Down 45%Fulton Movers · Google clicks
MediumTeeth whitening page: clicks down 55%65Down 55%Harbour Dental · Google clicks

Turtlereport The Client Monitor in WordPress, built with TurtlekitIts client report, drawn here with TurtlekitIts website’s home page, built with Turtlekit

A professional team inside your AI

Turtlekit gives your AI the know-how of four experts.

A designer
Cares about the details, from spacing and type to colour.
Your whole brand from one colour, and every state designed.
A developer
Writes clean, consistent code and checks every change.
Built on proven patterns, and checked before you see it.
An engineer
Makes it work on every screen, for everyone who uses it.
Tables become cards on a phone, and nothing scrolls sideways.
A product advisor
Asks the right questions first, and recommends an answer.
Arranges your data so what needs you comes first.

How it works

1Connect Turtlekit to your AI tool.Opening soon
2Describe what you want, in your own words.
3Get pages that look and work like a professional team built them.

Remember me

Cancel

Weekly digest

Every Monday.

Report sent

To 3 clients.

Storage used

4 GB free.

128

Trial ends Friday.

Remember me

Cancel

Weekly digest

Every Monday.

Report sent

To 3 clients.

Storage used

4 GB free.

128

Trial ends Friday.

Remember me

Cancel

Weekly digest

Every Monday.

Report sent

To 3 clients.

Storage used

4 GB free.

128

Trial ends Friday.

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

SignIn.tsx

1<Stack gap="stack">2  <Checkbox3    label="Remember me"4    defaultChecked5  />6  <Button>7    Sign in8  </Button>9</Stack>

SaveActions.tsx

1<Inline gap="tight">2  <Button3    variant="soft"4    href="/projects"5  >6    Cancel7  </Button>8  <Button>Save</Button>9</Inline>

WorkEmail.tsx

1<TextField2  label="Work email"3  type="email"4  autoComplete="email"5/>

WeeklySummary.tsx

1<Switch2  label="Weekly digest"3  hint="Every Monday."4  defaultChecked5/>

TeamMembers.tsx

1<Inline gap="tight">2  <Avatar name="Mia" />3  <Avatar name="Leo" />4  <Avatar name="Ana" />5  <Badge>+3</Badge>6</Inline>

ReportSent.tsx

1<Toast2  tone="success"3  title="Report sent"4>5  To 3 clients.6</Toast>

StorageUsed.tsx

1<Progress2  label="Storage used"3  value={62}4  message="4 GB free."5/>

Starred.tsx

1<Inline gap="tight">2  <Toggle3    label="Star"4  />5  <Badge>6    1287  </Badge>8</Inline>

ZoomLevel.tsx

1<Slider2  label="Zoom"3  defaultValue={120}4  min={50}5  max={200}6/>

MemberRole.tsx

1<Select2  label="Role"3  options={[4    "Editor",5    "Viewer",6  ]}7  defaultValue="Editor"8/>

TrialEnding.tsx

1<Callout>2  Trial ends Friday.3</Callout>

Your AI is powerful. Turtlekit adds a designer’s eye.

Switch to see what Turtlekit changes.

Your AIWith

Built with Turtlekit

A real product, not a demo.

Checks your sites every morning and tells you what changed. For your clients, or for yourself.
- The pluginThe Client Monitor and every other screen
- The websiteIts new home page
Visit Turtlereport

How Turtlekit compares

What each kind of tool gives your AI today.

Capability		Copy-in component libraries	Headless primitives	AI app builders	Themes and UI kits	Agent skills and rules files
Parts that refuse one-off styles	Yes	No	No	Partly	No	No
Spacing, type and states decided for you	Yes	Partly	No	Partly	Partly	Partly
Keyboard, focus and contrast built in	Yes	Yes	Partly	Partly	Partly	Partly
Light, dark, right to left and phone	Yes	Yes	Partly	Partly	Partly	Partly
Each problem in your AI’s code returned with its fix	Soon	No	No	Partly	No	No
Works in your own project, with your own AI tool	Yes	Yes	Yes	Partly	Yes	Yes
From an idea to a hosted app	No	No	No	Yes	No	No
Drag-and-drop page editing	No	No	No	Partly	Partly	No

Yes
Partly, or with more work
No
With Turtlekit Pro, opening soon

Marked from each category’s own docs, November 2026.

Questions people ask first

Why another tool, and what it changes for you.

What gap does Turtlekit actually fill?

The design decisions between the parts and the page. Libraries give your AI parts and app builders give you pages, but spacing, hierarchy and states are often left to the model’s guess. Turtlekit makes those decisions once and builds them into parts that refuse one-off styles, so page fifty still matches page one.

Copy-in component libraries already exist. Why another one?

Copy-in libraries are great when you want to own and reshape every line. Turtlekit is for when your AI is the one reshaping: its parts take named options, and TypeScript refuses a one-off style. The button on page fifty is still the button you started with.

AI app builders already make pages from a prompt. Why do I need this?

They’re the fastest way from an idea to a running app. Turtlekit is for building in your own React project, with the AI coding tool you already use. The design lives in the parts, not in each prompt, so every new page starts from the same decisions as the first.

There are free design skills and rules files everywhere. Why Turtlekit?

Skills and rules files are good advice, and you can keep yours. But your AI may skip advice in a long session, and nothing checks the result: Turtlekit’s parts refuse one-off styles, and when Turtlekit Pro opens, each problem comes back with its fix. A skill tells your AI what good looks like; Turtlekit makes sure it gets there.

Do I need a design background?

No, that’s the point. Turtlekit’s parts come with a designer’s calls already made, so you describe what you want in your own words and judge the result by how it looks. Bring your brand colour; Turtlekit takes it from there.

Does it lock me in?

No. The components are free under the MIT licence, your pages are ordinary React in your own repository, and your app never calls our servers. Stop paying for Turtlekit Pro and everything you built still builds and runs.

More on primitives, themes, your AI tool and price.

All questions

Turtlekit Pro opens soon

Your AI connects to it, gets a designer’s guidance, and checks its work before you see it.

The components are on npm today.

Get the beta

Search the docs

Appearance

Your AI design engineer for building better products

A professional team inside your AI

A designer

A developer

An engineer

A product advisor

How it works

Your AI is powerful. Turtlekit adds a designer’s eye.

Built with Turtlekit

How Turtlekit compares

Questions people ask first

What gap does Turtlekit actually fill?

Copy-in component libraries already exist. Why another one?

AI app builders already make pages from a prompt. Why do I need this?

There are free design skills and rules files everywhere. Why Turtlekit?

Do I need a design background?

Does it lock me in?

Turtlekit Pro opens soon

Menu

Your AI design engineer for building better products

A professional team inside your AI

A designer

A developer

An engineer

A product advisor

How it works

Your AI is powerful. Turtlekit adds a designer’s eye.

Built with Turtlekit

How Turtlekit compares

Questions people ask first

What gap does Turtlekit actually fill?

Copy-in component libraries already exist. Why another one?

AI app builders already make pages from a prompt. Why do I need this?

There are free design skills and rules files everywhere. Why Turtlekit?

Do I need a design background?

Does it lock me in?

Turtlekit Pro opens soon

Hear when it opens