Einen Snippet-Prompt im eigenen Projekt nutzen

Du hast einen Prompt kopiert. Hier steht, wohin er gehört, was du drumherum sagst und was du prüfst, wenn das Ergebnis nicht zur Demo passt.

Schritt 1: dem Tool die richtige Datei zeigen

Sag dem Tool vor dem Einfügen, in welche Datei die Styles gehören und welches Element die Klasse bekommt. Eine Zeile reicht: "Apply this to the submit button in src/components/Form.tsx, styles go in form.css." Ohne diese Zeile rät Claude Code halbwegs vernünftig, und Cursor legt manchmal eine neue Datei neben der an, die du meintest.

Schritt 2: den Prompt unverändert einfügen

Der Prompt enthält bereits die Zahlen und das Markup. Fass ihn nicht zusammen. Kürze nicht die Hover- und Fokus-Zeilen, um Platz zu sparen; genau die Teile machen Tools von allein falsch.

Schritt 3: drei Dinge prüfen

• Der Klassenname hat überlebt. Tools benennen .btn-041 gern in .primary-button um. In Ordnung, wenn du darum gebeten hast. Wenn nicht, zielt der Rest des Prompts jetzt vielleicht ins Leere.
• Keine Abhängigkeit kam dazu. Öffne den Diff. Wurde in package.json eine Animationsbibliothek für zwölf Zeilen Keyframes ergänzt, mach das rückgängig und sag noch einmal "plain CSS only".
• Fokus funktioniert noch. Tab zum Element. Ist die Outline weg, hat das Tool die :focus-visible-Regel gestrichen. Fordere sie zurück.

Farben anpassen

Der schnellste Weg, ein Snippet in deine Palette zu holen: Prompt einfügen, dann ergänzen "replace #2563eb with our brand blue, which is #1b4fd8, and keep the same lightness steps for hover and active." Das Tool rechnet die dunkleren Töne neu. Nutzt dein Projekt CSS Custom Properties, sag "use var(--brand) instead of the hex" und es verdrahtet sie.

Wenn das Ergebnis trotzdem anders aussieht

In neun von zehn Fällen ist es eins davon:

1. Ein globaler Reset in deinem Projekt setzt border-radius: 0 oder box-shadow: none auf Buttons. Prüf die Kaskade.
2. Die Schrift. Demos nutzen den System-Font-Stack. Dein Projekt nutzt etwas Schmaleres oder Breiteres, also wirkt das Padding falsch. Pass das Padding an, nicht die Schrift.
3. Tailwind Preflight. Es entfernt Button-Hintergründe. Ergänze type="button" und die Klasse und stell sicher, dass die CSS-Datei nach den Utilities lädt.

Stattdessen den Markdown-Zwilling nutzen

Jede Snippet-Seite hat eine .md-Version unter derselben Adresse. Kann dein Tool URLs lesen (Claude Code kann das per Fetch), sparst du dir die Zwischenablage und sagst "read designforai.dev/snippet/btn-041.md and apply it to the checkout button". Gleicher Inhalt, kein Kopierschritt.