design-md-library

Convert brand aesthetic requests into component-level UI direction from DESIGN.md guidance.

Updated May 4, 2026
One-click install
npx skills add https://github.com/panamini/pi-tooling --skill design-md-library
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-md-library
Source: https://github.com/panamini/pi-tooling/tree/main/skills/design-md-library
Command: npx skills add https://github.com/panamini/pi-tooling --skill design-md-library

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and builders often struggle to translate vague brand vibes into actionable, component-level UI guidance, which leads to inconsistent visuals and extra iteration.

Core Features & Use Cases

  • Brand-to-UI translation: Converts a named aesthetic (e.g., Stripe/Notion/Apple) into practical direction for spacing, typography, color roles, and interaction patterns.
  • Scoped reference usage: Guides you to consult only the relevant design pack’s DESIGN.md first, with previews only when you need a faster visual check.
  • Non-copy guidance: Helps you reuse visual language without copying brand assets or implying official compliance.

Quick Start

Use the design-md-library skill to generate UI direction by matching the requested brand to its closest available pack and adapting its component and layout rules to your target product.

Frequently Asked Questions about design-md-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I translate a brand vibe into concrete UI direction?

To translate a brand vibe into concrete UI direction, match the requested brand aesthetic to a design-pack reference, read its primary rules, and adapt component, layout, and interaction decisions for your target product.

How do I apply a specific brand's visual style to my interface without copying assets?

You can apply a specific brand's visual style without copying assets by mapping named design-pack guidance onto your project, adapting typography, spacing, color roles, and motion while enforcing non-infringement constraints.

What is the best way to critique an interface using a specific brand's visual language?

The best way to critique an interface using a specific brand's visual language is to select the best-fit reference pack, consult its design rules, and compare your current layout and interaction patterns against those guidelines.

Can I use this approach to restyle an existing product layout?

Yes, you can use this approach to restyle an existing product layout by selecting a relevant design pack, reading its primary rules, and producing targeted adaptations for typography, spacing, color roles, and motion.

Do I need to preview visual assets before generating UI guidance?

You do not need to preview visual assets initially; you should consult the relevant design pack's primary rules first, using visual previews only when you need a faster visual check during the adaptation process.

What are the limitations of mapping a named aesthetic to a design system?

A key limitation is that mapping a named aesthetic to a design system enforces non-infringement constraints, meaning you reuse visual language for direction but cannot copy brand assets or imply official compliance.