Search everything...

Stats

Actions

Available In

Help us improve

Share bugs, ideas, or general feedback.

ui-design - Claude Code Plugin | ClaudePluginHub

Plugin

ui-design

Name: ui-design
Author: sethdford

By sethdford

Generate complete, accessible UI design systems for web projects, including color palettes with tonal scales and contrast checks, modular typography scales, responsive grid layouts, spacing systems, visual hierarchies, dark mode variants, and full screen layouts from brand inputs or descriptions.

npx claudepluginhub sethdford/claude-skills --plugin designer-ui-design

Popularity

Stars

Top 25%

Med: 1·Avg: 290

Installs

Med: 0·Avg: 1

What's Inside

Slash Commands4

/color-palette

Generate a full color palette with semantic mapping and accessibility checks.

/design-screen

Design a complete screen layout from a description or requirements.

/responsive-audit

Audit a design for responsive behavior across breakpoints.

/type-system

Create a complete typography system from brand fonts or requirements.

Skills9

color-system

/color-system

Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.

dark-mode-design

/dark-mode-design

Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.

data-visualization

/data-visualization

Design clear, accessible data visualizations with appropriate chart selection and styling.

illustration-style

/illustration-style

Define an illustration style guide with visual language, color usage, and application rules.

layout-grid

/layout-grid

Define responsive layout grid systems with columns, gutters, margins, and breakpoint behavior.

Stats

Version1.0.0

Stars13

Forks2

MaintenanceFair

LicenseMIT

Last CommitMar 11, 2026

AddedMar 26, 2026

Actions

View on GitHub View README Plugin Marketplace JSON Homepage

Own this plugin?

Verify ownership to unlock analytics, metadata editing, and a verified badge.

Available In

claude-skills3

Help us improve

Share bugs, ideas, or general feedback.

README

Claude Skills — PDLC Role Collection

Comprehensive, standards-grounded Claude Code skills for every role in the Product Development Lifecycle.

454 skills and 173 commands across 57 plugins for 8 roles.

Roles

Role	Skills	Commands	Plugins	Standards Alignment
architect	63	10	8	TOGAF, IASA BTABoK, ISO 42010, SWEBOK v4
engineer	65	26	8	SWEBOK v4, SFIA v9, DORA, SPACE, ISO 25010
product-manager	65	26	8	AIPMM PmBoK, ISPMA SPMBoK, PDMA NPDP
tech-lead	63	25	8	SFIA v9, DORA/Accelerate, Team Topologies
security	64	25	8	NIST CSF 2.0, OWASP SAMM, MITRE ATT&CK, ISO 27001
designer	63	27	8	WCAG 2.2, ISO 9241, Nielsen Heuristics
qa-engineer	63	26	8	ISTQB, ISO 25010, WCAG 2.2, IEEE 829
sdlc	8	8	1	ISO/IEC 12207, ISO/IEC 15288

What Makes This Different

Every skill is built on three principles:

Standards-grounded — Each role maps to recognized professional bodies of knowledge (SWEBOK, TOGAF, OWASP, AIPMM). See STANDARDS.md.
LLM error mitigation — Every skill has an Anti-Patterns section targeting documented LLM failure modes (hallucination, over-generalization, constraint blindness, happy-path bias).
Artifact-producing — Every skill produces a concrete deliverable (document, diagram, decision record, test plan, policy), not just advice.

Quick Start

Install a Single Role

claude install github:sethdford/claude-skills/engineer

Install a Single Plugin

claude install github:sethdford/claude-skills/engineer/testing

Install All Roles

claude install github:sethdford/claude-skills

Skills vs Commands

Skills are domain knowledge units (nouns). They teach Claude about a topic — like writing an ADR, designing a threat model, or creating a product roadmap.
Commands are workflows (verbs). They chain multiple skills together — like running a full architecture review or planning a product launch.

Role Breakdown

Architect — 8 Plugins

Plugin	Skills	Commands	Focus
system-design	10	4	Decomposition, DDD, microservices, event-driven, CQRS
quality-attributes	8	3	Scalability, reliability, performance, trade-off analysis
decision-making	8	3	ADRs, technology radar, build-vs-buy, migration strategy
data-architecture	8	3	Data modeling, storage selection, event sourcing, pipelines
infrastructure-design	8	3	Cloud architecture, deployment, DR, multi-region
architecture-governance	7	3	Principles, fitness functions, tech debt, compliance
communication	7	3	C4 diagrams, RFCs, stakeholder presentations, roadmaps
architect-toolkit	7	3	Katas, reviews, mentoring, anti-patterns catalog

Engineer — 8 Plugins

Plugin	Skills	Commands	Focus
code-quality	10	4	Clean code, refactoring, SOLID, code smells
testing	9	4	TDD, property-based testing, test architecture
debugging	8	3	Systematic debugging, root cause analysis, postmortems
implementation-patterns	8	3	Design patterns, data structures, concurrency
api-development	8	3	REST, GraphQL, gRPC, API design and testing
devops-practices	8	3	CI/CD, containers, deployment, monitoring
database-engineering	7	3	Schema design, query optimization, migrations
engineer-toolkit	7	3	Technical writing, git workflow, incident response

Product Manager — 8 Plugins

View full README on GitHub

Similar Plugins

ui-design

1.3k·1·

Craft polished user interfaces with layout grids, color systems, typography scales, responsive patterns, and visual hierarchy.

2mo

v1.0.0

Owl-Listener

bencium-controlled-ux-designer

228·2·

Expert UI/UX design guidance for unique, accessible interfaces. Always-ask-first protocol for visual decisions, colors, typography, layouts.

2mo

v1.0.0

bencium

ui-designer

792·272·

Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design

7mo

v1.0.0

ccplugins

ui-ux-design-pro

27·7·

UI/UX design intelligence. 107 styles, 127 palettes, 107 font pairings, 106 charts, 131 reasoning rules, 129 UX guidelines, 16 stacks (React, Next.js, Vue, Nuxt.js, Svelte, Astro, Angular, Remix, SolidJS, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Nuxt UI). 8 Python scripts: BM25 search, contrast checker, palette generator, token generator, type scale calculator, design system generator, UI auditor, CLI. 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. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, liquid glass, cyberpunk, spatial UI, data brutalism. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient, design tokens, contrast checker.

3mo

v1.0.0

saifyxpro

design-systems

13·

Build, document, and maintain scalable design systems — from tokens and components to accessibility and theming.

2mo

v1.0.0

sethdford

designpowers

173·

Design workflow for coding agents: discovery, research, strategy, inclusive design, critique, and handoff — enforced automatically

v1.0.0

Owl-Listener

Help us improve

Find plugins for your project

Help us improve

ui-design

Popularity

What's Inside

Help us improve

Health & Quality

Confidence

README

Claude Skills — PDLC Role Collection

Roles

What Makes This Different

Quick Start

Install a Single Role

Install a Single Plugin

Install All Roles

Skills vs Commands

Role Breakdown

Architect — 8 Plugins

Engineer — 8 Plugins

Product Manager — 8 Plugins

Similar Plugins

ui-design

bencium-controlled-ux-designer

ui-designer

ui-ux-design-pro

design-systems

designpowers

More by sethdford

architecture-governance

accessibility-testing

api-testing

communication

strategy

Claude Skills — PDLC Role Collection

Roles

What Makes This Different

Quick Start

Install a Single Role

Install a Single Plugin

Install All Roles

Skills vs Commands

Role Breakdown

Architect — 8 Plugins

Engineer — 8 Plugins

Product Manager — 8 Plugins