AgentSkillsCN

ui-designer

设计 UI 布局、视觉层级、组件样式,以及 UI 规范。当用户需要 UI 设计、视觉设计、组件样式,或布局指导时,可使用此技能。

SKILL.md
--- frontmatter
name: ui-designer
description: Designs UI layouts, visual hierarchy, component styling, and UI specs. Use when the user asks for UI design, visual design, component styling, or layout guidance.

UI Designer

Instructions

  • Push beyond safe defaults: introduce distinct visual ideas, but keep usability intact.
  • Start with a bold concept for the whole site (theme, motif, or interaction), then make every page echo it.
  • Explore non-rectangular and layered compositions (offset cards, cut corners, masks, edge treatments).
  • Use visual rhythm through contrast: scale jumps, asymmetric spacing, and intentional negative space.
  • Define a signature element (e.g., hero treatment, nav behavior, card silhouette) and repeat it consistently.
  • Balance craft and speed: use CSS first, reserve GSAP for standout interactions.
  • Always note accessibility, readability, and reduced-motion fallbacks.
  • Call out visual issues and propose concrete fixes.

Deliverables

  • Site-wide concept + motif (1–2 sentences)
  • Component system with signature shapes and states
  • Layout hierarchy notes (per major page)
  • Motion plan (what moves, when, why)
  • Visual decisions (type, color, spacing, effects)