mcpField
D
design-for-ai

design-for-ai

github.com/podoDesign & UI29162 installsUpdated 1d ago
Repository

About design-for-ai

design-for-ai is a design skill for auditing existing designs and guiding new ones from brief to implementation. Its CHECKER and APPLIER modes cover both design review and creation.

Key features

  1. 01Seven-category design audits
  2. 02Scored findings with remediation
  3. 03Six-phase design creation guidance
  4. 04Coverage from brief to implementation

Use cases

  1. 01Review an existing design for quality
  2. 02Identify design issues and remediation steps
  3. 03Guide a design from brief through implementation

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-for-ai

After installing, type/design-for-aiin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-for-ai

Catalogue stub — full package: ryanthedev/design-for-ai

Decision tree

  1. Is the package already installed? Check: your agent's skills directory contains design-for-ai with content beyond this stub.

    • Yes → invoke design-for-ai and proceed
    • No → go to step 2

  2. Which agent are you on?

    • Claude Code → /plugin marketplace add ryanthedev/rtd-claude-inn then /plugin install design-for-ai@rtd
    • Cursor → /plugin marketplace add ryanthedev/rtd-claude-inn then /plugin install design-for-ai@rtd
    • Other → see GitHub README

Install command

/plugin marketplace add ryanthedev/rtd-claude-inn
/plugin install design-for-ai@rtd

Note: install is a two-step process — add the marketplace source first, then install the plugin by name.

Invoke after install

  • Skill name: design-for-ai
  • Trigger phrases: "design checker", "design auditor", "design for AI", "rtd design", "design-for-ai"

What it does

Operates in two distinct modes. CHECKER mode audits an existing design across seven scored categories — purpose and clarity, typography, proportions, composition, visual hierarchy, color, and SEO readiness — and returns a structured report with actionable remediation for each failing category. APPLIER mode guides creation of a new design through six sequential phases: foundation (brief and constraints), layout structure, typographic system, color and contrast, component composition, and technical implementation. Together the two modes cover the full design lifecycle from blank canvas to quality-assured output.

When NOT to use

  • Lightweight UI polish on an existing component (use taste-skill for faster, lower-overhead iteration)
  • Accessibility-specific audits focused on ARIA, keyboard navigation, or WCAG compliance (use fixing-accessibility or wcag-audit-patterns)

Comments

Markdown supported