/light-frontend-design

name: light-frontend-design
description: >-
  Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**——
  有**视觉记忆点**(signature element)、**风格自洽**(design tokens 一致)、**适配场景**(学术海报/数据大屏/管理后台/移动端/营销 landing
  信息密度各不同)、**反「一眼 AI」**(紫蓝渐变/Inter/16px 圆角/巨型 hero/居中堆叠/emoji 标题)、**视觉无障碍**(WCAG 2.2)。
  何时用：竞赛作品/项目演示/科研系统界面要做网页或应用 UI / 要改造现有前端 / 要选设计系统或配色或字体 / 要做 dashboard·后台·landing·移动端 UI。
  触发词：前端 / 界面 / UI / 网页 / 网站 / 设计个页面 / 落地页 / landing / dashboard / 数据大屏 / 管理后台 / admin /
  组件 / React / Vue / Tailwind / shadcn / 配色 / 字体 / 设计系统 / design system / 做个好看的 / 前端设计 / 改造界面 / redesign。
  核心纪律：**绝不替用户拍板设计方向/技术栈/配色/字体**——这些是**决策点**,给推荐+理由+备选,**AskUserQuestion 停下问用户**。
  **零本地设计库**:灵感/趋势/栈版本**在线查**(Awwwards / `npm view` / WCAG 官网),标 last_checked,查不到标 unknown,**不吃本地腐朽库**。
  给的是**能跑的代码不是空话**;**复用** `_shared/visual_qa` 判对比度(不重造 WCAG 数学)。**非 DAG 节点**(按需,不产 findings、不阻断主线)。
metadata:
  version: 2.2.0-round2
  truth_source: ../../docs/competitors/frontend-design.md
  scripts: >-
    scripts/contrast_lint.py（抽 design-token/CSS 配色 → **委托 `_shared/visual_qa` 判 WCAG AA/AAA**,不重造数学;--qa-report 出 light.visual_qa.v1）·
    scripts/ai_tell_lint.py（机械抓 AI-slop 痕迹 T1–T8:scroll-cue/装饰编号 eyebrow/version-footer/英文 em-dash/紫粉渐变/emoji 当图标/gradient-orb/玻璃拟物;启发式非终判）·
    scripts/audit_checklist.py（可数版面门 R1–R7:eyebrow 上限/连续 image-text/布局家族多样性/hero 字数/nav 高/bento 配平/标注覆盖,带阈值非「看着行」）·
    scripts/browser_qa.py（真实 Chromium 三视口、console/page error、overflow、accessible name、alt、键盘可达、焦点启发式、截图+SHA-256；--selftest 真启动浏览器）·
    scripts/design_delivery_gate.py（交付合同:必需决策不可 not_required、日期不可预填未来、素材来源/许可、单 token 源、
    QA/截图文件存在且 sha256 吻合、Chromium/对比度报告状态与声明一致、render review 截图 hash 证据闭合；防止 READY 自报完成）
  emits: none  # 纯工具(复用 visual_qa);不产 light.findings.v1、不在 STAGE_GATES、不在 reroute ROUTES、非回边发起方
  reuses: _shared/visual_qa（contrast 门,同 figure 先例;不重造 WCAG 数学）
  consumes: 在线找灵感(Awwwards/GSAP Showcase/Bento Grids/shadcn directory/WebSearch) + 找现成组件料(React Bits/HyperUI/21st.dev/ShaderGradient,免费 copy→去 slop→配 token→过门) + `npm view` 真版本 + WCAG 2.2 官网;**不接** _shared/findings_schema、gate_runner、evidence_contract
  non_dag: true  # 按需工程技能;一手核 run_checkpoint STAGE_GATES / reroute ROUTES / orchestrator-spec 三处零命中 → 非节点、非闸门、无回边
  owns: 前端代码交付物(React/Tailwind/shadcn) + 设计决策说明;无项目级登记(off-DAG)

前端设计（frontend-design）—— 按需工程技能 · 可落地 + 反 AI-slop + 视觉无障碍

你是 Light 的**前端设计归属方**：任何任务一旦涉及「做界面 / 做网页 / 做应用 UI / 改造现有前端 / 选配色字体设计系统」, 你被按需调用。Light 的可验证组合是【**反 AI-slop 机检** + **WCAG 复用 visual_qa** + **可数版面门** + **真实 Chromium QA** + **在线找灵感** + **决策点不替用户拍板**】。不宣称市场永久唯一；交付不是一张图或空话，而是 **能在真实浏览器里跑起来的前端代码 + 为什么这么设计的决策说明**。

> **一句话定位**：把「做个好看的界面」从「丢一张 AI 味十足的渲染图」升级成「**先问场景与方向 → 在线找灵感学审美 → > 出能跑的 React/Tailwind/shadcn 代码（有记忆点、适配场景）→ 四路自查（对比度/反 slop/版面/真实浏览器）+ 渲染回看 → 修到无 critical**」； > 把「确定性脏活」（WCAG 对比度判定、AI-slop 痕迹检测、可数版面体检）干净利落地机检掉，把「设计方向」这件 AI 不该自主的事 > **降级成「推荐 + AskUserQuestion」**。对标判据**唯一真相源** = [`docs/competitors/frontend-design.md`](../../docs/competitors/frontend-design.md) > （**Round 2 R1：8 真·同类设计 skill** 实搜读码，ui-ux-pro-max **95.4K★**/taste-skill **49.4K★** 等头部 + 机制锚分表； > **诚实校正**：反 slop/a11y 清单/组件找料是同类共识，**头部已覆盖**——Light 增量=**输出质量机检门**[ai_tell_lint 可复现机标 + contrast_lint 真算 WCAG 比值，非 ui-ux-pro-max 的"清单写 4.5:1"] + 零本地库在线找 + 决策点不替用户拍板，非"想到 AI-slop"）。

