Using a snippet prompt in your project

You copied a prompt. Here is where to paste it, what to say around it, and what to check when the result does not match the demo.

Step 1: point the tool at the right file

Before pasting, tell the tool which file the styles belong in and which element gets the class. One line is enough: "Apply this to the submit button in src/components/Form.tsx, styles go in form.css." Without that line, Claude Code will make a reasonable guess, and Cursor will sometimes create a new file next to the one you wanted.

Step 2: paste the prompt as-is

The prompt already contains the numbers and the markup. Do not summarise it. Do not trim the hover and focus lines to save space; those are the parts tools get wrong on their own.

Step 3: check three things

• The class name survived. Tools like renaming .btn-041 to .primary-button. Fine if you asked for it. If you did not, the rest of the prompt may now target nothing.
• No dependency was added. Open the diff. If package.json changed to add an animation library for a 12-line keyframe, revert that and say "plain CSS only" again.
• Focus still works. Tab to the element. If the outline is gone, the tool dropped the :focus-visible rule. Ask for it back.

Adapting the colours

The fastest way to fit a snippet into your palette: paste the prompt, then add "replace #2563eb with our brand blue, which is #1b4fd8, and keep the same lightness steps for hover and active." The tool will recompute the darker shades. If your project uses CSS custom properties, say "use var(--brand) instead of the hex" and it will wire them.

When the result still looks different

Nine times out of ten it is one of these:

1. A global reset in your project sets border-radius: 0 or box-shadow: none on buttons. Check the cascade.
2. The font. Demos use the system font stack. Your project uses something narrower or wider, so padding looks off. Adjust the padding, not the font.
3. Tailwind preflight. It strips button backgrounds. Add type="button" and the class, and make sure the CSS file loads after the utilities.

Using the markdown twin instead

Every snippet page has a .md version at the same address. If your tool can read URLs (Claude Code can, with a fetch), you can skip the clipboard and say "read designforai.dev/snippet/btn-041.md and apply it to the checkout button". Same content, no copy step.