duo-design

Estrellas2

Forks0

Actualizado4 de mayo de 2026 a las 16:55

UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

HKTITAN

HKTITAN/duolingo

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Diseñadores de interfaces web y digitalesOcupaciones informáticas y matemáticas·SOC 15-1255

Explorador de archivos

11 archivos

SKILL.md

readonly

name	duo-design
description	UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.
license	MIT
metadata	{"author":"HKTITAN","version":"1.0.0","graph":true}

Duolingo Design — Map of Content

The Duolingo design system is publicly documented at design.duolingo.com. This skill extracts the patterns (not the literal tokens) so they apply to any gamified or learning product, not just language apps.

This skill is structured as a graph: scan the descriptions below, follow only the [[wikilinks]] you need.

Motion and feeling

[[references/juicy-motion]] — the bouncy, slightly-overshot easing curves that make every interaction feel responsive.
[[references/celebration-design]] — visual grammar for "you did the thing" — confetti, scaling, character cameos.

The character layer

[[references/character-system]] — Duo and friends as the emotional API of the product; how to build one for any brand.

Tokens

[[references/color-tokens]] — the role/value split (e.g. correct-feedback vs. green-500) that lets a brand evolve without rewriting screens.
[[references/type-system]] — Feather Bold, weight rules, and the legibility-first hierarchy.

Surfaces

[[references/sound-as-ux]] — non-optional audio feedback; cheap to add, disproportionately rewarding.
[[references/progress-bars]] — the most important UI element in a gamified product, treated as such.
[[references/bottom-bar-navigation]] — five tabs, character-icon recognition, never moves.

Defaults

[[references/accessibility-default]] — color-not-only, type-scaling, motion-reduce, screen-reader paths as ship blockers, not nice-to-haves.
[[references/error-as-delight]] — an error state is a free chance to be the brand instead of break it.

Sibling skills

[[../duo-gamification/SKILL]] — juicy-feedback is design + gamification; the implementation lives here.
[[../duo-voice/SKILL]] — celebrations and errors are also a copy problem.
[[../duo-retention/SKILL]] — the bottom bar exists because retention requires a stable home.

Sources

design.duolingo.com — the public design system
@duolingo product surfaces — observed motion and sound

Más de este repositorio

mismo repositorio

duo-culture

HKTITAN/duolingo

Build the team the way Duolingo built theirs — the Green Machine operating model, talent density over headcount, candor protocol ("focus on what, not who"), hire-slow / fire-fast, and the "no process unless it makes decisions better" rule. Use when the user is hiring, defining team rituals, debating remote vs. office, choosing a feedback model, or installing an operating system in a team that has none. Source the Duolingo Handbook (Raise the Bar + Green Machine).

2026-05-042

duo-experimentation

HKTITAN/duolingo

Duolingo-style experimentation as a decision protocol — hundreds of A/B tests a week, opinions resolved by data, ideas killed quickly. Covers hypothesis design, metric selection, guardrails, sample size, novelty effects, and explicit kill criteria. Use when the user wants to run an A/B test, decide between two designs without arguing, set up an experiment program, debug why a test isn't moving, or build a culture where "show don't tell" replaces seniority-based decisions. Source the Duolingo Handbook (Show Don't Tell) and engineering blog posts.

2026-05-042

duo-gamification

HKTITAN/duolingo

Add Duolingo-style play to any product — XP systems, juicy feedback, leagues, celebration moments, hearts/energy, and the anti-grind discipline that keeps gamification from turning toxic. Use when the user asks how to make a product fun, addictive, or "feel like a game," when designing rewards, levels, or progress, or when an existing system feels like a slot machine and they want it to feel like a craft. Source the Duolingo Handbook (Make It Fun) and the Duolingo design system.

2026-05-042

duo-growth

HKTITAN/duolingo

Duolingo-style growth that doesn't break retention — viral loops, brand-as-acquisition (the TikTok playbook), referral mechanics, localization as a growth lever, and the founder-mode marketing that turned a mascot into a meme. Use when the user is planning acquisition, building a referral system, considering paid vs. organic, evaluating a marketing channel, or trying to turn an existing brand into a growth engine. Source the Duolingo Handbook (Make It Fun) and observed marketing patterns from 2022–2025.

2026-05-042

duo-product

HKTITAN/duolingo

Make product decisions the way Duolingo does — long-view over short-term, ruthless prioritization, ship-and-learn over plan-and-ship, dogfooding, and the "intuitive by default" quality bar. Use when the user is roadmapping, deciding what to cut, debating whether to ship, defining a quality bar for a feature, or trying to install a "product-led" culture in a team that defaults to feature factories. Source the Duolingo Handbook principles 1, 2, and 3 (Take the Long View, Raise the Bar, Ship It).

2026-05-042

duo-retention

HKTITAN/duolingo

Duolingo-style retention engineering for any product — habit loops, streaks, leagues, churn diagnostics, day-N drop-off, and the discipline of building a "forever product." Use when the user asks how to keep users coming back, debug churn, design a streak system, time push notifications, run a leaderboard, or shift a product's metric from acquisition to retention. Source the Duolingo Handbook (Take the Long View) and blog data posts; translate every pattern to the user's actual product.

2026-05-042

name	duo-design
description	UI patterns from the Duolingo design system — juicy motion, the character system as the emotional channel, design tokens (color/type/spacing), sound as a UX surface, accessibility as a default not a checklist, and "error-as-delight" detailing. Use when the user is designing a screen for a gamified or learning product, reviewing a design for "why does this feel flat," picking a motion system, building a character mascot, or auditing for accessibility. Source the Duolingo design system at design.duolingo.com.
license	MIT
metadata	{"author":"HKTITAN","version":"1.0.0","graph":true}

Duolingo Design — Map of Content

This skill is structured as a graph: scan the descriptions below, follow only the [[wikilinks]] you need.

Motion and feeling

[[references/juicy-motion]] — the bouncy, slightly-overshot easing curves that make every interaction feel responsive.
[[references/celebration-design]] — visual grammar for "you did the thing" — confetti, scaling, character cameos.

The character layer

[[references/character-system]] — Duo and friends as the emotional API of the product; how to build one for any brand.

Tokens

[[references/color-tokens]] — the role/value split (e.g. correct-feedback vs. green-500) that lets a brand evolve without rewriting screens.
[[references/type-system]] — Feather Bold, weight rules, and the legibility-first hierarchy.

Surfaces

[[references/sound-as-ux]] — non-optional audio feedback; cheap to add, disproportionately rewarding.
[[references/progress-bars]] — the most important UI element in a gamified product, treated as such.
[[references/bottom-bar-navigation]] — five tabs, character-icon recognition, never moves.

Defaults

[[references/accessibility-default]] — color-not-only, type-scaling, motion-reduce, screen-reader paths as ship blockers, not nice-to-haves.
[[references/error-as-delight]] — an error state is a free chance to be the brand instead of break it.

Sibling skills

[[../duo-gamification/SKILL]] — juicy-feedback is design + gamification; the implementation lives here.
[[../duo-voice/SKILL]] — celebrations and errors are also a copy problem.
[[../duo-retention/SKILL]] — the bottom bar exists because retention requires a stable home.

Sources

design.duolingo.com — the public design system
@duolingo product surfaces — observed motion and sound