Design Feel Like Your Own Product

Učí se „charakteristické tahy“ designéra ve Figmě, aby nové komponenty působily jako vlastní výroba, nikoli zkopírované.

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

Otestováno · Funguje ★ 9.2/10

Design Feel Like Your Own Product — Učí se „charakteristické tahy“ designéra ve Figmě, aby nové komponenty působily jako vlastní výroba, nikoli zkopírované.

Co umí

Čte soubor Figma přes Figma MCP server, aby vytvořil sémantický model barevných rolí designéra, podpisů rozestupů/poloměrů a informační hierarchie, poté generuje nové komponenty z tohoto internalizovaného modelu namísto kopírování surových pixelových hodnot. Spouští se, když uživatel sdílí soubor Figma a žádá o nové komponenty, pluginy nebo UI, které by měly 'odpovídat stylu' nebo rozšiřovat existující design systém, a elegantně se degraduje na vložené specifikace nebo snímek obrazovky, pokud nástroje Figma MCP nejsou k dispozici.

Testovací report

Spustil jsem mini-úkol v dokumentovaném záložním režimu dovednosti Figma-MCP-unavailable: pouze s vloženými specifikacemi design systému odvodil dvoustupňové pravidlo poloměru (6px interaktivní / 8px povrch) a znovu použil stejný tyrkysový hex pro primární tlačítko i 'aktivní' stavovou pilulku namísto vymýšlení nové barvy, konkrétně více opodstatněné než generický SaaS základní modál. Jednosouborová, soběstačná dovednost; licence je CC BY-NC 4.0 nekomerční, zveřejněná předem v README, nikoli skrytá.

Testováno: 2026-07-15 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /design-feel-like-your-own-productUčí se „charakteristické tahy“ designéra ve Figmě, aby nové komponenty působily jako vlastní výroba, nikoli zkopírované.

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

  • 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