tt-critique（tt 批评）

Context Check

Determine the fidelity tier before running any checks — it controls which rules apply.

1. Read .tt-impeccable.md from the project root → check ### Fidelity Intent. If found, use it.
2. If absent or missing, infer from the codebase:

- Canvas ≤ 390px, mobile-first flex, safe area insets → Strict TUX-native - Desktop-first, 1440px max-width, large display typography, dark #000000 canvas → TT Style - If still unclear, default to TT Style and note the assumption in the report.

Do not block on missing context. Proceed with the inferred tier.

Token tables and CSS variables: tt-impeccable/reference/tokens.md. Typography scale: tt-impeccable/reference/typography.md.

Fidelity tier determines which checks apply — rules marked below as (TUX-native only) are not violations for TT Style, and vice versa.

A design critique, not a code audit. Evaluate what users see and experience — not just whether the code is correct. Be direct. Vague feedback wastes everyone's time.

Step 1: Gather Assessments

Run two independent assessments. Do not let either influence the other before synthesis.

Assessment A: LLM Design Review

Read the relevant source files and visually inspect the rendered interface if browser tools are available.

Think like a TikTok design director. Evaluate:

TUX Anti-Pattern Detection (CRITICAL — start here)

Check against every ban and DO NOT rule in the tt-impeccable skill. These are the TUX equivalents of AI slop tells:

Hard bans (any one of these is a P0 or P1):

1. Side-stripe border: border-left or border-right wider than 1px as a colored accent (universal)
2. Gradient text: background-clip: text + gradient background (universal)
3. Invented radius: any value not from content radius table (4/6/8/10/12/9999px) or container radius table (8/10/14/16/26px) (universal)
4. Custom shadow: box-shadow not matching one of the 6 TUX levels (universal)
5. Glassmorphism: backdrop-filter: blur() used decoratively (universal ban)
6. Brand red as background: #FE2C55 or equivalent used as section/card/page fill (universal)
7. OKLCH / HSL palette construction: TUX uses fixed rgba tokens only (universal)

Token drift (P1–P2):

• Hard-coded hex or rgba values instead of var(--tux-*) variables (universal)
• Off-grid spacing (any px value not in 4/8/12/16/20/24/32) (universal)
• Page horizontal padding deviating from 16px (TUX-native only) — TT Style uses responsive padding (80–120px desktop / 24px mobile)
• Spacing values exceeding 32px (TUX-native only) — TT Style allows uncapped section spacing
• Letter-spacing set to any non-zero value on text below 72px (universal) — TT Style allows negative tracking at 72px+ display text only
• Font sizes not in the 12-step TUX scale (TUX-native only) — TT Style allows display scale (48/72/96px+) for hero text
• Font weight above 700 (TUX-native only) — TT Style allows 800/900 via TikTokVF for hero display text
• Font substitution (anything other than TikTok Sans / system-ui) (universal)
• More than 3 distinct type size tiers on one screen (universal)
• Neutral-first violation: UI/Shape/Primary or UI/Shape/Secondary on more than one distinct element type per screen, OR on any single non-interactive element (no onClick/href/role) — the count check is a ceiling, not the full test. Teal on a decorative arrow or red on a blockquote tint is a violation even when it's the only instance (universal)
• Brand red opacity violation: rgba(254,44,85,*) at any alpha on a content area, blockquote, card fill, or section background — flag regardless of how low the opacity is (universal)
• Media color violation: colored (red or teal) tint/overlay on image or video content; colored placeholder on image/video loading state (universal)
• Border overuse: border or divider lines used to separate content groups where a background color (UI/Page/Flat 2, UI/Page/Grouped 1/2, UI/Shape/Neutral 4 fill) would work — TUX surfaces define hierarchy through layered backgrounds, not outlines. Flag each unnecessary border as P2 (universal)
• Border compensating for low surface contrast: a surface element with both a border AND a background nearly identical to its parent — root cause is wrong background token, not missing border. Fix the background; remove the border (universal)
• Hover via border-color: any :hover rule that changes border-color or adds a border — flag as P2. Hover must be expressed through background or opacity only (universal)

The TikTok Native Test:

"If you sent a screenshot to a TikTok designer, would they say 'that's TikTok' or 'that's a clone made by a third party'?"

Apply the criteria matching the declared fidelity tier:

*Strict TUX-native*:

• Is content the most visually dominant element? Chrome should be secondary.
• Is there a single clear focal point identifiable in 1 second? (primary CTA or key content)
• Do accent colors (red, teal) only appear on interactive elements of the right type?
• Does Primary (brand red) appear on more than one distinct interactive element type per screen? (if yes — one should be neutral)
• Do any image or video surfaces have a colored (red or teal) overlay or colored placeholder? (must not)
• Is the same interaction type styled consistently across all screens?

*TT Style*:

