Back to tags
Tag

Agent Skills with tag: design-systems

44 skills match this tag. Use tags to discover related Agent Skills and explore similar workflows.

ui-design-system

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

design-systemsdesign-tokensui-componentsresponsive-design
ovachiever
ovachiever
81

generating-frontend-styleguides

Use when asked to create or edit style guides, design systems, component libraries, or update existing frontend components for web projects

style-guidefrontenddesign-systemscomponent-library
wzkariampuzha
wzkariampuzha
0

design-system-governance

Detect and track design token drift between Figma design systems and code implementations - report-only skill that identifies inconsistencies and creates wrangler issues for resolution

design-systemsdesign-tokensfigma-integrationconsistency-check
samjhecht
samjhecht
1

ui-design

Master UI design - visual design, design systems, components, typography, color theory

ui-designdesign-systemstypographycolor-theory
pluginagentmarketplace
pluginagentmarketplace
1

Visual Designer

Design beautiful, consistent user interfaces with proper color theory, typography, spacing, and visual hierarchy. Use when creating design systems, choosing colors and fonts, or establishing visual direction. Covers color theory, typography scales, spacing systems, and design principles.

color-theorytypographylayoutdesign-systems
daffy0208
daffy0208
55

Design System Architect

Build scalable, maintainable design systems that unify product experiences. Use when creating component libraries, design tokens, or establishing design standards. Covers atomic design, Storybook, theming, and design system governance.

design-systemscomponent-librariesthemingatomic-design
daffy0208
daffy0208
55

design-tokens

Apply design token patterns using Tailwind CSS 4 @theme directive: CSS variables, semantic naming, color systems, typography scales, spacing, dark mode. Use when designing UI systems, reviewing design consistency, or establishing brand guidelines. Integrates with frontend-design skill for aesthetic execution.

tailwind-cssdesign-systemscss-variablestheming
phrazzld
phrazzld
21

frontend-design

|

web-designuiuxdesign-systems
phrazzld
phrazzld
21

tailwindcss

Tailwind CSS utility-first styling for JARVIS UI components

tailwind-cssui-componentsstylingdesign-systems
martinholovsky
martinholovsky
92

ui-ux-expert

Expert UI/UX designer specializing in user-centered design, accessibility (WCAG 2.2), design systems, and responsive interfaces. Use when designing web/mobile applications, implementing accessible interfaces, creating design systems, or conducting usability testing.

ui-designdesign-systemsaccessibilityresponsive-design
martinholovsky
martinholovsky
92

duotone-identity

Use when designing app pages, typography, spacing, or any UI look and feel for the Identity Platform. Load for creating landing pages, chapter sections, SVG illustrations, or applying the duotone cream/charcoal design system. Keywords: design, ui, styling, theme, colors, layout

design-systemsui-designhtml-cssstyling
ingpoc
ingpoc
5

contribution-loop

Find repos with design drift and generate meaningful PRs to fix them. Runs as an autonomous loop discovering GitHub repos using design systems, scanning for drift, and staging fixes for human review.

autonomous-agentpull-requestsgithubdesign-systems
buoy-design
buoy-design
3

frontend-design

Create distinctive, memorable user interfaces that avoid generic AI aesthetics. Use when designing UI/UX, planning visual direction, or building pages and layouts.

user-centered-designvisual-communicationwireframingprototyping
benshapyro
benshapyro
71

design-workflow

UI/UX design workflow guidelines. Activate when working with design systems, accessibility (WCAG), user interface patterns, or design tokens.

design-systemswcaguser-flowsdesign-tokens
ilude
ilude
5

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

html-cssweb-componentsui-componentsresponsive-layout
acking-you
acking-you
51

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

html-cssresponsive-designui-componentsweb-components
snarktank
snarktank
8039

prd-v04-screen-flow-definition

Connect user journeys to screens, defining the UI structure and navigation paths during PRD v0.4 User Journeys. Triggers on requests to define screens, design screen flows, map UI structure, plan navigation, or when user asks "what screens do we need?", "define screens", "screen flow", "UI structure", "information architecture", "navigation design", "wireframe planning". Consumes UJ- (User Journey Mapping), FEA- (Feature Value Planning), BR- (constraints). Outputs SCR- entries for screens and DES- entries for design system elements. Feeds v0.5 Red Team Review.

wireframinguser-flow-analysisdesign-systemsinformation-architecture
mattgierhart
mattgierhart
61

gui-design-principles

Comprehensive design principles and best practices for creating beautiful, functional GUI applications including dashboards, web apps, and mobile apps

wireframingresponsive-layoutmobile-firstdesign-systems
bejranonda
bejranonda
1111

Page 1 of 3 · 44 results