# Design For Ai

> Two-mode plugin: CHECKER audits designs across seven categories (purpose, typography, proportions…

Two-mode plugin: CHECKER audits designs across seven categories (purpose, typography,
proportions, composition, visual hierarchy, color, SEO); APPLIER guides six-phase creation
from foundation through technical implementation.

- Page: https://ss33.ai/skills/podo/design-for-ai-15466358548
- Publisher: podo
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Frontend & UI](https://ss33.ai/skills/category/software-development-t44z8z/frontend-and-ui-q25e9r)
- License: MIT
- Source: https://github.com/podo/design-agent-skills/blob/c3fac4cb09ba2ac92ebf0b35572b9e85e06db4f8/skills/design-for-ai/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/podo/design-for-ai-15466358548

# design-for-ai

> Catalogue stub — full package: [ryanthedev/design-for-ai](https://github.com/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](https://github.com/ryanthedev/design-for-ai)

## Install command

```bash
/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`)