Editing with AI Tools

Lerret assets are plain React components, so any AI coding tool that edits files can edit them. To make the loop quick, Lerret ships two integration surfaces: an installable Claude Code plugin (the fastest path if you live in Claude Code), and a set of per-project AI-tool files scaffolded by create-lerret — one per major tool, each rendering the same Lerret authoring conventions in that tool’s native format. This page covers the plugin, what auto-installs in scaffolded projects, how to add the files to an existing project, the permission/disclosure model, an optional aesthetic upgrade for Claude Code, and a handful of example prompts grounded in the sample assets.

Looking for the built-in agent? This page is about driving edits from your own AI tool. Lerret also has an AI agent built into the studio — you prompt it from the dock and it edits your files for you, with your own provider key or a local Ollama. See AI in the Studio.

The Claude Code plugin

In Claude Code ? This is the fastest way to use Lerret. Install the plugin and let your own Claude design the assets — no API keys, no BYOK, no separate AI service:


/plugin marketplace add Belikely-United/marketplace
/plugin install lerret@belikely-united

Then one do-anything command — /lerret (currently v0.2.3) — handles the rest. Just describe what you want:


/lerret make a 1200x630 og-image titled "Ship faster"

No sub-commands to remember. By intent, /lerret sets the project up on first run, authors and edits the .jsx, previews the studio live, exports to PNG/JPG, or clears samples — shelling to @lerret/cli under the hood and rendering each result to verify. It’s model-invoked too: saying “make me an OG image” triggers it without typing the command.

A few things worth knowing:

Where it runs: Claude Code only — the CLI, the desktop app (with in-pane live preview), VS Code, and claude.ai/code. Not the plain claude.ai chat. The plugin is free, MIT-licensed, and never gated.
Relationship to the scaffolded files below: the plugin’s authoring skill is generated from the same single content source as the per-project integration files, so it encodes identical conventions. With the plugin installed you don’t need the per-project .claude/ files — the plugin travels with your Claude Code, not with the project.
Relationship to the in-studio agent: the in-studio AI runs in the browser with your own provider key; the plugin uses your existing Claude Code session as the brain — no keys involved.

What auto-installs in scaffolded projects

When you run npx create-lerret@latest my-canvas, the scaffolder writes the following files alongside .lerret/:

AI tool	File(s) installed	Convention
Claude Code	`.claude/skills/lerret-author/SKILL.md`	Project-scoped skill (auto-discovered)
Cursor	`.cursor/rules/lerret.mdc`	MDC rules (frontmatter + body)
GitHub Copilot	`.github/copilot-instructions.md`	Custom instructions
Codex / Antigravity / Aider / Cline / others	`AGENTS.md` (at project root)	Cross-tool standard (agents.md )

All four ship by default. The content is rendered from a single source of truth so each tool sees the same conventions — components, meta, propsSchema, data files, variants, fonts, the prop cascade, the component-prefixed image-naming rule, and the full @lerret/cli command surface — adjusted only for that tool’s native format.

The files load automatically the moment you open the project in their respective tools — there is no setup step, no command to run, no config to edit. The first time you describe an asset change (“make the headline tighter”, “add a dark variant”), the tool engages with Lerret-aware context and produces a .jsx edit that follows the framework’s conventions.

The scaffolder also drops a small project-scoped Claude command file under .claude/commands/. It predates the marketplace plugin; in Claude Code use /lerret instead, and delete the file if you’d rather not see it in the slash picker.

If you don’t want a given tool’s file, delete it after scaffolding — nothing else in the project depends on it.

Permission and disclosure

create-lerret writes nothing silently. After scaffolding completes, the success message prints an explicit AI-tool integrations created: section listing every AI-tool file written, one per line. You see exactly what landed in your workspace before you run anything against it. The same disclosure model will extend to future flows that touch existing workspaces (e.g. an @lerret/cli init command for adding Lerret to a folder you already own); those will require explicit confirmation before writing rather than printing a summary after the fact.

Manual install for existing projects

If your Lerret project predates the bundled AI-tool files — or you’re adding Lerret to a repo that was not scaffolded by create-lerret — render a fresh set with create-lerret and copy the files you want into your project.


