·design-analyzer
*

design-analyzer

kanopi/cms-cultivator

사용자가 Figma를 언급하거나 이미지를 업로드하거나 "이 디자인을 구현해 보세요"라고 말하면 디자인 참조에서 기술 요구 사항을 자동으로 추출합니다. 색상, 타이포그래피, 간격, 레이아웃을 분석하고 WordPress 블록 또는 Drupal 단락 필드에 대한 매핑을 분석합니다. 정확한 값, 응답 동작, 접근성 요구 사항을 포함하여 개발자를 위한 세부 사양을 제공합니다.

5설치·0트렌드·@kanopi

설치

$npx skills add https://github.com/kanopi/cms-cultivator --skill design-analyzer

SKILL.md

Purpose Extract technical requirements from design references (Figma URLs, screenshots, mockups) for CMS component implementation.

Accurate design-to-code translation requires systematic extraction of technical specifications.

User uploads image and says: "Create a WordPress block pattern from this hero design"

사용자가 Figma를 언급하거나 이미지를 업로드하거나 "이 디자인을 구현해 보세요"라고 말하면 디자인 참조에서 기술 요구 사항을 자동으로 추출합니다. 색상, 타이포그래피, 간격, 레이아웃을 분석하고 WordPress 블록 또는 Drupal 단락 필드에 대한 매핑을 분석합니다. 정확한 값, 응답 동작, 접근성 요구 사항을 포함하여 개발자를 위한 세부 사양을 제공합니다. 출처: kanopi/cms-cultivator.

원본 보기

인용 가능한 정보

AI/검색 인용용 안정적인 필드와 명령어.

설치 명령어
npx skills add https://github.com/kanopi/cms-cultivator --skill design-analyzer
카테고리
*크리에이티브
인증됨
최초 등록
2026-02-01
업데이트
2026-02-18

빠른 답변

design-analyzer이란?

사용자가 Figma를 언급하거나 이미지를 업로드하거나 "이 디자인을 구현해 보세요"라고 말하면 디자인 참조에서 기술 요구 사항을 자동으로 추출합니다. 색상, 타이포그래피, 간격, 레이아웃을 분석하고 WordPress 블록 또는 Drupal 단락 필드에 대한 매핑을 분석합니다. 정확한 값, 응답 동작, 접근성 요구 사항을 포함하여 개발자를 위한 세부 사양을 제공합니다. 출처: kanopi/cms-cultivator.

design-analyzer 설치 방법은?

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/kanopi/cms-cultivator --skill design-analyzer 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code나 Cursor에서 사용할 수 있습니다

소스 저장소는 어디인가요?

https://github.com/kanopi/cms-cultivator