Agent skill · Data & Analytics

light-frontend-design

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。 核心纪律：**绝不替用户拍板设计方向/技术栈/配色/字体**——这些是**决策点**,给推荐+理由+备选,**AskUse

Light0305github.com/Light0305GitHub ↗
claude-codecodexships scriptsMIT
Install
npx skills add Light0305/Light-skills --skill light-frontend-design --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 17
SKILL.md size: 12 KB
Bundled scripts: yes
Version: 2.2.0-round2
Path: skills/light-frontend-design/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 505
Language: Python

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

From the SKILL.md

# 前端设计（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 接线**。 > 当前公开

What's inside
Steps it walks through
  1. 门型诚实（与科研主线 13 技能根本不同——开做前必读）
  2. 核心工作流（六步;做透优先于做多）
  3. ① 先问场景与方向（决策点——绝不跳过、绝不替用户拍板）
  4. ② 在线找灵感 + 找现成料改成自己的 + 当天核版本（零本地库）
  5. ③ 出能跑的代码（不是图、不是空话）
  6. ④ 四路 QA + 渲染回看（确定性脏活机检掉）
  7. ⑤ 修到无 critical（fix-and-verify 循环）
  8. ⑥ 交付 + 设计决策说明
  9. ACT / ASK / NEVER
  10. 适配场景表（好看≠能用的硬落点;信息密度按场景分）
  11. self-check（交付前过一遍;院士会问的五问）
  12. 分工边界（诚实,别越界）
  13. 名实对齐（诚实落后项,别夸大）
Ships with 16 files
  • assets/gsap-horizontal-pan.tsx
  • assets/gsap-sticky-stack.tsx
  • assets/motion-scroll-reveal.tsx
  • references.md
  • references/design-systems-map.md
  • references/ecosystem-2026.md
  • references/fonts-and-colors.md
  • references/redesign-audit.md
  • references/resource-map.md
  • references/visual-a11y-rules.md
  • scripts/ai_tell_lint.py
  • scripts/audit_checklist.py
  • scripts/browser_qa.py
  • scripts/contrast_lint.py
  • scripts/design_delivery_gate.py
  • templates/frontend-delivery.example.json
Commands it runs
python scripts/browser_qa.py --url http://127.0.0.1:5173 --out browser-qa
python scripts/browser_qa.py --selftest  # 真启动 Chromium，三视口截图，并用坏页验证 FAIL
python scripts/design_delivery_gate.py --input <项目根>/frontend-delivery.json --root <项目根> --as-of 2026-07-05
More from Light-skills
All skills →
light-consistencyLight 跨材料一致性常驻机读门:在所有产出材料后台核查术语 / 指标(名+值)/ 创新点表述 / 方法名…Design & Presentationlight-data-engineeringLight 科研主线第 2 步·数据工程：**找得到且用得起的数据**（来源/许可/版本/大小/split）+ **提 idea 前先判数据可行性** （数据够不够支撑研究/统计功效）+…Testing & QAlight-experiment-codingLight 科研主线 stage 6：把冻结的 question/estimand、experiment matrix、pre-registration 与 data lineage…Testing & QAlight-figureLight 科研主线第 9 步·图表：图服务论点（每图支撑哪条 claim、删了缺什么）+ 出版级规格（栏宽/字号/色盲安全/ 误差棒+n+显著性）+ 视觉诚实（不偷偷截 y 轴/不双 y…Documentationlight-file-readingLight 多格式文件深度理解常驻技能：强大地读 Word / PDF / PPTX / Excel / CSV / 图片 / 视频 / 代码 / 压缩包，**不只提取文字，而是理解结构 / 图表…Data & Analyticslight-citationVerify scholarly references and claim-citation support for Light stage 10. Use when auditing a…Other
About this skill
What does the light-frontend-design skill do?

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。 核心纪律：**绝不替用户拍板设计方向/技术栈/配色/字体**——这些是**决策点**,给推荐+理由+备选,**AskUse

How do I install it?

Run `npx skills add Light0305/Light-skills --skill light-frontend-design --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From Light0305/Light-skills, a repository with 505 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going
All skills →
The full catalog, by category and by tool.
Open Source Radar →
The repositories these skills come from, watched daily.
The people behind them →
Makers and builders across the ecosystem.