design-for-ai

어떤 스킬인가요?

Design-foundations system for Claude Code built on Design for Hackers: a four-stage workflow (research, plan, mock, build) with a seeded design-DNA dealer, dual-blind review, and doctrine skills for usability, data visualisation and prototyping.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

---
name: design-for-ai
description: |
  Design-foundations system for Claude Code built on Design for Hackers: a four-stage workflow
  (research, plan, mock, build) with a seeded design-DNA dealer, dual-blind review, and doctrine
  skills for usability, data visualisation and prototyping.
triggers:
  - "design for AI"
  - "rtd design"
  - "design-for-ai"
  - "design research plan mock build"
das:
  type: package
  category: design-systems
  upstream: "https://github.com/ryanthedev/design-for-ai"
  version: latest
  install: false
---

# design-for-ai

> Catalogue stub — full package: [ryanthedev/design-for-ai](https://github.com/ryanthedev/design-for-ai)

<!-- das:install:start — generated from stub.yaml by `npm run generate`; edit stub.yaml, not this block -->
## Decision tree

1. **Is the full skill already installed?**
   This package installs 4 skills (`prototype`, `clarify`, `usability`, `data-viz`); checking the first.
   - Global: `f=~/.agents/skills/prototype/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"`
   - Project: `f=.agents/skills/prototype/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"`
   - `installed` → the skill is installed as `prototype`, invoke it and proceed
   - `pointer` → go to step 2

2. **Detect scope, then install:**

   ```bash
   [ -e ~/.agents/skills/design-for-ai ] && echo "global" || echo "project"
   ```

   **Global:**
   ```bash
   npx skills add ryanthedev/design-for-ai --skill prototype clarify usability data-viz -g -y
   ```

   **Project:**
   ```bash
   npx skills add ryanthedev/design-for-ai --skill prototype clarify usability data-viz -y
   ```
   > **Claude Code:** send a command as a chat message starting with `!` to run it without leaving the conversation.

**Claude Code plugin route:**

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

**Heads-up**

- **Requires:** Node.js for the plugin's palette, dealer and detector scripts (scripts/*.mjs); Optional: a browser MCP so the prototype skill can render and screenshot mocks
- **License:** MIT per plugin.json and README; no LICENSE file in the repository
- **Name collision:** `prototype` is also written by `emilkowalski-skill` (its install or its catalogue pointer); installing both overwrites the earlier one.
<!-- das:install:end -->

## Invoke after install

- Claude Code plugin route (the full system): `/design-for-ai:research`, then `/design-for-ai:plan`, `/design-for-ai:mock`, `/design-for-ai:build`
- Skill name: `prototype` — renders a self-contained HTML mock or wireframe from design tokens and page specs
- Skill name: `clarify` — turns an underspecified design request into a confirmed brief
- Skill name: `usability` — heuristic evaluation, UX laws, operability questions
- Skill name: `data-viz` — chart type, truthful encoding, dashboard layout
- Trigger phrases: "design for AI", "rtd design", "design research plan mock build"

## What it does

Teaches the agent design vocabulary instead of default AI-looking output (cyan-on-dark heroes, uniform card grids, glassmorphism everywhere). The workflow takes any design idea from brief to a viewable, gated artifact: `research` facilitates the brief, `plan` turns it into a phased design plan, `mock` renders a throwaway prototype and gates on your sign-off, and `build` executes the plan phase by phase with build, review and commit steps. A seeded dealer picks composition, hue and signature from named references (any axis can be pinned by you), and review is dual-blind: an isolated critique plus a deterministic AI-tell detector.

The commands, agents and doctrine files come only with the Claude Code plugin route. `npx skills add` installs the four standalone skills; `usability` and `data-viz` are doctrine files the workflow reads, so on Claude Code they are marked as not directly invocable.

## 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`

type: package
tier: experimental
category: design-systems
rank: 3
upstream: https://github.com/ryanthedev/design-for-ai
version: latest
install_default: npx skills add ryanthedev/design-for-ai --skill prototype clarify usability data-viz
install_claude:
  - /plugin marketplace add ryanthedev/rtd-claude-inn
  - /plugin install design-for-ai@rtd
requires:
  - Node.js for the plugin's palette, dealer and detector scripts (scripts/*.mjs)
  - "Optional: a browser MCP so the prototype skill can render and screenshot mocks"
license: MIT per plugin.json and README; no LICENSE file in the repository
note: "verified 2026-10-21; plugin design-for-ai v4.2.0 is listed in the ryanthedev/rtd-claude-inn marketplace (name rtd), whose entry points at ryanthedev/design-for-ai; plugin route checked against manifests only, not run (it writes to ~/.claude). The workflow commands (research, plan, mock, build), two agents and the doctrine files under references/ come only with the plugin; the skills CLI route installs just the four standalone skills, and usability and data-viz are marked non-user-invocable / manual-only for Claude Code (doctrine the workflow reads). Cursor line from the old pointer is not in upstream docs and was dropped"
installed_as:
  - prototype
  - clarify
  - usability
  - data-viz
conflicts_with:
  - emilkowalski-skill