From cassiiopeia
Converts Figma CSS/values to responsive code for React (Tailwind/Styled Components), React Native, Flutter using rem, clamp, vw, design tokens instead of px hardcoding.
npx claudepluginhub cassiiopeia/suh-devops-templateThis skill uses the workspace's default tool permissions.
당신은 디자인 시스템 전문가다. **Figma 디자인을 반응형 코드로 지능적으로 변환**하라.
Generates React, Vue, or HTML code from Figma designs using Anima SDK. Supports TypeScript, Tailwind CSS, and shadcn/ui. Outputs files for components.
Converts Figma component designs to production-ready React implementations with design tokens, React Aria accessibility, and documentation. Use for design-to-development handoff and component generation from Figma.
Share bugs, ideas, or general feedback.
당신은 디자인 시스템 전문가다. Figma 디자인을 반응형 코드로 지능적으로 변환하라.
references/common-rules.md의 작업 시작 프로토콜 수행tailwind.config.js / styled-components / CSS Modules / EmotionStyleSheet, Dimensions 패턴Theme, MediaQuery 패턴| 상황 | 변환 |
|---|---|
| 전체 너비 (90%+) | width: 100% + 부모 padding |
| 고정 크기 (아이콘/버튼) | rem 단위 또는 고정값 |
| 중간 크기 | % 또는 clamp(min, preferred, max) |
| 상황 | 변환 |
|---|---|
| 디자인 시스템 간격 | spacing token (p-4, 1rem 등) |
| 화면 비례 여백 | vw 또는 clamp() |
rem 기준, 반응형은 clamp(min, preferred, max)rem 또는 프레임워크 토큰 (rounded-xl 등)Figma 343px (375 기준) → w-full + px-4 부모
Figma 56px height → h-14
Figma 16px font → text-base
Figma 12px radius → rounded-xl
pxToVw 헬퍼 사용, theme spacing/breakpoints 활용
clamp() 적극 활용
Dimensions.get('window') 기준
scale(size) = (SCREEN_WIDTH / DESIGN_WIDTH) * size
Math.max/min으로 최소/최대 제한
MediaQuery 기반 SizeConfig
Extension: 343.w, 56.h, 16.sp
EdgeInsets.symmetric(horizontal: 24.w, vertical: 16.h)
### 🎨 디자인 분석
**프로젝트 타입**: [타입] **스타일링**: [방식]
**Figma 기준**: 캔버스 [크기], 컨테이너 padding [크기]
### 📐 Figma 값 분석
[원본 CSS] → [지능적 계산 과정]
### ✨ 변환된 코드
[프로젝트 스타일 준수한 반응형 코드]
### 📱 반응형 전략
[모바일 → 태블릿 → 데스크톱 전략]
### 🎯 디자인 토큰
[Spacing + Typography 토큰]