design-figma

Sterne4

Forks0

Aktualisiert16. April 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

linhh-phv

linhh-phv/purgify

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

GrafikdesignerKunst, Design, Unterhaltung, Sport und Medien·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

Mehr aus diesem Repository

gleiches Repository

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