design-figma

Estrellas4

Forks0

Actualizado16 de abril de 2026 a las 07:18

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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

linhh-phv

linhh-phv/purgify

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores gráficosArtes, diseño, entretenimiento, deportes y medios·SOC 27-1024

SKILL.md

readonly

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.

Design in Figma

Figma file link is defined in CLAUDE.md (design block) — read from there.

Before Designing

Read existing designs using get_design_context to understand current style
Check get_styles for the color palette and typography

Color Palette

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

Typography

Title: Inter Bold, 16-22px, #1c1c1e
Body: Inter Regular, 13px, #3c3c43
Caption: Inter Regular, 10-12px, #8e8e93
Labels: Inter Medium, 12-13px

After Designing

Take screenshot with save_screenshots — save to .figma/ folder (e.g. .figma/figma-screen-name.png) and show the user
Add prototype reactions between related frames
Ask user for approval before implementing in code

Más de este repositorio

mismo repositorio

ui-ux-pro-max

linhh-phv/purgify

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.

2026-05-104

check-figma

linhh-phv/purgify

Check Figma design for a specific screen or component before implementing UI changes

2026-04-164

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.

Design in Figma

Figma file link is defined in CLAUDE.md (design block) — read from there.

Before Designing

Read existing designs using get_design_context to understand current style
Check get_styles for the color palette and typography

Color Palette

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

Typography

Title: Inter Bold, 16-22px, #1c1c1e
Body: Inter Regular, 13px, #3c3c43
Caption: Inter Regular, 10-12px, #8e8e93
Labels: Inter Medium, 12-13px

After Designing

Take screenshot with save_screenshots — save to .figma/ folder (e.g. .figma/figma-screen-name.png) and show the user
Add prototype reactions between related frames
Ask user for approval before implementing in code