design-figma

Étoiles4

Forks0

Mis à jour16 avril 2026 à 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.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

linhh-phv

linhh-phv/purgify

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

GraphistesArts, design, divertissement, sports et médias·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

Plus depuis ce dépôt

même dépôt

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