# 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.

### Tip

Building a full landing page? Save 8–10 Slicer exports into a `references/` folder, then tell Claude Code: "Build out my landing page using the components in references/ — hero first, then features, then pricing." It'll work through them while you go make coffee.

## 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](/content/site-root.html), find a component you like, paste the export into Claude Code, and ship.