메뉴
Create or modify Figma designs for Purgify UI. Use when the user asks to design, draw, update UI, add screens, or modify layouts in Figma.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
Check Figma design for a specific screen or component before implementing UI changes
| name | design-figma |
| description | Create or modify Figma designs for Purgify UI. Use when the user asks to design, draw, update UI, add screens, or modify layouts in Figma. |
Figma file link is defined in CLAUDE.md (design block) — read from there.
get_design_context to understand current styleget_styles for the color palette and typography| Token | Light | Usage |
|---|---|---|
| s1 | #ffffff | White / backgrounds |
| s2 | #f5f5f5 | Title bar bg |
| s6 | #1c1c1e | Primary text |
| s7 | #34c759 | Green / Safe |
| s8 | #8e8e93 | Secondary text |
| s9 | #007aff | Accent blue |
| s10 | #e5e5ea | Dividers |
| s11 | #f2f2f7 | Control background |
| s12 | #ff9500 | Orange / Moderate |
| s13 | #ff3b30 | Red / Caution |
| s15 | #fafafa | Content bg |
| s20 | #1264ea | App icon blue |
save_screenshots — save to .figma/ folder (e.g. .figma/figma-screen-name.png) and show the user