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","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,"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 （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 （确定性 PASS/FAIL，不靠「看着还行」）； ③ （R1–R7 带数字阈值，不靠「布局挺好」）； ④ （Awwwards 实测可达 + 当天核版本，不吃本地腐朽库）； ⑤ （把「定方向/栈/配色」这件 AI 结构性不该自主的事，降级成「推荐 + AskUserQuestion」）。 见文末「名实对齐」。