Palette MCP

# Palette 프로젝트 - 절대 규칙 (MANDATORY RULES) ## 🚨 위반 시 즉시 작업 중단 규칙 이 규칙을 위반하는 경우 **즉시 작업을 중단**하고 사용자에게 알려야 합니다. ### 규칙 1: Figma 접근은 오직 MCP를 통해서만 (ABSOLUTE) **강제 사항:** - Figma 정보를 가져와야 하는 모든 상황에서 **반드시** `list_mcp_resources` 또는 `fetch_mcp_resource` 도구를 사용 - 그 외의 어떤 방법도 **절대 허용하지 않음** **절대 금지 (NEVER):** ```typescript // ❌ 절대 금지 - Figma API 직접 호출 fetch('https://api.figma.com/...') axios.get('https://api.figma.com/...') // ❌ 절대 금지 - Figma 플러그인 직접 실행 figma.currentPage.selection // ❌ 절대 금지 - 사용자에게 수동 추출 요청 "Figma에서 코드를 복사해서 붙여넣어 주세요" ``` **반드시 사용 (MUST USE):** ```typescript // ✅ 올바른 방법 - MCP 리소스 목록 확인 list_mcp_resources({ server: "figma" }) // ✅ 올바른 방법 - MCP로 Figma 데이터 가져오기 fetch_mcp_resource({ server: "figma", uri: "figma://file/{fileKey}/node/{nodeId}" }) ``` ### 규칙 2: 산출물은 오직 디자인 시스템으로만 (ABSOLUTE) **강제 사항:** - React/Vue 컴포넌트 생성 시 **반드시** `@dealicious/design-system-react` 또는 `@dealicious/design-system` 사용 - Tailwind CSS, 일반 HTML/CSS는 **절대 사용 금지** **절대 금지 (NEVER):** ```typescript // ❌ 절대 금지 - Tailwind CSS 사용 <div className="bg-white p-4 rounded-lg shadow-md"> <button className="bg-blue-500 text-white px-4 py-2">클릭</button> </div> // ❌ 절대 금지 - 일반 HTML 태그만 사용 <div style={{ backgroundColor: '#fff', padding: '16px' }}> <button style={{ backgroundColor: '#3b82f6', color: '#fff' }}>클릭</button> </div> // ❌ 절대 금지 - MUI, Ant Design 등 다른 UI 라이브러리 import { Button } from '@mui/material'; import { Button } from 'antd'; ``` **반드시 사용 (MUST USE):** ```typescript // ✅ 올바른 방법 - 디자인 시스템 컴포넌트 import { Button } from '@dealicious/design-system-react/src/components/ssm-button'; import { Text } from '@dealicious/design-system-react/src/components/ssm-text'; <div style={{ padding: '16px' }}> <Button variant="primary">클릭</Button> </div> ``` ## 📋 필수 작업 플로우 (MANDATORY WORKFLOW) Figma를 React/Vue로 변환하는 요청을 받으면 **반드시 이 순서대로** 진행: ### Step 1: Figma MCP로 리소스 확인 (REQUIRED) ```typescript // 1단계: 사용 가능한 Figma 리소스 확인 list_mcp_resources({ server: "figma" }) ``` **이 단계를 건너뛰면 안 됩니다!** ### Step 2: Figma 데이터 가져오기 (REQUIRED) ```typescript // 2단계: 특정 Figma 노드/프레임 데이터 가져오기 fetch_mcp_resource({ server: "figma", uri: "figma://file/{fileKey}/node/{nodeId}" }) ``` **이 단계 없이 코드를 생성하면 안 됩니다!** ### Step 3: 데이터 분석 및 매핑 (REQUIRED) MCP에서 받은 데이터를 분석하여 디자인 시스템 컴포넌트로 매핑: | Figma 요소 | 디자인 시스템 컴포넌트 | |-----------|---------------------| | Button | `ssm-button` | | Text | `ssm-text` | | Input Field | `ssm-input` | | Checkbox | `ssm-check` | | Radio Button | `ssm-radio` | | Dropdown | `ssm-dropdown` | | Tag/Label | `ssm-tag` | | Chip | `ssm-chip` | | Icon | `ssm-icon` | ### Step 4: 디자인 시스템으로 코드 생성 (REQUIRED) ```typescript // 4단계: 디자인 시스템 컴포넌트로 변환 import { Button } from '@dealicious/design-system-react/src/components/ssm-button'; import { Text } from '@dealicious/design-system-react/src/components/ssm-text'; // Figma MCP 데이터 기반으로 컴포넌트 구성 ``` **Tailwind나 일반 HTML로 생성하면 안 됩니다!** ### Step 5: 최종 검증 (REQUIRED) 생성된 코드가 다음 조건을 모두 만족하는지 확인: - [ ] **Figma MCP 사용 확인**: `list_mcp_resources` 또는 `fetch_mcp_resource`를 사용했는가? - [ ] **디자인 시스템 import 확인**: `@dealicious/design-system-react` 또는 `@dealicious/design-system`에서 import 했는가? - [ ] **Tailwind 금지 확인**: `className`에 Tailwind 클래스가 없는가? - [ ] **일반 HTML 금지 확인**: `<button>`, `<input>` 등 일반 HTML 태그 대신 디자인 시스템 컴포넌트를 사용했는가? - [ ] **다른 UI 라이브러리 금지 확인**: MUI, Ant Design 등 다른 라이브러리를 사용하지 않았는가? **이 중 하나라도 만족하지 않으면 코드를 제공하지 마세요!** ## 🎯 사용 가능한 디자인 시스템 컴포넌트 ### 기본 컴포넌트 - `ssm-button`: Button - `ssm-text`: Text - `ssm-input`: Input - `ssm-dropdown`: Dropdown - `ssm-icon`: Icon ### 폼 컴포넌트 - `ssm-check`: Checkbox - `ssm-radio`: Radio Button - `ssm-switch`: Switch - `ssm-text-field`: TextField ### 표시 컴포넌트 - `ssm-tag`: Tag - `ssm-chip`: Chip - `ssm-badge`: Badge - `ssm-tooltip`: Tooltip ### 피드백 컴포넌트 - `ssm-toast`: Toast - `ssm-notice`: Notice - `ssm-error`: Error - `ssm-helper-text`: HelperText - `ssm-loading-spinner`: LoadingSpinner ### 레이아웃 컴포넌트 - `ssm-layer-popup`: LayerPopup - `ssm-layer-alert`: LayerAlert - `ssm-accordion`: Accordion - `ssm-tab`: Tab ### 내비게이션 컴포넌트 - `ssm-pagination`: Pagination - `ssm-arrow-pagination`: ArrowPagination - `ssm-text-link`: TextLink ### 복합 컴포넌트 - `ssm-labeled-text`: LabeledText ## 🚫 작업 중단 시나리오 다음과 같은 상황에서는 **즉시 작업을 중단**하고 사용자에게 알려야 합니다: 1. **Figma MCP 없이 작업하려는 경우** - "Figma API 키를 제공해주세요" → ❌ 중단 - "Figma에서 코드를 복사해서 붙여넣어주세요" → ❌ 중단 - MCP를 사용하지 않고 바로 코드 생성 → ❌ 중단 2. **디자인 시스템 없이 작업하려는 경우** - Tailwind CSS로 코드 생성 → ❌ 중단 - 일반 HTML 태그로 코드 생성 → ❌ 중단 - MUI, Ant Design 등 다른 라이브러리 사용 → ❌ 중단 3. **올바른 응답 예시** ``` 죄송합니다. 이 프로젝트는 반드시 Figma MCP를 통해 디자인 데이터를 가져와야 합니다. 먼저 다음 단계를 진행하겠습니다: 1. list_mcp_resources로 사용 가능한 Figma 리소스 확인 2. fetch_mcp_resource로 해당 디자인 데이터 가져오기 3. @dealicious/design-system-react 컴포넌트로 변환 진행하시겠습니까? ``` ## 🎓 요약 ### 절대 기억할 것 1. **Figma = MCP만 사용** (API 직접 호출 금지) 2. **산출물 = 디자인 시스템만 사용** (Tailwind/HTML 금지) 3. **필수 플로우**: MCP 리소스 확인 → 데이터 가져오기 → 디자인 시스템 변환 → 검증 4. **위반 시 = 즉시 중단** (규칙 위반 코드 제공 금지) --- 이 규칙은 프로젝트의 **핵심 아키텍처 원칙**이며, 어떤 상황에서도 예외가 없습니다.