How do I install the Kn Interface Maestro skill?

Run npx skillmds@latest add kaisanetwork/kn-interface-maestro in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Kn Interface Maestro safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Kn Interface Maestro?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Kn Interface Maestro free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Kn Interface Maestro?

kaisanetwork (@kaisanetwork) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Kn Interface Maestro by kaisanetwork

Name: Kn Interface Maestro
Author: kaisanetwork

Kn Interface Maestro

Interface Maestro: Comprehensive guidance for UX/UI strategy, information architecture, and design systems. Follows a logic-first approach to interface design, focusing on user flows, consistent component libraries, and visual hierarchy. Activate this skill when you need to: (1) Define user flows and interaction logic, (2) Create information architectures or wireframes, (3) Build or refine design systems (typography, semantic colors, atomic components), (4) Ensure absolute consistency and WCAG accessibility, or (5) Design micro-interactions and visual feedback.

kaisanetwork 2c1c7cc 5 files · 8.2 KB Updated Sep 17, 2026

File contents

Interface Maestro: UX/UI Design & Strategy

This skill provides a structured approach to creating digital products that prioritize functionality and logical coherence, not just appearance. The methodology emphasizes user intent and structure above visual design considerations.

Core Design Philosophy: Logic-First (The "Tiki-Tiki" Spirit)

Digital interfaces are crafted user journeys, not just collections of screens. Before using any design tools (e.g., Figma), define the purpose and mechanics of the interface.

Module 1: UX Core & Interaction Logic

Start with a clear view of user intent.

User Flow Mapping:
- Source: Where does the user journey begin?
- Intent: What is the user's goal? (e.g., Register, Buy, Read, Reset Password)
- Destination: Where should the user land?
Information Architecture (IA):
- Subtraction: Remove unnecessary elements.
- Grouping: Logically organize features (example: separate unrelated functions).
- Hierarchy: Distinguish primary and secondary actions.

Module 2: Structural Foundation (Wireframes)

Validate ideas early with minimal investment.

Low-Fidelity Patterns: Use simple shapes and placeholder text to sketch layouts.
Structural Test: If the design is unclear in grayscale, address structural—not visual—issues.
Grid Systems: Set layout rules for consistent spacing and responsiveness.

Module 3: Atomic Design Systems (UI)

Enforce consistency across the UI.

Semantic Color System:
- Primary/Secondary: Align colors to brand identity.
- Semantic Roles: Use descriptive color labels (e.g., status-error, status-success).
- Opacities: Apply uniform alpha values for overlays/backgrounds.
Typography Scales:
- Hierarchy: Use defined H1–H4 scales.
- Standardization: Keep font sizes consistent for interactive elements and text blocks.
Component Library:
- Reusability: Components (buttons, cards, sliders) must be modular.
- Flexibility: Support different content lengths in components.

Module 4: Refinement & The 4 Pillars

Refine interfaces according to these principles:

Contrast: Ensure clear visual distinction and meet accessibility (accessibility-checklist.md).
Balance: Harmonize visual weight.
Simplicity: Remove clutter for clarity.
Consistency: Strictly adhere to the Three Button Rule: Use only Primary (Filled), Secondary (Outline), and Tertiary (Text) styles. Do not introduce additional variations.

Micro-interactions & Feedback

Use intentional, user-feedback-driven animations:

Triggers: Highlight buttons on hover/click.
State Changes: Animate actions (like “Like” or “Subscribe”) for feedback.
Purpose: Micro-interactions must serve feedback, status, or user delight.

Advanced Resources

Atomic Design Patterns: atomic-design-patterns.md
Accessibility Standards: accessibility-checklist.md for WCAG 2.2 compliance.

---name: kn-interface-maestrodescription: Interface Maestro: Comprehensive guidance for UX/UI strategy, information architecture, and design systems. Follows a logic-first approach to interface design, focusing on user flows, consistent component libraries, and visual hierarchy. Activate this skill when you need to: (1) Define user flows and interaction logic, (2) Create information architectures or wireframes, (3) Build or refine design systems (typography, semantic colors, atomic components), (4) Ensure absolute consistency and WCAG accessibility, or (5) Design micro-interactions and visual feedback.---# Interface Maestro: UX/UI Design & StrategyThis skill provides a structured approach to creating digital products that prioritize functionality and logical coherence, not just appearance. The methodology emphasizes user intent and structure above visual design considerations.## Core Design Philosophy: Logic-First (The "Tiki-Tiki" Spirit)Digital interfaces are crafted user journeys, not just collections of screens. Before using any design tools (e.g., Figma), define the **purpose** and **mechanics** of the interface.## Module 1: UX Core & Interaction LogicStart with a clear view of user intent.1. **User Flow Mapping:** - **Source:** Where does the user journey begin? - **Intent:** What is the user's goal? (e.g., Register, Buy, Read, Reset Password) - **Destination:** Where should the user land?2. **Information Architecture (IA):** - **Subtraction:** Remove unnecessary elements. - **Grouping:** Logically organize features (example: separate unrelated functions). - **Hierarchy:** Distinguish primary and secondary actions.## Module 2: Structural Foundation (Wireframes)Validate ideas early with minimal investment.- **Low-Fidelity Patterns:** Use simple shapes and placeholder text to sketch layouts.- **Structural Test:** If the design is unclear in grayscale, address structural—not visual—issues.- **Grid Systems:** Set layout rules for consistent spacing and responsiveness.## Module 3: Atomic Design Systems (UI)Enforce consistency across the UI.1. **Semantic Color System:** - **Primary/Secondary:** Align colors to brand identity. - **Semantic Roles:** Use descriptive color labels (e.g., `status-error`, `status-success`). - **Opacities:** Apply uniform alpha values for overlays/backgrounds.2. **Typography Scales:** - **Hierarchy:** Use defined H1–H4 scales. - **Standardization:** Keep font sizes consistent for interactive elements and text blocks.3. **Component Library:** - **Reusability:** Components (buttons, cards, sliders) must be modular. - **Flexibility:** Support different content lengths in components.## Module 4: Refinement & The 4 PillarsRefine interfaces according to these principles:1. **Contrast:** Ensure clear visual distinction and meet accessibility ([accessibility-checklist.md](references/accessibility-checklist.md)).2. **Balance:** Harmonize visual weight.3. **Simplicity:** Remove clutter for clarity.4. **Consistency:** Strictly adhere to the **Three Button Rule**: Use only Primary (Filled), Secondary (Outline), and Tertiary (Text) styles. Do not introduce additional variations.## Micro-interactions & FeedbackUse intentional, user-feedback-driven animations:- **Triggers:** Highlight buttons on hover/click.- **State Changes:** Animate actions (like “Like” or “Subscribe”) for feedback.- **Purpose:** Micro-interactions must serve feedback, status, or user delight.## Advanced Resources- **Atomic Design Patterns:** [atomic-design-patterns.md](references/atomic-design-patterns.md)- **Accessibility Standards:** [accessibility-checklist.md](references/accessibility-checklist.md) for WCAG 2.2 compliance.

Frequently asked questions