• Is the dark canvas (#000000) used as primary background?
• Do Blaze (red) and Glint (teal) appear only in their correct semantic roles?
• Does hero typography have presence — bold weight, clear scale hierarchy?
• Is negative space used intentionally, not just left empty?
• Does motion feel purposeful and brand-forward (no CSS default easings, no bounce)?
• Would someone recognize this as TikTok brand, not a TikTok-adjacent third party?

Visual Hierarchy Review

• Is the focal point obvious within 1 second?
• Does content lead and chrome support — not the reverse?
• Are there more than 3 visual weight tiers? (size + color intensity combined)
• Do same-level elements use consistent size, weight, and color?
• Is the interface predominantly neutral (black/white/gray)? Seeing brand red or teal on more than a handful of distinct elements is a hierarchy problem, not just a token problem.
• Does the squint test pass? (blur your eyes — hierarchy should still be readable)

Information Architecture & Cognitive Load

• Is the primary action clear without explanation?
• Are related items visually grouped (proximity, common region)?
• Is there content overload? More than 4–5 options per decision point?
• Is complex content progressively disclosed rather than all shown at once?

Interaction & States

• Are all 8 states handled: default, hover (web), focus, active, disabled, loading, error, success?
• Are touch targets ≥ 44×44px?
• Are focus rings visible and sufficient contrast?
• Do loading states give clear feedback?
• Do empty states teach the interface rather than just saying "nothing here"?

Responsive Behavior (if web adaptation)

• Does the layout adapt meaningfully at different viewports, or just shrink?
• Are safe area insets handled on mobile viewports?
• Is the TUX hierarchy preserved across breakpoints?
• Are any interactions hover-dependent and therefore broken on touch?

Microcopy

• Are button labels specific (verb + object) or generic (OK / Submit)?
• Do error messages follow the three-part formula (what / why / fix)?
• Is copy consistent with the TikTok voice (direct, short, action-oriented)?
• Are the same things called the same names throughout?

Return structured findings: anti-pattern verdict, hierarchy assessment, IA/cognitive load, interaction state gaps, copy issues, what's working (2–3 items), priority issues (3–5), and open questions.

Assessment B: Token & Pattern Scan

Read the source files systematically. Search for:

• Raw hex or rgba values not going through var(--tux-*) — note every instance with file:line
• Spacing values not in the TUX grid (4/8/12/16/20/24/32) — flag the off-grid values
• letter-spacing set to any value other than 0
• border-radius values not in either TUX radius table
• box-shadow values not matching the 6 TUX levels
• font-family values other than TikTok Sans / system-ui
• backdrop-filter usage — flag as P1 regardless of tier (universal ban)
• background-clip: text with gradient
• border-left or border-right values > 1px used as accents

Also scan for:

• border, border-top, border-bottom declarations — assess each: could a background color from UI/Page/* or UI/Shape/Neutral 4 replace it?
• border-left or border-right > 1px as colored accent — P0 hard ban

Return: a list of every finding with file, line, current value, and correct TUX value.

Step 2: Generate Critique Report

Synthesize both assessments. Note where they agree, where the token scan found things the LLM missed.

Design Health Score

Rating bands: 22–24 Excellent · 17–21 Good · 12–16 Acceptable · 7–11 Poor · 0–6 Critical

Anti-Pattern Verdict

Start here. Does this look like a TUX surface, or a generic app with TikTok colors? List specific patterns found with file:line references.

Overall Impression

One paragraph: what works, what doesn't, and the single biggest opportunity.

What's Working

2–3 specific things done well, and why they work.

Priority Issues

3–5 most impactful problems. Tag each P0–P3:

• P0 — blocks task completion or is a hard TUX ban violation
• P1 — significant user impact or major TUX fidelity gap
• P2 — visible deviation, workaround exists
• P3 — subtle; nice to fix

For each:

• [P?] Issue name
• What: specific element, file, line
• Why it matters: user impact or TUX fidelity impact
• Fix: exact change needed
• Suggested command: /tt-impeccable extract (token fixes), /tt-impeccable craft [feature] (structural rebuild), /tt-polish (micro-detail pass), /tt-adapt (responsive issues)

Minor Observations

Quick notes on smaller issues.

Questions to Consider

Specific provocative questions based on actual findings — not generic design questions.

Step 3: Ask the User

After presenting findings, ask targeted questions based on what was actually found. Maximum 3 questions. Reference specific findings:

1. Priority direction: "I found issues in [X, Y, Z areas]. Which matters most right now?"
2. Design intent: If the critique found a TUX pattern violation that might be intentional: "The [element] uses [non-TUX pattern] — was this deliberate, or should it align with TUX?"
3. Scope: "I found N issues — focus on top 3, or address everything?"

Step 4: Recommended Actions

After receiving answers:

1. [P?] /tt-impeccable extract — [specific token/component fixes]
2. [P?] /tt-impeccable craft [feature] — [structural rebuilds]
3. [P?] /tt-polish — [visual elevation and micro-detail sweep]
4. [P?] /tt-adapt — [responsive issues]
5. [P?] /tt-audit — for a code-level technical audit (token values line-by-line, accessibility, performance)

End with /tt-polish as the final step if any fixes were recommended.

tt-critique vs tt-audit: this skill evaluates design quality — hierarchy, UX patterns, IA, copy. /tt-audit checks code correctness — token values, component dimensions, accessibility. Run both for a complete picture.

You can ask me to run these one at a time, all at once, or in any order you prefer. Re-run /tt-critique after fixes to see your score improve.

Never

• Soften criticism — developers need honest feedback
• Say "consider exploring..." — give concrete direction
• Skip positive findings — knowing what to preserve matters
• Mark everything P0 — prioritization is the point
• Give generic feedback not tied to specific elements