Design Feel Like Your Own Product

Lernt die Figma-"Signature Moves" eines Designers, damit neue Komponenten sich selbstgemacht anfühlen, nicht kopiert.

von Tiannanzhao · Tiannanzhao/design-feel-like-your-own-product

Getestet · Funktioniert ★ 9.2/10

Design Feel Like Your Own Product — Lernt die Figma-"Signature Moves" eines Designers, damit neue Komponenten sich selbstgemacht anfühlen, nicht kopiert.

Was es kann

Liest eine Figma-Datei über den Figma MCP-Server, um ein semantisches Modell der Farbrollen, Abstands-/Radius-Signaturen und Informationshierarchie eines Designers zu erstellen, und generiert dann neue Komponenten aus diesem internalisierten Modell, anstatt rohe Pixelwerte zu kopieren. Löst aus, wenn ein Benutzer eine Figma-Datei teilt und nach neuen Komponenten, Plugins oder Benutzeroberflächen fragt, die 'dem Stil entsprechen' oder ein bestehendes Designsystem erweitern sollen, und degradiert anmutig zu eingefügten Spezifikationen oder einem Screenshot, wenn die Figma MCP-Tools nicht verfügbar sind.

Testbericht

Führte die Mini-Aufgabe im dokumentierten Fallback-Modus des Skills (Figma-MCP nicht verfügbar) aus: Ausgehend von nur eingefügten Designsystem-Spezifikationen leitete er eine Zwei-Ebenen-Radiusregel ab (6px interaktiv / 8px Oberfläche) und verwendete denselben Teal-Hex-Code sowohl für den primären Button als auch für den 'aktiven' Status-Pill, anstatt eine neue Farbe zu erfinden, konkret bodenständiger als ein generisches SaaS-Basis-Modal. Einzeldatei, in sich geschlossener Skill; Lizenz ist CC BY-NC 4.0 nicht-kommerziell, im README im Voraus offengelegt, nicht versteckt.

Getestet am: 2026-07-15 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/Tiannanzhao/design-feel-like-your-own-product.git
mkdir -p ~/.claude/skills
cp -r design-feel-like-your-own-product ~/.claude/skills/design-feel-like-your-own-product

Befehle & Beispiel-Prompts

/design-feel-like-your-own-productLernt die Figma-"Signature Moves" eines Designers, damit neue Komponenten sich selbstgemacht anfühlen, nicht kopiert.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

build a new settings modal that matches our Figma design system
generate a component that feels like it came from our own design file
match the spacing and color roles from our Figma when designing this

Vollständiger Testbericht (Englisch) →