mcpField
D
duo-design

duo-design

github.com/hktitanデザイン・UI653 回インストール5 週間前に更新
リポジトリ

duo-design について

Duolingo のデザインおよびエンジニアリング記事をもとにした、プロダクトデザイナー向けのデザインパターンスキルです。トピックをリンクでたどる構成で、具体的なトークンではなくパターンと根拠を扱います。

主な機能

  1. 01グラフ形式のトピックナビゲーション
  2. 02モーションとセレブレーションのパターン
  3. 03キャラクター、色、タイポグラフィの指針
  4. 04ナビゲーション、サウンド、進捗の設計
  5. 05アクセシビリティとエラー状態の原則

活用シーン

  1. 01ゲーム化プロダクトの操作フィードバック設計
  2. 02ブランドキャラクターと視覚階層の構築
  3. 03ナビゲーション、アクセシビリティ、エラー画面の評価

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hktitan/duolingo --skill duo-design

インストール後、Claude Code で/duo-designを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
accessibility-default.md
bottom-bar-navigation.md
capability-labels.md
celebration-design.md
character-system.md
color-tokens.md
consistency-vs-purpose.md
craft-pass-guardrail.md
design-for-many-ship-one.md
error-as-delight.md
juicy-motion.md
label-the-hard-thing.md
progress-bars.md
prototype-the-extremes.md
required-path-not-optional-branch.md
sound-as-ux.md
type-system.md

詳細

Duolingo デザイン — コンテンツマップ

Duolingo には公開されているデザインシステムのサイトがありません。design.duolingo.com は、厳選された4本の記事をまとめたハブ blog.duolingo.com/hub/design/ に301リダイレクトされます（2026-09-22に確認）。そのため、以下のノードはブログに掲載されたデザインとエンジニアリングの記事をもとにしており、具体的なトークンではなく、パターンとその根拠を扱います。

イージングカーブ、時間の表、コントラスト比、フォーカスリング、コンポーネントAPIなど、実装の細部については [[../duolingo/references/design-handoff]] を参照してください。

このスキルはグラフとして構成されています。以下の説明に目を通し、必要な [[wikilinks]] だけをたどってください。

モーションと感情

  • [[references/juicy-motion]] — すべてのインタラクションに応答性を感じさせる、弾むような、わずかに行き過ぎるイージングカーブ。
  • [[references/celebration-design]] — 「やり遂げた」ことを表現する視覚的な文法。紙吹雪、拡大縮小、キャラクターの登場など。

キャラクターのレイヤー

  • [[references/character-system]] — 製品の感情に訴えかけるAPIとしてのDuoと仲間たち。あらゆるブランドで活用する方法。

トークン

  • [[references/color-tokens]] — ブランドを進化させても画面を書き直さずに済む、役割と値の分離（例：correct-feedback と green-500）。
  • [[references/type-system]] — Feather Bold、ウェイトのルール、読みやすさを最優先にした階層構造。

サーフェス

  • [[references/sound-as-ux]] — 必須の音声フィードバック。追加は簡単で、効果はそれを大きく上回ります。
  • [[references/progress-bars]] — ゲーミフィケーションを取り入れた製品で最も重要なUI要素を、その重要度にふさわしく扱います。
  • [[references/bottom-bar-navigation]] — 5つのタブ、キャラクターアイコンによる認識、位置は固定。

何を作るか決める

  • [[references/prototype-the-extremes]] — 競合する各価値を個別の方向性として最大限まで押し進めて検討し、破綻するポイントを探ります。
  • [[references/consistency-vs-purpose]] — 一貫性は学習コストを下げ、シンプルさは明瞭さを高めます。どちらかが効果を発揮しなくなったら、あらゆる場所に同じルールを適用するのではなく、システムを階層化します。
  • [[references/craft-pass-guardrail]] — 中核指標を動かすと装わずに、純粋な仕上げ改善プロジェクトに予算をつけ、効果を測定する方法。
  • [[references/design-for-many-ship-one]] — ローンチ時に1つだけを有効にする場合でも、最初からN個に対応するレイアウトを構築します。後の実験に必要なのは再設計ではなく分析になります。

インターフェースがユーザーについて示すこと

  • [[references/required-path-not-optional-branch]] — 任意の深掘りはスキップ可能に見えます。促したい行動をメインルートに置き、深掘りできるよう段階的に提示します。
  • [[references/capability-labels]] — レベルや単位には、その後ユーザーができることに基づいた名前を付けます。基準が存在する場合は、外部標準に準拠させます。
  • [[references/label-the-hard-thing]] — 挑戦する前にタスクの難しさを伝えると、失敗への許容度が高まり、達成したときの誇りも増します。

デフォルト

  • [[references/accessibility-default]] — 色だけに頼らない表現、文字サイズの拡大、モーションの抑制、スクリーンリーダー向けの経路は、あると望ましい機能ではなく、出荷を妨げる条件として扱います。
  • [[references/error-as-delight]] — エラー状態は、ブランドの価値を損なわず、それを体現するための追加コストのかからない機会です。

関連スキル

  • [[../duo-gamification/SKILL]] — juicy-feedback はデザインとゲーミフィケーションに関するもので、実装はこちらにあります。
  • [[../duo-voice/SKILL]] — お祝いとエラーは、文章表現の課題でもあります。
  • [[../duo-retention/SKILL]] — 継続利用には安定したホームが必要なため、ボトムバーがあります。

出典

  • blog.duolingo.com/hub/design/ — 4本の記事をまとめたデザインハブ（2026-09-22時点で design.duolingo.com がリダイレクトする先）
  • @duolingo の製品画面 — 観察したモーションとサウンド

コメント

Markdown 対応