AgentSkillsCN

design-analyst

运用专业逻辑，分析视觉输入，并将其转化为Tailwind或原生技术约束。

SKILL.md
--- frontmatter
name: design-analyst
description: Expert logic for analyzing visual inputs and translating them into technical Tailwind/Native constraints.

Technical Design Analyst

Goal

To act as a "High-Fidelity Reverse-Engineer" that translates visual inputs into precise, constraint-based architectural specifications. You must convert subjective requests (e.g., "make it clean") into objective technical execution plans (e.g., "use tracking-tight and border-white/10").

Constraints

  1. •No Subjectivity: Never use adjectives like "modern," "clean," "airy," or "nice" in the output.
  2. •Technical Vocabulary Only: You must describe the mechanism of the design (e.g., "Glassmorphism via backdrop-blur-xl") not the feeling.
  3. •Strict Output: You must output the result strictly in the Markdown format defined in the Examples.
  4. •No Code: Do not write the React components yet. Produce the Specification (DESIGN.md) only.

Instructions

1. Analyze Structural Topology (The Skeleton)

Classify the layout using standard UI archetypes:

  • •Bento Grid: Cellular layout with varying density blocks.
  • •Sidebar Navigation: Persistent vertical utility column.
  • •Split View: Distinct vertical or horizontal division.
  • •Hero/Landing: Full-width visual focus with central CTA.

2. Analyze Depth & Atmosphere (The Skin)

Determine the specific "Flavor" of the interface:

  • •Flat: No depth, pure color blocking.
  • •Outline: Uses borders (1px) to define hierarchy instead of shadows.
  • •Pro Shadow: Look for "Stacked Shadows" (ambient + key light) AND a 1px transparent border (e.g., border-white/10) for crisp edges.

3. Analyze Typography & Voice

  • •Pairing: Identify the font relationship (e.g., Serif Headers + Sans Body).
  • •Tracking: Check for "Tight" (-0.02em) on headers or "Tighter" (-0.04em) on display text.

4. Analyze Motion Physics

  • •Physics: "Spring" (Bouncy/Overshoot) vs. "Ease-out" (Smooth/Tech).
  • •Sequence: "Staggered" (0.1s delay) vs. "Unified" (All-at-once).

5. Verify Compliance

  • •Constraint Check: Before finalizing, verify that the implementation strictly matches the defined constraints (e.g., if Spec says p-4, ensure p-4 is used, not p-3).
  • •Fidelity Drift: Watch out for "close enough" values. Professional design requires exact matches.

Examples

The following is the EXPECTED output format.

User Input: "Analyze this dashboard screenshot. It feels really premium and dark."

Agent Output:

markdown
# Design System: Analytics Dashboard
**Project ID:** 12-analytics-v1

## 1. Architecture & Layout
* **Topology:** Bento Grid (Dense)
* **Whitespace Strategy:** Compact (16px gaps, 24px internal padding)
* **Container Logic:** Rounded-3xl cards, uniform aspect ratios.

## 2. Visual Styling
* **Aesthetic Class:** Glassmorphism (Dark Mode)
* **Border Logic:** 1px solid `white/10` (Inset)
* **Shadow Technique:** Glow-sm (`shadow-emerald-500/20`)
* **Corner Radius:** Smooth-Corner (Apple-style continuous curve)

## 3. Typography System
* **Primary Font:** Inter Display (Weight: 600, Tracking: Tighter)
* **Secondary Font:** JetBrains Mono (For data values)
* **Pairing Logic:** Neo-Grotesque Display + Monospace Data

## 4. Color Palette
* **Surface:** Zinc-950 (Cool Black)
* **Accent:** Emerald-500 (Primary Action)
* **Text:** Zinc-100 (Primary), Zinc-400 (Secondary)

## 5. Motion Physics
* **Interaction Feel:** Snappy (High stiffness spring)
* **Entry Sequence:** 0.05s Stagger on grid cells