Does Slicer work with Claude Code?

Yes. Slicer's AI Prompt export is designed to paste directly into Claude Code. It contains all design specs — colors, spacing, hover states, animation timing — so Claude Code can integrate a real component rather than generating a generic one.

Do I need to write a prompt for Claude Code?

No. Slicer's AI Prompt already contains everything Claude Code needs. Just paste the export and Claude Code has the complete design spec to work with.

How does Slicer work with Claude Code's agentic mode?

Save Slicer exports as files in a references/ folder in your project. Tell Claude Code to implement the components in references/ — it reads the files, understands your existing codebase conventions, and integrates the components while preserving your architecture.

Can I add CLAUDE.md instructions for working with Slicer exports?

Yes. Add a section to your CLAUDE.md telling Claude Code how to handle Slicer exports — e.g. use existing components from your UI library, swap brand colors, use Lucide icons instead of inline SVGs. Claude Code will apply these rules every time you paste a Slicer export.

Slicer + Claude Code

Copy any website component into Claude Code

Claude Code ships features autonomously. What it can't do is invent good design. Give it real components from real websites — and get production-quality UI without generic AI defaults.

Free plan · Chrome only · No credit card

Any website

Claude Code

✓ AI Prompt pasted

Claude Code

Slicer extracts any website component — styles, hover states, animations, responsive rules — and exports a structured AI prompt. Paste it directly into Claude Code. No manual description needed. Claude Code reads your project, understands your conventions, and integrates the component while preserving your architecture.

5.0

Chrome Web Store

+2000slices extracted

We've been building UI the hard way.

Screenshot, describe, prompt, iterate, fix — over and over. There's a faster path.

The usual workflow

~47 min

Screenshot

Describe to AI

AI misunderstands

Re-describe

Fix CSS

Add assets

Create React component

Make responsive

Test breakpoints

Still not right

Animations lost. Interactions gone. Hover states? Good luck describing those.

With Slicer

~30 sec

Point

Copy

Ship

Animations, interactions, hover states — all preserved automatically.

Claude Code reads your whole project. That changes everything.

Most AI editors generate standalone components. Claude Code integrates into your existing codebase — it knows your file structure, your conventions, and your existing components.

Without Slicer

Claude Code invents a hero section from scratch
Generic SaaS aesthetic, shadcn defaults
Hover states described loosely — or missing
Animations imagined, not extracted from a real source
You iterate 3–5 times to get something that looks right

With Slicer + CLAUDE.md

Claude Code adapts a real component into your project
Visual quality inherited from the source design
Hover states and animations captured exactly by Slicer
Semantic tokens, Lucide icons, and your conventions applied automatically
First output fits. No iteration needed.

CLAUDE.md — add this once, applies every time

## Adapting Slicer exports

When I paste a Slicer AI Prompt:
1. Use existing components from src/components/ui/ where possible
2. Swap extracted hex colors for my semantic tokens (bg-primary, text-heading)
3. Use Lucide icons instead of inline SVGs
4. Extract content into props — no hardcoded strings
5. Preserve hover states, transition timing, and responsive behavior

Set this once in your CLAUDE.md and every Slicer export you paste into Claude Code gets automatically adapted to your project's conventions, tokens, and component library.

Real components,
copied in one click

Every component below was extracted from a live website using slicer.dev browser extension

Notion AI use cases

312

Use case grid with icons and links

Flow testimonials

189

Testimonial marquee — dark theme

Customer case study tabs

276

Tabbed case studies with logo tabs

Startup customer carousel

147

Logo overlays — Lovable, Supabase

Notion AI use cases

312

Use case grid with icons and links

Flow testimonials

189

Testimonial marquee — dark theme

Customer case study tabs

276

Tabbed case studies with logo tabs

Startup customer carousel

147

Logo overlays — Lovable, Supabase

Notion AI use cases

312

Use case grid with icons and links

Flow testimonials

189

Testimonial marquee — dark theme

Customer case study tabs

276

Tabbed case studies with logo tabs

Startup customer carousel

147

Logo overlays — Lovable, Supabase

Browse the slice library

How slicer works

From any website to your project in 5 steps

Browse any website

Every page is a source of reusable components.

Open Slicer extension

Every component on the page becomes selectable - buttons, heroes, pricing tables, navbars.

Copy any component

Click on a component to copy. All styles, animations, states, and interactions preserved.

Remix on Canvas

Apply your brand style and design system. Transform components visually before exporting.

Export as prompt or code

Instantly get an AI-ready prompt or clean React component. Paste directly into Lovable, Bolt, v0, or Cursor.

Export options showing prompt and React code

Everything captured. Nothing left behind.

Every interaction, every animation, every state — captured automatically, works with any tool you already use

Hover States

transitiontransformopacitykeyframesease-in-outscalerotatetranslateYfadeInbouncecubic-bezierdelayinfinitespringtranslateXskewalternateforwardsorbittransitiontransformopacitykeyframesease-in-outscalerotatetranslateYfadeInbouncecubic-bezierdelayinfinitespringtranslateXskewalternateforwardsorbit

CSS Animations

Interactions

Responsive Layouts

<Button

variant="primary"

hover="scale-105"

animate="fadeIn"

>Get Started</Button>

Clean Output

Slicer Canvas: Restyle extracted components

Combine slices, apply your brand, and restyle with AI — all on an infinite canvas.

Open Slicer Canvas

100%

Merge components into oneApply visual styleRebrand any componentDebrand & neutraliseGenerate new variantsRemix & rearrangeExport prompt or ReactVisual iteration history

Questions about Slicer + Claude Code

Simple, transparent pricing

Start immediately. Cancel anytime.

Free

Perfect for trying out Slicer

€0

5 extractions per month
AI code generation
Prompt & React export
Screenshot capture
Interactive component capture
Priority AI models
Figma, Framer export (coming soon)

Launch OfferPro

For designers & developers who ship fast

€15€10/month

Unlimited extractions
AI code generation
Prompt & React export
Screenshot capture
Interactive component capture
Priority AI models
Figma export (coming soon)

Team

Collaborate with your team

€30/month

Everything in Pro
Shared Canvas files
Team slice library
Collaboration features
Priority support

7-day money-back guarantee

Not happy in the first 7 days? We'll refund you in full, no questions asked.

Start using Slicer with Claude Code today

Install the Chrome extension and paste your first real component into Claude Code in under a minute.

Copy any website component into Claude Code

We've been building UI the hard way.

Claude Code reads your whole project. That changes everything.

Real components, copied in one click

How slicer works

Browse any website

Open Slicer extension

Copy any component

Remix on Canvas

Export as prompt or code

Everything captured. Nothing left behind.

Slicer Canvas: Restyle extracted components

Questions about Slicer + Claude Code

Does Slicer work with Claude Code?

Do I need to write a prompt for Claude Code?

How does Slicer work with Claude Code's agentic mode?

Can I use CLAUDE.md to control how Claude Code handles Slicer exports?

What's different about Claude Code vs other AI editors with Slicer?

Further reading

Simple, transparent pricing

Start using Slicer with Claude Code today

Real components,
copied in one click