How to use Slicer with Claude Code

Claude Code is the agentic CLI version of Claude — it plans, edits files, runs commands, and ships features without you holding its hand. What it can't do is invent good design. Ask it for a hero section and it'll build something competent and generic — exactly like every other AI-built landing page on the internet.

Pair it with Slicer and that changes.

The workflow

1. Browse the web. Find a component you genuinely like (a hero on Linear, a pricing card on Vercel, whatever).
2. Click the Slicer icon, select the component, optionally remix on the Canvas with your brand color.
3. Export as AI Prompt.
4. In Claude Code, drop the prompt into your message:

Build this as a React component for my landing page. Use my brand color
(#6366f1) for primary actions, Tailwind for styling, and Lucide icons.
Keep the hover behavior and animation timing exactly as described.

[paste Slicer AI Prompt here]

Claude Code reads your project, sees what you've already got, and produces a component that fits — while looking like the reference, not like a generic AI output.

Why this fits Claude Code's strengths

Claude Code is built to read your files and write code that fits your project. The bottleneck is the spec. A vague prompt produces vague code. A specific prompt produces a specific component.

A Slicer export is about as specific as a spec gets — exact colors, spacing, hover states, animation timing, responsive breakpoints. Claude Code takes that and integrates it in your project without inventing anything.

Save it as a CLAUDE.md pattern

If you use Slicer with Claude Code regularly, add this to your CLAUDE.md file at the root of your project:

## Adapting Slicer exports
 
When I paste a Slicer AI Prompt:
1. Use any existing components I already have when possible
2. Swap any source hex colors for my brand colors
3. Use Lucide icons instead of inline SVGs
4. Extract text content into props so I can reuse the component
5. Keep hover states, transition timing, and responsive behavior intact

Now every time you paste a Slicer export, Claude Code already knows how you want it integrated.

The result

You stop describing UI and start adapting it. Claude Code goes from "competent generator of generic SaaS UI" to "fast integrator of design you actually like."

Install Slicer, find a component you like, paste the export into Claude Code, and ship.