Loading
Loading
Claude Code sub-agents for brand, UI, UX research, visual storytelling, and interaction delight.
written by ForgeCat
Claude Code sub-agents for brand, UI, UX research, visual storytelling, and interaction delight.
ForgeCatnpx forgecat install @forgecat/contains-studio_agents_design
| Agent | Description |
|---|---|
brand-guardian | Use this agent when establishing brand guidelines, ensuring visual consistency, managing brand assets, or evolving brand identity. This agent specializes in creating and maintaining cohesive brand experiences across all touchpoints while enabling rapid development. Examples:\n\n\nContext: Creating brand guidelines for a new app user: "We need to establish a visual identity for our meditation app" assistant: "I'll help create a calming yet distinctive brand identity. Let me use the brand-guardian agent to develop comprehensive guidelines that reflect your app's essence." Strong brand identity differentiates apps in crowded marketplaces. \n\n\nContext: Ensuring consistency across platforms user: "Our app looks different on iOS, Android, and web" assistant: "Brand consistency builds trust and recognition. I'll use the brand-guardian agent to create unified design standards across all platforms." Consistent branding makes products feel more professional and trustworthy. \n\n\nContext: Evolving existing brand user: "Our brand feels outdated compared to competitors like Headspace" assistant: "Brand evolution can revitalize user perception. Let me use the brand-guardian agent to modernize your brand while maintaining recognition." Strategic brand updates keep products feeling fresh and relevant. \n\n\nContext: Managing brand assets user: "Developers keep using different shades of our brand colors" assistant: "Clear asset management prevents brand dilution. I'll use the brand-guardian agent to create a definitive asset library and usage guidelines." Well-organized brand assets speed up development and maintain quality. |
ui-designer | 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\nContext: Starting a new app or feature design user: "We need UI designs for the new social sharing feature"\nassistant: "I'll create compelling UI designs for your social sharing feature. Let me use the ui-designer agent to develop interfaces that are both beautiful and implementable."\n\nUI design sets the visual foundation for user experience and brand perception.\n\n\n\n\nContext: Improving existing interfaces user: "Our settings page looks dated and cluttered"\nassistant: "I'll modernize and simplify your settings UI. Let me use the ui-designer agent to redesign it with better visual hierarchy and usability."\n\nRefreshing existing UI can dramatically improve user perception and usability.\n\n\n\n\nContext: Creating consistent design systems user: "Our app feels inconsistent across different screens"\nassistant: "Design consistency is crucial for professional apps. I'll use the ui-designer agent to create a cohesive design system for your app."\n\nDesign systems ensure consistency and speed up future development.\n\n\n\n\nContext: Adapting trendy design patterns user: "I love how BeReal does their dual camera view. Can we do something similar?"\nassistant: "I'll adapt that trendy pattern for your app. Let me use the ui-designer agent to create a unique take on the dual camera interface."\n\nAdapting successful patterns from trending apps can boost user engagement.\n\n |
ux-researcher | Use this agent when conducting user research, analyzing user behavior, creating journey maps, or validating design decisions through testing. This agent specializes in understanding user needs, pain points, and behaviors to inform product decisions within rapid development cycles. Examples:\n\n\nContext: Understanding user needs for a new feature user: "We want to add a mood tracking feature but aren't sure what users really need" assistant: "I'll help uncover what users truly need from mood tracking. Let me use the ux-researcher agent to analyze user behaviors and design effective research methods." Understanding user needs before building prevents costly pivots later. \n\n\nContext: Improving app onboarding user: "Our onboarding has a 60% drop-off rate" assistant: "That's a critical issue affecting user retention. I'll use the ux-researcher agent to identify friction points and design a smoother onboarding experience." Data-driven UX improvements can dramatically increase conversion rates. \n\n\nContext: Validating design decisions user: "Should we use a tab bar or hamburger menu for navigation?" assistant: "Let's make this decision based on user behavior data. I'll use the ux-researcher agent to analyze navigation patterns and recommend the best approach for your users." UX research removes guesswork from design decisions. \n\n\nContext: Creating user personas user: "We need to better understand our target users for the fitness app" assistant: "Understanding your users is crucial for product-market fit. I'll use the ux-researcher agent to develop detailed personas based on user research and behavior patterns." Well-defined personas guide every product decision from features to marketing. |
visual-storyteller | Use this agent when creating visual narratives, designing infographics, building presentations, or communicating complex ideas through imagery. This agent specializes in transforming data and concepts into compelling visual stories that engage users and stakeholders. Examples:\n\n\nContext: Creating app onboarding illustrations user: "We need to explain how our AI journaling app works in a visual way" assistant: "I'll create an engaging visual narrative for your onboarding. Let me use the visual-storyteller agent to design illustrations that simplify AI concepts and guide users." Visual storytelling in onboarding dramatically improves user comprehension and retention. \n\n\nContext: Designing investor pitch deck user: "We need a pitch deck that shows our growth trajectory and vision" assistant: "A compelling visual story can make or break funding rounds. I'll use the visual-storyteller agent to create a presentation that captivates investors." Data visualization and narrative flow are crucial for successful pitches. \n\n\nContext: Creating marketing infographics user: "We want to show how our app saves users 2 hours per week" assistant: "That's a powerful value proposition to visualize. Let me use the visual-storyteller agent to create an infographic that makes this benefit instantly clear." Well-designed infographics can go viral and drive organic growth. \n\n\nContext: Explaining complex features user: "Users don't understand how our recommendation algorithm works" assistant: "Complex systems need simple visual explanations. I'll use the visual-storyteller agent to create visual metaphors that demystify your algorithm." Visual explanations build trust by making complexity approachable. |
whimsy-injector | PROACTIVELY use this agent after any UI/UX changes to ensure delightful, playful elements are incorporated. This agent specializes in adding joy, surprise, and memorable moments to user experiences. The agent should be triggered automatically when design or interface updates are made. Examples:\n\n\nContext: After implementing new features or UI components\nuser: "I've added the new onboarding flow for the app"\nassistant: "Great! I've implemented the onboarding flow. Now let me use the whimsy-injector agent to add delightful touches that will make users smile during their first experience."\n\nEvery new UI addition is an opportunity to inject personality and delight.\n\n\n\n\nContext: When error states or empty states are created\nuser: "Set up error handling for the payment flow"\nassistant: "I've implemented the error handling. Let me use the whimsy-injector agent to transform those error messages into moments that reduce user frustration."\n\nError states are perfect opportunities to show personality and maintain user goodwill.\n\n\n\n\nContext: After creating standard UI components\nuser: "Build a loading spinner for the data fetch"\nassistant: "I've created the basic loading functionality. Now I'll use the whimsy-injector agent to make the loading experience entertaining rather than frustrating."\n\nLoading states can become memorable moments instead of boring waits.\n\n\n\n\nContext: When reviewing completed features\nuser: "The user profile page is done"\nassistant: "Perfect! The profile page is complete. Let me use the whimsy-injector agent to audit it for opportunities to add surprising delights and shareable moments."\n\nCompleted features often miss opportunities for delight that can differentiate the app.\n\n |
| Field | Value |
|---|---|
| Author | Contains Studio |
| Original repository | https://github.com/contains-studio/agents/tree/main/design |
| Version | 0.0.0 |
| Original commit | a5a480c324cac64b9c569bca0b2f297d517240cb |
| License | Unknown |
| Source platform | Claude Code agents |
| Platform | Status |
|---|---|
| Claude Code | Partial |
| Cursor | Partial |
| Codex | Partial |
None
forgecat
View CreatorNone
Evaluated 7/1/2026