Design Taste Frontend Skill 安全审计

1617### 0.A Read these signals first181. **Page kind** - landing (SaaS / consumer / agency / event), portfolio (dev / designer / creative studio), redesign (preserve vs overhaul), editorial / blog.192. **Vibe words** the user used - "minimalist", "calm", "Linear-style", "Awwwards", "brutalist", "premium consumer", "Apple-y", "playful", "serious B2B", "editorial", "agency-y", "glassy", "dark tech".203. **Reference signals** - URLs they linked, screenshots they pasted, products they named, brands they're competing with.214. **Audience** - B2B procurement panel vs. design-conscious consumer vs. recruiter scanning a portfolio. The audience picks the aesthetic, not your taste.225. **Brand assets that already exist** - logo, color, type, photography. For redesigns, these are starting material, not optional input (see Section 11).236. **Quiet constraints** - accessibility-first audiences, public-sector, regulated industries, trust-first commerce, kids' products. These constraints OVERRIDE aesthetic preference.24

895896## 13. OUT OF SCOPE897898This skill is NOT for:899* Dashboards / dense product UI / admin panels (use Fluent, Carbon, Atlassian, or Polaris from Section 2.A).900* Data tables (use TanStack Table or AG Grid).901* Multi-step forms / wizards (use Form-specific patterns; this skill won't make them better).902* Code editors (use Monaco / CodeMirror with their official skinning).903* Native mobile (use Apple HIG / Material directly).904* Realtime collab UIs (presence, cursors, OT-aware - different problem class).905

793794### 11.B Audit Before Touching795Document the current state before proposing changes:796* **Brand tokens** - primary / accent colors, type stack, logo treatment, radii.797* **Information architecture** - page tree, primary nav, key conversion paths.798* **Content blocks** - what exists, what's doing work, what's filler.799* **Patterns to preserve** - signature interactions, recognisable hero, copy voice.800* **Patterns to retire** - AI-slop tells, broken layouts, dead links, generic stock imagery, perf traps.801* **Dial reading of the existing site** - infer current `DESIGN_VARIANCE` / `MOTION_INTENSITY` / `VISUAL_DENSITY`. That's your starting point, not the baseline.802* **SEO baseline** - current ranking pages, meta titles, structured data, OG cards. **SEO migration is the #1 redesign risk.**803

824825### 11.F What Never Changes Silently826Never modify without explicit user approval:827* URL structure / route slugs.828* Primary nav labels.829* Form field names or order (breaks analytics + autofill).830* Brand logo or wordmark.831* Existing legal / consent / cookie copy.832

366367```tsx368"use client";369import { useRef, useEffect } from "react";370import { gsap } from "gsap";371import { ScrollTrigger } from "gsap/ScrollTrigger";372import { useReducedMotion } from "motion/react";373374gsap.registerPlugin(ScrollTrigger);375

405      });406    }, ref);407    return () => ctx.revert();408  }, [reduce]);409

524525### 6.B Reduced Motion (mandatory)526* **Any motion above `MOTION_INTENSITY > 3` MUST honor `prefers-reduced-motion`.** This is non-negotiable.527* In Motion: wrap with `useReducedMotion()` and degrade to static.528* In CSS: gate animations behind `@media (prefers-reduced-motion: no-preference)` or provide an override block under `@media (prefers-reduced-motion: reduce)` that disables.529* Infinite loops, parallax, scroll-hijack, and magnetic physics MUST collapse to static / instant under reduced motion.530

963- [ ] **Motion claimed = motion shown**: if `MOTION_INTENSITY > 4`, page actually animates, not just claimed?964- [ ] **GSAP sticky-stack / horizontal-pan** implemented per Section 5.A / 5.B canonical skeleton (`start: "top top"`, `pin: true`, correct scrub)?965- [ ] **No `window.addEventListener('scroll')`** - using Motion `useScroll()` / ScrollTrigger / IntersectionObserver / CSS scroll-driven animations only?966- [ ] **Reduced motion** wrapped for everything `MOTION_INTENSITY > 3`?967- [ ] **Dark mode** tokens defined and tested in both modes?968- [ ] **Mobile collapse** explicit (`w-full`, `px-4`, `max-w-7xl mx-auto`) for high-variance layouts?969- [ ] **Viewport stability**: `min-h-[100dvh]`, never `h-screen`?970- [ ] **`useEffect` animations** have strict cleanup functions?971- [ ] **Empty / loading / error** states provided?972- [ ] **Cards omitted** in favor of spacing where possible?973- [ ] **Icons** from an allowed library only (Phosphor / HugeIcons / Radix / Tabler), no hand-rolled SVG paths?974- [ ] **Motion** isolated in client-leaf components with `'use client'` at the top, memoized?975- [ ] **No AI Tells** from Section 9 (Inter as default, AI-purple, three-equal cards, Jane Doe, Acme, "Quietly in use at")?976- [ ] **Core Web Vitals** plausibly hit (LCP < 2.5s, INP < 200ms, CLS < 0.1)?977- [ ] **One design system** per project (no Material + shadcn mixed)?