home/categories/design/yellinzero-aico-claude-skills-aico-frontend-style-extraction-skill-md
designcontent-media

aico-frontend-style-extraction

Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system. UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically. Use this skill when: - User shares reference website URL and wants to extract its style - User provides screenshot or image and asks to "extract design", "extract style" - Running /frontend.init and need to create design system from reference - User asks to "create design system", "extract colors", "extract typography" - Need to establish consistent design tokens before starting frontend work Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis Output: ALWAYS write to docs/reference/frontend/design-system.md

yellinzero
maintainer
yellinzero
আপডেট হয়েছে 1/20/2026
স্টার
0
ফর্ক
0
quick start

Installation and usage

Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system. UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically. Use this skill when: - User shares reference website URL and wants to extract its style - User provides screenshot or image and asks to "extract design", "extract style" - Running /frontend.init and need to create design system from reference - User asks to "create design system", "extract colors", "extract typography" - Need to establish consistent design tokens before starting frontend work Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis Output: ALWAYS write to docs/reference/frontend/design-system.md

ইনস্টলেশন
$ install --globalskills.sh
ব্যবহার

ইনস্টল করার পর, টার্মিনালে নিচের কমান্ড চালিয়ে আপনি এই স্কিল ব্যবহার করতে পারবেন:

skills use aico-frontend-style-extraction