SuperAPI AI Directory
Partner中文AI newsFavorites
Skillshuman-ui

human-ui

Design & creation

View repository

Updated 10-23 19:20

About this skill

Human UI Guidelines

Make interfaces feel crafted by humans, not generated by algorithms.

How It Works

  1. Fetch the latest guidelines from the source URL
  2. Read the specified files (or ask for files/pattern)
  3. Check against human design principles
  4. Output findings with specific line references

Guidelines Source

Fetch fresh guidelines before each review:

https://guidelines.sh/api/guidelines?type=ui

Use WebFetch to retrieve the latest rules.

Interview Mode

When the user says "interview", "help me define my taste", "what's my style", or similar:

Run through these questions one at a time. Wait for answers. Build a taste profile.

Core Vibe Questions

  1. Pick 3 adjectives for how your product should feel:

    • Playful / Serious / Minimal / Dense / Warm / Clinical / Fast / Deliberate / Premium / Accessible / Bold / Subtle / Friendly / Professional

  2. What apps do you love using? (Not for features—for how they feel)

    • Ask them to screenshot specific moments they love

  3. What do you hate in interfaces?

    • Heavy shadows? Gradients? Rounded corners? Animations? Stock photos?

  4. Spatial preference:

    • Dense, information-rich (like Bloomberg, Linear) or spacious, breathing layouts (like Apple, Notion)?

  5. Animation personality:

    • Snappy and precise (Stripe, Vercel) or bouncy and playful (Duolingo, Headspace)?

  6. Color mood:

    • Monochromatic with subtle accents? Warm earth tones? Cool grays? Bold primaries?

  7. Typography character:

    • Clean and neutral (Inter, SF Pro) or distinctive personality (custom foundry fonts)?

  8. What's the one thing that would make it feel "you"?

    • Custom icons? A specific animation? A color? A texture?

Output a Taste Profile

After the interview, summarize findings as a Taste Profile the user can save:

## Taste Profile: [Product Name]

**Vibe**: [3 adjectives]
**References**: [Apps they mentioned]
**Avoid**: [Things they hate]
**Density**: [Dense/Balanced/Spacious]
**Motion**: [Snappy/Balanced/Playful]
**Color**: [Palette description]
**Typography**: [Direction]
**Signature detail**: [Their "one thing"]

Use this profile to inform all future UI reviews for this project.

Quick Reference

Taste & Craft

  • Taste is having opinions—AI has none
  • Collect references obsessively
  • Define your vibe and commit
  • Handcrafted details compound
  • Constraints breed taste
  • Prioritize feel over features

Micro-interactions & Animation

  • Animation is personality—choose deliberately
  • Use spring physics over bezier curves
  • Stagger list reveals (30-50ms delay)
  • Design exits as carefully as entrances
  • Motion should carry spatial meaning
  • Respect prefers-reduced-motion
  • Every interactive element needs hover feedback

Key Areas to Check

  • Dark mode: Never pure black (#000000), use #1a1a1a
  • Typography: text-wrap: pretty, vary fonts
  • Animation: Organic easing, imperfect timing
  • Layout: Asymmetry over perfect grids
  • Icons: Three states (stroke/duotone/solid)

Usage

When files are provided:

  1. Fetch guidelines from the source URL
  2. Read the specified files
  3. Apply all human design principles
  4. Output findings as file:line format

When no files specified:

  1. Ask which files or pattern to review
  2. Suggest common patterns: src/components/**/*.tsx

When "interview" is specified:

  1. Run through the taste questions one at a time
  2. Wait for each answer before proceeding
  3. Output a Taste Profile summary at the end
  4. Save the profile for future reference