AI导哈

设计与多媒体

taste

senlindesign/taste-skill

Reverse-engineer the design taste of any website. Given a URL, captures DOM data and a screenshot via real browser, then runs a 4-step analysis to produce {domain}.md + {domain}.json with practical design tokens (colors, typography, spacing, radii, shadows, grid) AND taste DNA (Trigger → Decision → Reason → Evidence trade-offs explaining WHY the design works). Use whenever the user wants to extract a site's design system, study a competitor's visual language, port an aesthetic to a new project, or generate design guidance for an AI coding agent. Triggers on '/taste <url>', 'analyze the design of X', 'what makes X's site good', 'extract design tokens from X', 'give me X's design DNA', 'build something in the style of X', 'I want my app to feel like X'. Output rejects AI slop ('clean', 'modern', 'user-friendly') in favor of concrete px/hex values and restraint trade-offs. Do NOT use for scraping data, summarizing page content, or tasks unrelated to visual design.

  • 595 次安装
  • 433 星标
  • 收录于

安装命令

npx skills add https://github.com/senlindesign/taste-skill --skill taste

SKILL.md

Taste — Reverse-Engineer a Website's Design DNA

This skill turns a URL into two files:

  • ./{domain}.md — human-readable. Two sections:
    • Design Map — practical tokens (colors, type scale, spacing, radii, shadows, grid)
    • Taste DNA — 3-4 opinionated trade-offs (Trigger → Decision → Reason → Evidence)
  • ./{domain}.json — structured. Same data, machine-parseable, for downstream tools (Cursor, Windsurf, design systems).

The pipeline rejects generic descriptions like "clean and modern". A finished taste.md should read like a senior designer explaining why this particular page made these particular choices — and what plausible alternatives it rejected.

When to activate

Trigger this skill whenever the user wants to study a website's design and capture it as guidance for future design work. Catch all of these: