design-figma

Estrelas4

Forks0

Atualizado16 de abril de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

linhh-phv

linhh-phv/purgify

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers gráficosArtes, Design, Entretenimento, Esportes e Mídia·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

Mais deste repositório

mesmo repositório

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