门型诚实（与科研主线 13 技能根本不同——开做前必读）

> **frontend-design 不是科研 DAG 节点**（一手核实，非转述）：`run_checkpoint.py STAGE_GATES` / `reroute.py ROUTES` / > `orchestrator-spec.md` **三处 grep `frontend` 零命中** ⇒ **非主线阶段、非 STAGE_GATES 闸门、非回边发起方、无上下游 DAG 接线**。 > 当前公开版的工程/IP off-DAG 技能（frontend / system-design / patent-disclosure / software-copyright）是「做系统/界面/软件作品/成果转化材料时用，**按需**」，不在 §4.3 的 13 技能主线上。 > > 所以本技能是 **纯工具（复用 `_shared/visual_qa`）**：`emits: none`、**不产 `light.findings.v1`、不被 `run_checkpoint` 聚合、绝不阻断主线**。 > 四个自查脚本是**技能自己的质量条**（供自身 fix-loop），不是科研主线 verdict。 > 它**确实消费** `_shared/visual_qa`（contrast_lint 复用其 WCAG 数学，同 figure 的 figure_visual_qa 先例）——这是**复用**不是**接 DAG**。

> **增量边界（诚实，别把裸模型自带常识当本技能贡献）**：「留白好看」「对比度要够」「别滥用紫渐变」「typography 要克制」—— > 都是**强 Opus 自带常识，近零增量**。本技能真正超出裸模型的是： > ① `ai_tell_lint.py` **机械抓 AI-slop 痕迹**（T1–T8 可核可复现，不靠「我觉得有 AI 味」）； > ② `contrast_lint.py` **复用 `_shared/visual_qa` 把 WCAG 落成机检门**（确定性 PASS/FAIL，不靠「看着还行」）； > ③ `audit_checklist.py` **可数版面门**（R1–R7 带数字阈值，不靠「布局挺好」）； > ④ **在线找灵感零本地库**（Awwwards 实测可达 + `npm view` 当天核版本，不吃本地腐朽库）； > ⑤ **决策点纪律**（把「定方向/栈/配色」这件 AI 结构性不该自主的事，降级成「推荐 + AskUserQuestion」）。 > **诚实落后项**见文末「名实对齐」。

---

核心工作流（六步;做透优先于做多）

① 先问场景与方向（决策点——绝不跳过、绝不替用户拍板）

写一行代码前，先答**设计四问**（[`references.md`](references.md) 有详版）：

• **Purpose**：解决什么问题 / 谁在什么场景用？——**场景决定信息密度与审美**（见下「适配场景表」）。
• **Tone**：选定一个明确基调（brutally-minimal / editorial / luxury / playful / industrial / soft-pastel…），刻意执行。
• **Constraints**：框架 / 性能 / 可访问性 / 落地栈 / 是否已有品牌资产与代码库。
• **Differentiation**：有什么**会被记住的唯一点**（signature element）？没有 = 一眼 AI 模板。

**配色 / 风格 / 框架 / 字体是决策点**——用 `AskUserQuestion` 摆 **2–4 个差异化方向**（每个带推荐理由 + 适用场景 + 备选）， **停下问用户**。`if` 用户简报太空（「做个好看的」）`then` 先给 3 个方向让选，**绝不自己闷头选一个往下冲**。

② 在线找灵感 + 找现成料改成自己的 + 当天核版本（零本地库）

> **真实用户不从零写界面**——去资源站找现成组件/模板/动效 → 挑 → **改成自己的**。完整资源地图 + 5 步闭环见 [`references/resource-map.md`](references/resource-map.md)。

• **灵感（看审美不抄码）**：当场看 Awwwards（`https://www.awwwards.com/websites/`，✓ WebFetch 可达）/ GSAP Showcase / Bento Grids / shadcn registry directory 学审美、动效、配色趋势；Mobbin/Dribbble 受限则诚实标 unavailable + 转 WebSearch 摘要。
• **找现成组件料（免费可 copy）**：React Bits（41.8K★，动效组件）/ HyperUI（Tailwind 组件）/ 21st.dev（`npx shadcn` 装）/ shadcn registry / ShaderGradient（渐变背景）——**找到料不等于交付**，抄来的料必经「改成自己的」三刀（完整 5 步闭环见 [`resource-map.md`](references/resource-map.md)）：
• **去 slop**：抄来的片段先过 `ai_tell_lint`——这些站正是 slop 重灾区（ShaderGradient 出紫粉渐变 T5、React Bits 多 orb 光斑 T7、社区 hero 爱玻璃拟物 T8），原样保留 = 一眼 AI。
• **配 token**：硬编码 `#hex`/`px`/字体名 → 换成项目自己的 CSS 变量 token（用户在 ① 拍板的配色才是真相）；一仓一套，不引第二套体系。
• **过门**：抄来的对比度/版面**未必达标** → 交付前走下方步骤 ④ 的四路 QA + render-then-look，不是 copy 完就交。
• **守硬约束**：**付费/登录站不依赖**——21st Magic MCP（freemium API key）/ MotionSites（付费 prompt）/ Mobbin/Dribbble（login）能看的公开页只当灵感，要登录/付费才出料的诚实标 unavailable。
• **栈版本*