# From the root of your existing project (the folder that contains `.lerret/`):
npm create lerret@latest /tmp/lerret-scratch --no-samples

# Copy whichever AI-tool integrations you want into your project:
cp -r /tmp/lerret-scratch/.claude .
cp -r /tmp/lerret-scratch/.cursor .
mkdir -p .github && cp /tmp/lerret-scratch/.github/copilot-instructions.md .github/
cp /tmp/lerret-scratch/AGENTS.md .

rm -rf /tmp/lerret-scratch


# From the root of your existing project (the folder that contains `.lerret/`):
pnpm create lerret@latest /tmp/lerret-scratch --no-samples

# Copy whichever AI-tool integrations you want into your project:
cp -r /tmp/lerret-scratch/.claude .
cp -r /tmp/lerret-scratch/.cursor .
mkdir -p .github && cp /tmp/lerret-scratch/.github/copilot-instructions.md .github/
cp /tmp/lerret-scratch/AGENTS.md .

rm -rf /tmp/lerret-scratch


# From the root of your existing project (the folder that contains `.lerret/`):
yarn create lerret /tmp/lerret-scratch --no-samples

# Copy whichever AI-tool integrations you want into your project:
cp -r /tmp/lerret-scratch/.claude .
cp -r /tmp/lerret-scratch/.cursor .
mkdir -p .github && cp /tmp/lerret-scratch/.github/copilot-instructions.md .github/
cp /tmp/lerret-scratch/AGENTS.md .

rm -rf /tmp/lerret-scratch


# From the root of your existing project (the folder that contains `.lerret/`):
bun create lerret@latest /tmp/lerret-scratch --no-samples

# Copy whichever AI-tool integrations you want into your project:
cp -r /tmp/lerret-scratch/.claude .
cp -r /tmp/lerret-scratch/.cursor .
mkdir -p .github && cp /tmp/lerret-scratch/.github/copilot-instructions.md .github/
cp /tmp/lerret-scratch/AGENTS.md .

rm -rf /tmp/lerret-scratch

The --no-samples flag keeps the scratch project minimal — it skips the sample assets but still ships every AI-tool integration. Copy only the lines above that match the tools you actually use; the scratch folder is thrown away either way.

This is the canonical path because the integration files are rendered fresh from a single content source inside create-lerret — there are no static copies to fetch directly. Commit the resulting files alongside .lerret/ so every collaborator gets the same AI behavior in whichever tool they prefer.

Optional: the `frontend-design` plugin (Claude Code)

Anthropic publishes an official Claude Code plugin called frontend-design that layers in distinctive typography, cohesive color palettes, motion conventions, and a set of anti-AI-slop guardrails — designed to keep the model from defaulting to generic-looking UI. The bundled Lerret integration files already embed the same aesthetic principles internally (Cursor and Copilot users get them too, via their respective files), but installing the dedicated Claude plugin reinforces them across every frontend task in Claude Code — not just Lerret edits — and gives you a second layer of aesthetic discipline.

Install it from Claude Code:


/plugin marketplace add anthropics/claude-plugins-official
/plugin install frontend-design@claude-plugins-official

The marketplace itself lives at github.com/anthropics/claude-plugins-official . The bundled Lerret files work fine without the plugin — it’s a pure aesthetic upgrade for Claude Code, complementary to the Cursor/Copilot/AGENTS.md content rather than a replacement.

Example prompts

These are grounded in the sample assets that ship with create-lerret’s default teaching preset (og-card.jsx and tw-banner.jsx under .lerret/social/, business-card.jsx under .lerret/brand/, landing-hero.jsx under .lerret/landing/). The /lerret-edit slash command is Claude Code-specific, but the underlying intents work for any tool — feed them directly to the /lerret plugin, Cursor’s chat, Copilot’s prompt box, or any AGENTS.md-aware agent and you’ll get the same Lerret-aware behavior because they’re all reading the same conventions.

Add a brand avatar to the X banner.


/lerret-edit add an avatar to tw-banner.jsx — drop a new tw-banner-avatar.png in social/ and wire it in

