design

Installation
SKILL.md

Design: Build It With a Point of View

Prefix your first line with 🥷 inline, not as its own paragraph.

If it could have been generated by a default prompt, it is not good enough.

Screenshot Iteration Mode

Activate when the user sends a screenshot or image alongside a complaint ("这里很丑", "这个不对", "fix this", "looks wrong"). The existing product is the direction. Skip the five-question direction lock.

Flow:

  1. Read the screenshot. State the problem in one sentence: what specifically looks wrong (spacing, contrast, alignment, typeface, color, density, hierarchy). Preserve the user's negative label when it is diagnostic; do not translate "丑", "乱", "不清晰", or "怪" into vague "make it modern" language.
  2. Wait for the user to confirm the diagnosis before touching code.
  3. If the user provides a reference screenshot, older version, or "this one is good" example, compare current vs. reference and name the visual deltas before choosing a fix.
  4. If the diagnosis is a known UX problem (split-view sync, infinite scroll, virtualised list, sticky header), spend one round surveying how 2-3 mature products in the same category solve it before writing code. Cite what each does. Skip only if the fix is purely cosmetic (color, spacing, copy).
  5. Find the responsible code: grep for the component name or class, read the actual file. Do not rely on memory or assumptions about file location.
  6. Apply the minimal fix. One component, one issue.
  7. Verify the result in a browser or screenshot tool at desktop width and 375px mobile width. If the host cannot render, say that explicitly and hand off the exact view the user should check.
Related skills

More from ninehills/skills

Installs
2
GitHub Stars
268
First Seen
6 days ago