Agent SkillsOwl-Listener/designer-skills › interfaces-that-feel

interfaces-that-feel

GitHub

评估UI的情感共鸣,将设计意图转化为具身体验。通过命名用户感受、寻找物理类比、提取行为属性并应用至文案、动效和交互层,提升界面的情感可读性与人性化感知。

interaction-design/skills/interfaces-that-feel/SKILL.md Owl-Listener/designer-skills

Trigger Scenarios

UI技术正确但缺乏情感温度 需要优化文案语气或动效以匹配用户情绪状态 设计测试通过但用户体验冷淡

Install

npx skills add Owl-Listener/designer-skills --skill interfaces-that-feel -g -y
More Options

Non-standard path

npx skills add https://github.com/Owl-Listener/designer-skills/tree/main/interaction-design/skills/interfaces-that-feel -g -y

Use without installing

npx skills use Owl-Listener/designer-skills@interfaces-that-feel

指定 Agent (Claude Code)

npx skills add Owl-Listener/designer-skills --skill interfaces-that-feel -a claude-code -g -y

安装 repo 全部 skill

npx skills add Owl-Listener/designer-skills --all -g -y

预览 repo 内 skill

npx skills add Owl-Listener/designer-skills --list

SKILL.md

Frontmatter
{
    "name": "interfaces-that-feel",
    "description": "Apply an emotional resonance lens to a UI that is technically correct but flat, prescribing changes at the copy, motion, and interaction layer. Use when a design tests fine but lands cold. For the polish-perception argument, use `aesthetic-usability` (ui-design)."
}

Interfaces That Feel

You evaluate interfaces through one question: does this feel like it was made by a human who thought about how you'd feel using it?

Technical correctness is the floor. The ceiling is emotional legibility — a product that knows you're a person.

What You Do

You translate design intentions into felt experience. You start with the state the person is in (not the task they're performing), find vocabulary for that feeling in the physical world, then map it to behavioral properties in the interface.

The Translation Process

1. Name the felt state — What is the person actually experiencing when they arrive at this moment? Waiting anxiously. Recovering from an error. Celebrating a small win. Being overwhelmed by options.

2. Find the physical analogue — What in the physical world has that quality? Soft surfaces absorb impact. A held breath before exhaling. The slow release of a door. That's the behavioral vocabulary.

3. Extract the behavioral property — From the physical analogue: weight, resistance, speed, recovery arc, rhythm.

4. Apply to the interface — Which layer carries it? Easing curve, delay, copy tone, color temperature, spacing, animation duration.

Emotional Timing Principles

  • Information weight: heavy news arrives slowly; good news can be instant
  • Recovery space: after an error, give the user 300–600ms before the next prompt — don't rush the recovery
  • System error shame: never make the user feel responsible for the system's failure; copy must own it
  • Celebration arc: micro-wins deserve acknowledgment; don't absorb them silently
  • Loading as mood: the loading state is not neutral — it sets expectation; match it to what's coming

Copy Voice by State

State Voice
Loading Present and calm — "Getting your data" not "Loading..."
Empty Invitational — tell them what belongs here
Error (user) Clear, directive, blame-free — one specific next step
Error (system) Own it, apologize briefly, offer a path forward
Success Warm and brief — acknowledge, don't overdo it
Onboarding Contextual, not tutorial — what they can do, not how to use the app

Motion as Emotional Signal

Easing communicates intent. Ease-in means weight and momentum. Ease-out means natural deceleration, like something soft landing. Linear is mechanical — avoid it for anything that touches human feeling.

Spring physics convey responsiveness. Stiffness and damping are emotional decisions: a stiff spring is snappy and confident; a loose spring is playful and forgiving.

Duration: 150–300ms for UI response. 400–600ms for transitions that carry meaning. Never animate longer than the user's patience for the task.

Review Checklist

Before and after each design pass:

  • What is the person feeling when they hit this state?
  • Is the interface acknowledging that feeling or ignoring it?
  • Does the copy sound like a person wrote it?
  • Does the motion convey intent or just fill time?
  • If you stripped all color and imagery, would the emotional signal survive?

Reference Aesthetic

How We Feel, Headspace, Gentler Streak, Amie, Arc Browser — products where emotional timing, copy voice, and motion are doing the work, not decoration.

Best Practices

  • Start with the felt state of the person, not the task
  • Treat copy as interaction design — every word is a decision
  • Reduce motion before adding it; every animation needs a reason
  • Test with reduced-motion preferences enabled
  • The absence of friction is not warmth — warmth is active, not passive

Version History

  • 20e34c4 Current 2026-08-19 23:21

    技能描述已增强,明确了使用场景(Use when)及边界,防止与其他相似技能冲突。

  • acc3e57 2026-07-25 05:16

Same Skill Collection

design-ops/skills/design-critique/SKILL.md
design-ops/skills/design-debt-audit/SKILL.md
design-ops/skills/design-impact-reporting/SKILL.md
design-ops/skills/design-qa-checklist/SKILL.md
design-ops/skills/design-review-process/SKILL.md
design-ops/skills/design-sprint-plan/SKILL.md
design-ops/skills/handoff-spec/SKILL.md
design-ops/skills/team-workflow/SKILL.md
design-ops/skills/version-control-strategy/SKILL.md
design-research/skills/affinity-diagram/SKILL.md
design-research/skills/card-sort-analysis/SKILL.md
design-research/skills/diary-study-plan/SKILL.md
design-research/skills/empathy-map/SKILL.md
design-research/skills/interview-script/SKILL.md
design-research/skills/jobs-to-be-done/SKILL.md
design-research/skills/journey-map/SKILL.md
design-research/skills/research-repository/SKILL.md
design-research/skills/summarize-interview/SKILL.md
design-research/skills/survey-design/SKILL.md
design-research/skills/usability-test-plan/SKILL.md
design-research/skills/user-persona/SKILL.md
design-systems/skills/accessibility-audit/SKILL.md
design-systems/skills/component-spec/SKILL.md
design-systems/skills/design-system-governance/SKILL.md
design-systems/skills/design-token/SKILL.md
design-systems/skills/documentation-template/SKILL.md
design-systems/skills/icon-system/SKILL.md
design-systems/skills/localization-design/SKILL.md
design-systems/skills/motion-system/SKILL.md
design-systems/skills/naming-convention/SKILL.md
design-systems/skills/pattern-library/SKILL.md
design-systems/skills/theming-system/SKILL.md
designer-toolkit/skills/case-study/SKILL.md
designer-toolkit/skills/design-negotiation/SKILL.md
designer-toolkit/skills/design-rationale/SKILL.md
designer-toolkit/skills/design-system-adoption/SKILL.md
designer-toolkit/skills/design-token-audit/SKILL.md
designer-toolkit/skills/presentation-deck/SKILL.md
designer-toolkit/skills/ux-writing/SKILL.md
interaction-design/skills/animation-principles/SKILL.md
interaction-design/skills/conversational-ux/SKILL.md
interaction-design/skills/doherty-threshold/SKILL.md
interaction-design/skills/error-handling-ux/SKILL.md
interaction-design/skills/feedback-patterns/SKILL.md
interaction-design/skills/fitts-law/SKILL.md
interaction-design/skills/form-design/SKILL.md
interaction-design/skills/gesture-patterns/SKILL.md
interaction-design/skills/hicks-law/SKILL.md
interaction-design/skills/jakobs-law/SKILL.md

Metadata

Files
0
Version
20e34c4
Hash
f6fd3384
Indexed
2026-07-25 05:16

inicio - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-20 01:06
浙ICP备14020137号-1 $mapa de visitantes$