The bundled conventions know the component-prefixed image-naming rule (tw-banner-avatar.png co-located in .lerret/social/, not in a shared assets/ folder), so the model places the file in the right spot and references it correctly.

Add a fourth variant to the X banner.


/lerret-edit add a Conference variant to tw-banner.jsx announcing an upcoming talk

The conventions know that variants are extra named exports in the same file (not new files), that meta is shared across all variants, and that tw-banner.data.json is keyed by export name. The model adds an export const Conference = ... next to the existing Maker and Talk variants and a matching Conference key in the data file.

Re-theme every asset on the social page.


swap the brand accent color across all assets in social/ to oklch(0.7 0.2 30)

The conventions know the four-tier prop cascade and the vars block in config.json. The sample assets source their palette from vars (--brandColor, --neutralDark, …), so the model updates config.json once rather than editing each asset.

Add a 9:16 story-size version of the OG card.


/lerret-edit add a 9:16 vertical story version of og-card.jsx

Variants share the file’s meta — including dimensions — so the model will either split the vertical version into a new file with its own meta, or restructure the existing component to accept a dimensions override from propsSchema. It picks the path that fits the file’s existing shape.

Bring in a new display font.


/lerret-edit drop a new display font into _fonts/ and use it for the og-card headline

The conventions know that fonts in .lerret/_fonts/ are auto-registered as @font-face rules — no import, no manual CSS. The model uses the font’s family name directly in inline styles, the same way the samples use the bundled 'LerretFixtureMono'.

Troubleshooting

Claude Code does not seem to pick up the skill.

Confirm .claude/skills/lerret-author/SKILL.md exists at the project root (not nested under another folder).
Open the file and check the YAML frontmatter — the name and description fields must be present and well-formed. A missing or malformed frontmatter block will prevent auto-discovery.
Restart Claude Code with the project root as the working directory. Skills are discovered when the project is loaded, not mid-session.

/lerret is not in the slash-command list.

Confirm the plugin is installed: /plugin marketplace add Belikely-United/marketplace, then /plugin install lerret@belikely-united.
Type / to bring up the picker and verify lerret is listed. Restart Claude Code if you installed mid-session.
The plugin is Claude Code-only. In the plain claude.ai chat there are no slash commands to install — use the conventions files instead.

Cursor isn’t applying the Lerret rule.

Confirm .cursor/rules/lerret.mdc exists at the project root. Cursor scans .cursor/rules/*.mdc when the project is opened.
Check the MDC frontmatter — Cursor uses the description and globs fields to decide when the rule fires. Make sure the file wasn’t truncated or reformatted in transit.

Copilot doesn’t seem aware of Lerret.

Confirm .github/copilot-instructions.md exists. Copilot reads it from the repo root’s .github/ directory.
In VS Code, enable Copilot’s “Use custom instructions” setting if it isn’t already on. Reload the window after adding the file.

AGENTS.md isn’t being picked up.

Confirm AGENTS.md is at the repository root (not inside a subdirectory). Most agents look there only.
Different agents read the file at different times — some on session start, some lazily. Check your agent’s docs for the exact discovery rule if a fresh session doesn’t pick it up.

I use the hosted studio (app.lerret.belikely.com) and don’t have local files.

The bundled AI-tool files are local-project-scoped — Claude Code reads .claude/, Cursor reads .cursor/, Copilot reads .github/copilot-instructions.md, and AGENTS.md is read by whichever agent you point at the checked-out repo. If you’re working entirely in the hosted studio without a local checkout, none of those discovery paths apply. The files are all plain Markdown though: open the one matching your tool (Claude → SKILL.md, Cursor → lerret.mdc, Copilot → copilot-instructions.md, anything else → AGENTS.md) and paste its contents into your tool’s system prompt or rules panel — you get the same conventions either way.

What’s next

Authoring Assets — the same conventions the bundled files encode, in human-readable form. Useful when you want to read what the model is reading.
CLI Reference — @lerret/cli dev and @lerret/cli export flags. The bundled files know these, but the reference is the source of truth.
Examples — sixteen runnable assets to crib from. Many of them are excellent starting prompts for /lerret or your own AI tool.