SaaS Design System Architect
Build scalable SaaS design systems with foundations, tokens, components, states, patterns, accessibility, governance, and documentation.
SaaS Design System Architect is a free AI skill for ui & web building. Build scalable SaaS design systems with foundations, tokens, components, states, patterns, accessibility, governance, and documentation. It works with Claude, ChatGPT and is ready to use out of the box.
About this skill
SaaS Design System Architect helps product teams create consistent and maintainable interfaces. It defines colors, typography, spacing, grids, elevation, motion, tokens, components, interaction states, responsive behavior, accessibility, documentation, contribution rules, and governance.
What it does
The skill analyzes the product, brand, interface inventory, platforms, team structure, and implementation constraints; creates a design-system architecture; standardizes components and patterns; and produces documentation and adoption guidance for designers and developers.
What is included
- Foundation and token model
- Typography and spacing system
- Color and semantic roles
- Core component inventory
- States and interaction behavior
- Responsive and accessibility rules
- Documentation structure
- Governance and adoption plan
How to use it
1. Download the saas-design-system-architect-SKILL.md file 2. Upload it to your design or frontend workspace 3. Provide product screenshots, brand guidelines, component inventory, and framework 4. Add accessibility, platform, and team constraints 5. Use the specification to build and govern the system
Examples
Create a design system for a multi-module SaaS platform with dashboards, forms, tables, charts, dialogs, settings, and AI chat.
A complete system with semantic tokens, typography, grids, components, variants, states, accessibility, responsive rules, documentation, contribution workflow, and rollout priorities.
FAQ
What is this skill for?
Can it work with an existing component library?
Does it include design tokens?
Can it support dark mode?
Does it include accessibility?
How is this different from a UI kit?
Related Skills
Search and Filter Experience Architect
Design search and filter experiences with query behavior, facets, sorting, states, mobile patterns, accessibility, performance, and analytics.
Accessible Component Pattern Designer
Design accessible UI components with semantics, keyboard behavior, focus, states, announcements, content rules, and tests.
Dashboard Widget and Personalization UX Architect
Design customizable dashboards with widget hierarchy, defaults, layout, permissions, empty states, responsive behavior, accessibility, and saved preferences.
Related Prompts
Design System Component Specification Writer
Turn a UI component into an implementation-ready specification covering anatomy, states, behavior, content, accessibility, tokens, and quality checks.