---
title: Annotate and adopt your code
description: Connect your code to the Agent-Native Canvas and bring its existing
  style into your brand.
canonical_url: https://designless.io/docs/capsules/annotate
---

# Annotate and adopt your code

Connect your code to the Agent-Native Canvas and bring its existing style into your brand.

## Ask the Designless Agent

Designless, connect my local project to canvas editing. Keep its current look first, identify the source behind the page and show me the setup changes before applying them.

## Connect canvas edits to your source

In your local project, ask your agent to set up Designless for your framework. The annotate package supports development-time canvas editing. Your agent applies the reviewed setup and starts your development server and checks that the canvas can identify the part you want to change. The npm examples are for projects already using Node.js and npm. Use vite instead of next for a Vite project.

## Adopt the style already there

Ask your agent to read the style values in your codebase before applying the brand. The extract package reads the local project so you can review what is there.

## Review the rewrite

Ask your agent to replace hard-coded styles with your brand while keeping the structure you want. Review the diff and the running page before opening a pull request. Your agent opens the pull request from your own checkout, with your git and the GitHub CLI (gh) signed in to your account, and asks you before it does.

## Connect canvas editing and read existing styles

```
npm create designless@latest -- next

npm create designless@latest -- extract
```

[Get started](https://designless.io/docs/get-started)

[Compare plans](https://designless.io/pricing)