Afrexai Ui Design System

What This Skill Does

The Afrexai UI Design System is a robust, methodical framework for product designers and developers using OpenClaw. It shifts the design process from spontaneous, unstructured decision-making to a disciplined, engineering-like approach. By enforcing a two-phase protocol—Design Brief & Discovery followed by Information Architecture—the skill ensures that every pixel serves a specific business or user goal. It provides standardized YAML templates for project requirements, user personas, and navigation structures, effectively acting as an architect for your digital product. Whether you are building a SaaS dashboard or a marketing site, this skill helps you map out hierarchies and layout patterns before writing a single line of CSS.

Installation

To integrate this system into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/1kalin/afrexai-ui-design-system

Use Cases

• SaaS Dashboard Prototyping: Rapidly define data density requirements and sidebar navigation hierarchies for complex enterprise tools.
• Landing Page Optimization: Use the Design Type Decision Matrix to optimize whitespace and CTA placement for maximum conversion.
• Mobile App UX Strategy: Define thumb-zone interactions and tab-bar structures to ensure intuitive mobile-first navigation.
• Design System Governance: Maintain consistency across large-scale projects by ensuring every sub-component follows the standardized briefing process.

Example Prompts

1. "I need to design a B2B SaaS analytics dashboard. Please initiate the Phase 1 Design Brief using the Afrexai system and ask me the necessary questions to define my project parameters."
2. "Help me restructure the navigation for my e-commerce site. Use the Afrexai information architecture methodology to recommend a pattern based on my 12 product categories and secondary utility requirements."
3. "Analyze my current landing page goals for a high-conversion newsletter sign-up. Using the Afrexai Design Type Decision Matrix, suggest a layout pattern and whitespace strategy."

Tips & Limitations

• Be Specific: The tool is only as good as the data you provide in the YAML templates. Be granular with your technical constraints.
• Iterate: Use this skill as an iterative loop. If a design fails a success metric, return to Phase 1 to refine your business goals.
• Scope: This system focuses on design strategy and architecture; it does not generate production-ready code or final design assets (Figma files/HTML), but provides the blueprint required to build them effectively.