devton agentic-workflows-blueprint.workflow.ui-ux-pro-max
Goal
Produce a visual design system, color palette, typography hierarchy, and responsive interaction pattern for UI components.
Scope
- Applies to: Web/Mobile interfaces, views, components, and pages.
- Does not cover: Pure backend services or API-only tasks.
Triggers
- "/ui-ux-pro-max"
- "Generate UI design system"
- "Design frontend component"
Inputs
productType: Domain or product category.techStack: CSS framework (e.g. Tailwind CSS, CSS Modules).
Invariants
- Design Excellence: Avoid generic default colors or plain browser defaults.
- Responsive Breakpoints: Use mobile-first responsive design (
min-*inverted breakpoints). - Accessibility: Ensure high contrast, focus states, and keyboard navigation.
Procedure
- Analyze feature context and target users.
- Define HSL color palette (Primary, Secondary, Accent, Background, Surface, Muted).
- Establish font pairings and typographic scale.
- Specify micro-animations, hover states, and dynamic visual cues.
- Output design block to
walkthrough.md.
Outputs
- UX Design Specification Block in
walkthrough.md.
Review gate
- Palette, typography, and responsive rules defined.
- Mobile-first breakpoints verified.
References
../../SKILL.md../radioactive/SKILL.md- Interactive HTML View