PopularSkill
Design
brandkit
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained…
@leonxlnxView SkillClaude Code Design skills :)
Flowy lists 288 skills in the Design category for Claude Code, across 23 plugins. A skill is a folder of instructions an agent loads while you work. Every one here shows what is inside before you install, who wrote it, and whether it is Auto-invoked, meaning a FLOW.md router fires it as you prompt.
Showing 96 of 288
@leonxlnxView SkillPopularSkill
Design
brutalist-skill
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog…
@leonxlnxView SkillPopularSkill
Design
gpt-tasteskill
Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial…
@leonxlnxView SkillSkill
Skill
Skill
Skill
Skill
Skill
Skill
Design
agentic
Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
@bergsideView SkillSkill
Design
ant
Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
@bergsideView SkillSkill
Design
artistic
High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
@bergsideView SkillSkill
Design
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D,…
@zanweiView SkillSkill
Skill
Skill
Skill
Design
ppt-agent-skills
专业 PPT 演示文稿全流程 AI 生成助手。模拟顶级 PPT 设计公司的完整工作流（需求调研到资料搜集到大纲策划到策划稿到设计稿），输出高质量 HTML 格式演示文稿。当用户提到制作 PPT、做演示文稿、做 slides、做幻灯片、做汇报材料、做培训课件、做路演…
@sunbigflyView SkillSkill
Design
ui-design-brain
Generate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web…
@carmahhawwariView SkillSkill
Design
hue
Meta-skill that generates new design language skills. Works on Claude Code and Codex. Use when the user says 'create a design skill', 'generate design…
@dominikmartnView SkillSkill
Design
a11y-audit
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user…
@plugin87View SkillSkill
Design
apply-aesthetic
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple,…
@plugin87View SkillSkill
Design
brandkit
Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion),…
@plugin87View SkillSkill
Design
superdesign
Design or redesign frontend UI on the Superdesign canvas. Use whenever the user wants to design a page, feature, flow, or a brand-new product with no code yet;…
@superdesigndevView SkillSkill
Design
hardware-solution
Use when the user needs embedded hardware architecture, MCU/SoC selection, power tree design, interface planning, sensor/actuator selection, RF/connectivity,…
@leokemp223View SkillSkill
Design
adapt
Responsive layout pass covering breakpoints, touch targets, safe areas, and fluid type. Use when the UI has layout or touch issues on mobile/tablet, when…
@educlopezView SkillSkill
Design
animate
Motion design pass — adds purposeful animations or removes excessive ones, respecting MOTION_INTENSITY and the project's animation stack. Use when the user…
@educlopezView SkillSkill
Design
audit
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit'…
@educlopezView SkillSkill
Design
kicad-library
Library management workflow for KiCAD — creating symbols, footprints, and managing libraries via MCP tools. Triggers on: "create a symbol", "make a footprint",…
@mixelpixxView SkillSkill
Design
kicad-manufacture
Manufacturing and fabrication workflow for KiCAD projects via MCP tools. Triggers on: "send to fab", "order boards", "gerbers", "JLCPCB", "manufacturing",…
@mixelpixxView SkillSkill
Design
kicad-pcb
Workflow skill for KiCAD PCB layout and routing via MCP tools. Triggers on: "layout the board", "route traces", "PCB", "place footprints", "copper pour",…
@mixelpixxView SkillSkill
Design
accessibility-per-comp…
Run an accessibility audit on a specific design system component. Trigger when someone says: accessibility check, a11y audit, WCAG compliance, is this…
@murphytruemanView SkillSkill
Design
adoption-report
Produce a design system adoption report separating coverage from actual adoption, with trend direction and risk flags. Trigger when someone says: adoption…
@murphytruemanView SkillSkill
Design
ai-component-descripti…
Generate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section…
@murphytruemanView SkillSkill
Design
figma-design-system-to…
Figma design system to design.md — Extract Figma design system into a structured design.md. Use when user says 'generate design.md', 'extract design system',…
@albertzhangz10View SkillSkill
Design
algorithmic-color-pale…
Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the…
@dembrandtView SkillSkill
Design
authentic-product-repr…
Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design with real content…
@dembrandtView SkillSkill
Design
brand-visual-language
A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography, border-radius, and…
@dembrandtView SkillSkill
Design
Replica
Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to…
@surya17155View SkillSkill
Skill
Skill
Skill
Design
content
UIForge's microcopy layer — words are UI. Use when writing or fixing any interface text: headlines, subheads, button/CTA labels, empty states, error and…
@taewoooparkView SkillSkill
Design
design-director
UIForge's always-on design brain — the art director for any web UI. Use whenever you build or elevate a landing page, hero, dashboard, pricing table, marketing…
@taewoooparkView SkillSkill
Design
design-tokens
UIForge's token foundry — emits and ENFORCES a project's design signature before any component is built. Use at the start of any UI work, or when asked to set…
@taewoooparkView SkillSkill
Design
brandbook-skill
Distill any brand into a complete brand system: paste a URL, name, or screenshots and get a design-model.yaml (single source of truth), a script-rendered…
@echowang97View SkillSkill
Design
design-blog-hero
Generate a blog post hero artifact — TWO pixel-exact HTML canvases in a single file: an Open Graph card (1200×630) for social meta tags AND an in-page hero…
@slogsdonView SkillSkill
Design
design-business-card
Generate a printable business card — pixel-exact 1050×600 front canvas + 1050×600 back canvas in a single HTML file. Standard 3.5×2 inch card at 300dpi. Front…
@slogsdonView SkillSkill
Design
design-carousel-slide
Generate a LinkedIn / Instagram multi-slide carousel — single HTML file with N square 1080×1080 .canvas divs, each representing one slide. Default N=5 (cover +…
@slogsdonView SkillSkill
Design
figma-autopilot
Execute design instructions left as Figma comments. Reads all unresolved comments, classifies each by intent, modifies the design via figma-console MCP, and…
@madebysanView SkillSkill
Design
figma-component-doc
Generate a component documentation block in Figma. Builds a structured doc frame next to the selected component (or component set) containing description,…
@madebysanView SkillSkill
Design
figma-extract
Standardizes extraction and documentation of design tokens, assets, and specs from Figma. Use when the user asks to export from Figma, extract design tokens,…
@madebysanView SkillPopularSkill
Design
image-to-code-skill
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then…
@leonxlnxView SkillPopularSkill
Design
imagegen-frontend-mobi…
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile…
@leonxlnxView SkillPopularSkill
Design
imagegen-frontend-web
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate…
@leonxlnxView SkillSkill
Skill
Skill
Skill
Design
basic
Print-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
@bergsideView SkillSkill
Design
bento
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
@bergsideView SkillSkill
Design
bold
Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
@bergsideView SkillSkill
Skill
Skill
Skill
Design
design-code
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web…
@plugin87View SkillSkill
Design
design-component
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to…
@plugin87View SkillSkill
Design
design-qa
Set up or run design QA gates — token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the…
@plugin87View SkillSkill
Design
bolder
Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe,…
@educlopezView SkillSkill
Design
brief
Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design…
@educlopezView SkillSkill
Design
clarify
UX copy review across buttons, errors, empty states, and form hints — critiques by default, applies only on request. Use when copy feels vague, generic, or…
@educlopezView SkillSkill
Design
kicad-review
Design review and validation workflow for KiCAD projects via MCP tools. Triggers on: "review my design", "check for errors", "audit", "DRC", "ERC", "find…
@mixelpixxView SkillSkill
Design
kicad-schematic
Workflow skill for KiCAD schematic design via MCP tools. Triggers on: "design a circuit", "add a component", "wire up", "connect pins", "build schematic",…
@mixelpixxView SkillSkill
Design
konnect
Mandatory operating rules for ANY task involving KiCAD projects. Loaded when the user mentions KiCAD, schematics, PCBs, or any .kicad_* file. Prevents file…
@mixelpixxView SkillSkill
Design
backlog-generator
Transform audit findings into sprint-ready work items with effort estimates, acceptance criteria, and stakeholder-friendly rationale. This converts existing…
@murphytruemanView SkillSkill
Design
change-communication
Produce a communication package for a design system change — release notes, migration guide, and team announcement. This produces communication artefacts for…
@murphytruemanView SkillSkill
Design
cicd-integration
Generate CI/CD pipeline configurations that automate design system quality checks — token validation, component linting, visual regression, accessibility…
@murphytruemanView SkillSkill
Design
button-states
Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should be derived…
@dembrandtView SkillSkill
Design
color-mode-and-theme
Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters —…
@dembrandtView SkillSkill
Design
component-family-consi…
Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow…
@dembrandtView SkillSkill
Design
motion
UIForge's motion layer — art-directs motion for React/Next.js + Tailwind interfaces built with Motion-Primitives (the shadcn-style copy-in registry, powered by…
@taewoooparkView SkillSkill
Design
design-instagram-post
Generate an Instagram post artifact — pixel-exact HTML canvas at 1080×1350 (portrait, default — Instagram's max-real-estate format) with opt-in 1080×1080…
@slogsdonView SkillSkill
Design
design-landing-page
Generate a deliverable landing-page HTML file (NOT a screenshot artifact). 1440px design width, mobile-responsive (CSS-only, no JS). Sections: hero…
@slogsdonView SkillSkill
Design
design-link-in-bio
Generate a minimal single-column standalone HTML page — mobile-first at 375px width — for use as a link-in-bio destination. Contains: name/wordmark, short…
@slogsdonView SkillSkill
Design
figma-file-cleanup
Audit and clean up Figma files — remove orphan library references, rebind colors and text to design system tokens, audit dark mode compatibility, fix naming…
@madebysanView SkillSkill
Design
figma-fix
Review a Figma design and immediately fix what it can. Combines figma-review (expert analysis) with figma-autopilot (automated execution) into one workflow.…
@madebysanView SkillSkill
Design
figma-import
Import design tokens from any codebase into Figma as variables. Scans a project for colors, typography, spacing, corner radius, shadows, and opacity tokens —…
@madebysanView SkillPopularSkill
Design
minimalist-skill
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
@leonxlnxView SkillPopularSkill
Design
output-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any…
@leonxlnxView SkillPopularSkill
Design
redesign-skill
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without…
@leonxlnxView SkillSkill
Skill
Design
brutalism
Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
@bergsideView SkillSkill
Design
cafe
Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
@bergsideView SkillSkill
Design
claude
A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with…
@bergsideView SkillSkill
Skill
Skill
Skill
Design
design-review
Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design…
@plugin87View Skill192 more in Design. See them all →