ux-design-system
Skill0 starsChanged 3 months agoMITView on GitHub
Comprehensive UX/UI design system covering premium design patterns, brand consistency, visual storytelling, design reviews, and delightful micro-interactions. Use for holistic design system creation, brand-aligned UI work, or adding personality to interfaces.
In this repository44 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- a11y-auditSkill
- ai-engineerSkill
- api-clientSkill
- changelog-enforcerSkill
- code-cleanup-guardianSkill
- code-reviewerSkill
- contract-testSkill
- db-migrateSkill
- dep-auditSkill
- devops-automatorSkill
- env-configSkill
- error-observabilitySkill
- frontend-designSkill
- git-commit-helperSkill
- github-issues-managerSkill
- git-issue-syncSkill
- git-protocolSkill
- handoffSkill
- incident-responseSkill
- init-projectSkill
- karpathy-guidelinesSkill
- market-researcherSkill
- parallel-agent-git-isolationSkill
- product-strategistSkill
- pr-workflowSkill
- rapid-builderSkill
- release-managerSkill
- resumeSkill
- scrutinizeSkill
- shadcn-uiSkill
- skill-builderSkill
- sprint-plannerSkill
- state-machine-diagramsSkill
- state-managementSkill
- surveySkill
- system-architectSkill
- tech-docsSkill
- unstuckSkill
- ux-researchSkill
- webapp-testingSkill
- web-dev-fundamentalsSkill
- workflow-optimizerSkill
The file
Files
UX Design System
Holistic design system expertise combining premium UX patterns, brand consistency, visual storytelling, and delightful interactions.
Design System Components
Typography Scale
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
--text-3xl: 1.875rem; --text-4xl: 2.25rem;Spacing System
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
--space-12: 3rem; --space-16: 4rem;Animation Tokens
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms;Design Review Checklist
Visual Audit
- Consistent spacing using design tokens
- Typography hierarchy clear
- Color contrast meets WCAG AA (4.5:1)
- Visual weight balanced
- Alignment on grid
UX Audit
- Clear user flow
- Obvious call-to-action
- Error states designed
- Loading states present
- Empty states considered
Brand Audit
- Colors from brand palette only
- Fonts match brand guidelines
- Tone of voice consistent
- Imagery style aligned
Anti-Patterns to Avoid
- Generic stock photography
- Purple-to-blue hero gradients
- Excessive animation
- Inconsistent iconography
- Typography without hierarchy
- Colors that don't serve purpose
- Decoration without function
- Defaults a model falls back on without direction: a cream or beige page background, italic accent words inside headlines, numbered "01 / 02 / 03" section labels, monospace eyebrow labels, pill-shaped buttons. Add whatever default style the first draft used.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.