New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Light Frontend Design

by Light0305 in Light0305/Light-skills

Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…

MITAuto-check passedFrontend & Design

Install Light Frontend Design

skills CLI
$ npx skills add Light0305/Light-skills --skill light-frontend-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Light0305/Light-skills light-frontend-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Light0305/Light-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/light-frontend-design .claude/skills/light-frontend-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
light-frontend-design
GitHub stars
640
Token cost
~3.1k tokens
SKILL.md length
745 words
Files
17 (incl. scripts, references, assets)
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…

  • Works in 9 steps: 有记忆点吗？说得出 signature element 是什么吗？（说不出 =… → 场景对吗？dashboard/admin/landing/海报/移动端的密度与审美… → 能落地跑吗？给的是真能在浏览器跑的代码,不是图、不是伪代码？ → …
  • Tasks that involve Design systems
  • SKILL.md covers 门型诚实（与科研主线 13 技能根本不同——开做前必读）, 核心工作流（六步;做透优先于做多）, ACT / ASK / NEVER and 适配场景表（好看≠能用的硬落点;信息密度按场景分）, plus 3 more sections
  • Runs Python scripts from its folder; calls python, npm and npx; reaches awwwards.com

What it does

Light Frontend Design is an agent skill from Light0305/Light-skills. 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。…

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 20 other files, including scripts, reference files and assets (for example `references.md`, `references/design-systems-map.md` and `references/ecosystem-2026.md`).

It sits in Frontend & Design, covering Design systems, Accessibility and Visual regression testing. It works with React, shadcn/ui, Tailwind CSS and npm. The repository describes itself as: An AI workflow skill pack for research, competitions, and innovation projects. The licence is MIT.

When your agent uses it

  • Tasks that involve Design systems
  • Tasks that involve Accessibility
  • Tasks that involve Visual regression testing

Example prompts

  • “/light-frontend-design”

Requirements

  • Python 3
  • Node.js

Workflow steps

9 steps, taken from the first numbered list in SKILL.md.

  1. 有记忆点吗？说得出 signature element 是什么吗？（说不出 = 一眼 AI 模板）
  2. 场景对吗？dashboard/admin/landing/海报/移动端的密度与审美匹配吗？
  3. 能落地跑吗？给的是真能在浏览器跑的代码,不是图、不是伪代码？
  4. 是不是一眼 AI？ai_tell_lint 0 命中?紫蓝渐变/Inter/16px 圆角/emoji 标题/orb 都规避了?
  5. 可访问吗？contrast_lint（复用 visual_qa）全 PASS?焦点可见?色盲不靠颜色单独承载信息?
  6. 方向是用户定的吗？配色/风格/栈是 AskUserQuestion 让用户拍的,不是我替他选的?
  7. 浏览器证据齐吗？三视口、console/page error、overflow、键盘和截图+SHA 跑过吗？没跑就写 UNAVAILABLE。
  8. 渲染回看了吗？真实截图经视觉复核且截图 SHA 绑定了吗？没有就明说「未做像素级回看」。
  9. 交付合同过了吗？用户决策、素材 license/access、单 token 源、QA artifact/sha256、三视口截图 hash 与回看日期都在

What it can do on your machine

Read from SKILL.md and the folder at commit 6b44f57. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 5 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python
    • npm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • awwwards.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Light Frontend Design loads about 3.1k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 210 tokens; SKILL.md has 745 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~210
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Light0305/Light-skills at commit 6b44f57, republished under its MIT licence (© Light0305). 745 words, ~3,108 tokens.

Download SKILL.mdSave it as .claude/skills/light-frontend-design/SKILL.md (or your agent's skills folder). This skill also uses 16 other files; get the full folder from GitHub.
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
metadata.truth_source
../../docs/competitors/frontend-design.md
metadata.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（机械抓…
metadata.emits
none
metadata.reuses
_shared/visual_qa（contrast 门,同 figure 先例;不重造 WCAG 数学）
metadata.consumes
在线找灵感(Awwwards/GSAP Showcase/Bento Grids/shadcn directory/WebSearch) + 找现成组件料(React Bits/HyperUI/21st.dev/ShaderGradient,免费 copy→去 slop→配 token→过门) + `npm…
metadata.non_dag
true
metadata.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 复用 _shared/visual_qa 把 WCAG 落成机检门（确定性 PASS/FAIL，不靠「看着还行」）； ③ audit_checklist.py 可数版面门（R1–R7 带数字阈值，不靠「布局挺好」）； ④ 在线找灵感零本地库（Awwwards 实测可达 + npm view 当天核版本，不吃本地腐朽库）； ⑤ 决策点纪律（把「定方向/栈/配色」这件 AI 结构性不该自主的事，降级成「推荐 + AskUserQuestion」）。 诚实落后项见文末「名实对齐」。

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

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

写一行代码前，先答设计四问（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。

  • 灵感（看审美不抄码）：当场看 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）：
    • 去 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。
  • 栈版本：装任何包前当天 npm view <pkg> version（绝不信任何文档里内嵌的版本号——实证 12 天就能漂）。
  • 设计「事实」（趋势/字体/组件库现状/资源站 star）查到标 last_checked，查不到标 unknown，绝不编。
③ 出能跑的代码（不是图、不是空话）
  • 默认落地栈：Vite + React（工具/dashboard/原型/静态产物）或 Next App Router（要路由/SSR/SEO/auth）； Tailwind v4 + CSS 变量 token；shadcn/ui 自持可访问组件（标准件不重造）；Motion/GSAP 仅当动效传达层级/交互时。
  • 一个 signature element（非对称布局 / 戏剧化排版 / 独特光标 / 编排式入场…），全站风格自洽，design tokens 一处定义。
  • 适配场景给密度（见下表），别把营销 hero 那套套到 dashboard。
④ 四路 QA + 渲染回看（确定性脏活机检掉）
门脚本判什么通过线
对比度contrast_lint.py（复用 visual_qa）design-token/CSS 配色 WCAG正文 ≥4.5:1、大字/UI ≥3:1（AA）
反 AI-slopai_tell_lint.pyT1–T8 机器味痕迹0 命中（命中即人核+改，非终判）
可数版面audit_checklist.pyR1–R7 版面质量全 PASS（带数字阈值）
真实浏览器browser_qa.pyChromium 三视口、运行错误、overflow、键盘/名称/alt、截图无 FAIL；WARN 必须显式说明
bash
python scripts/browser_qa.py --url http://127.0.0.1:5173 --out browser-qa
python scripts/browser_qa.py --selftest  # 真启动 Chromium，三视口截图，并用坏页验证 FAIL

render-then-look（复用 _shared/visual_qa 的 visual_qa_rubric）：把 browser_qa 的真实截图连同 rubric 交给视觉复核，列具体缺陷（loc/issue/severity）。Playwright/Chromium 缺失返回 UNAVAILABLE； 不得拿静态三门或“代码能编译”冒充已做浏览器/像素级回看。

最后用交付合同防过度宣称：

bash
python scripts/design_delivery_gate.py --input <项目根>/frontend-delivery.json --root <项目根> --as-of 2026-07-05

随仓模板故意 fail-closed。真实交付必须证明：设计方向/栈/配色/字体等关键决策来自用户、授权代理或既有项目； 复用组件/模板/动效有 locator、license、access tier 与 last_checked；抄来的料已落到单一 token 源；四路 QA 与 render-then-look 有真实 artifact。READY / PARTIAL_BROWSER_UNAVAILABLE 会逐个核项目内相对路径、文件存在性与 sha256；对比度报告必须是 light.visual_qa.v1，浏览器报告必须是 light.frontend.browser_qa.v1、覆盖三视口且每张截图存在并匹配 screenshot_sha256， 声明状态须与 artifact 一致。必需决策不能写 not_required，决策/来源/回看日期不能晚于 --as-of。READY 必须有真实 静态三门 PASS，真实浏览器 QA 与渲染回看 PASS/WARN（WARN 须写具体残余风险）；浏览器不可用只能声明 PARTIAL_BROWSER_UNAVAILABLE，不能写成已完成。

⑤ 修到无 critical（fix-and-verify 循环）

任一 critical（对比度 <3:1 不可读 / 元素溢出 / slop 痕迹确认 / 版面硬错）→ 修 → 重渲染重看，直到无 critical。

⑥ 交付 + 设计决策说明

交能跑的代码 + 为什么（视觉记忆点是什么 / 为何这场景这密度 / 为何这配色这字体 / 四路 QA 结果）。不是甩代码走人。

Show full SKILL.md (318 more words)Show less

ACT / ASK / NEVER

ACT（确定性，自己干净做掉）

  • 跑 contrast_lint/ai_tell_lint/audit_checklist + browser_qa 真实 Chromium 自查，再 render-then-look。
  • 跑 design_delivery_gate --root <项目根> --as-of <核验日> 汇总用户决策、来源/许可、token 归一和 QA artifact； READY 不能用 not_required、未来日期、不存在文件、错 hash 或自报状态绕过浏览器与渲染回看。
  • npm view 当天核版本；WebFetch Awwwards / WebSearch 找灵感与趋势。
  • 找现成料改成自己的：去 React Bits/HyperUI/21st.dev/shadcn registry 免费 copy 现成组件 → 走 5 步闭环（去 slop→配项目 token→过四路 QA→回看，见 references/resource-map.md）；付费/登录站不依赖。
  • 出能跑的 React/Tailwind/shadcn 代码 + design tokens（CSS 变量）。
  • 抓并改 AI-slop：Inter/Roboto 系统字 → 有个性的 display+body 配对；紫蓝渐变白底 → 主色+锐利强调；16px 统一圆角 → 有层次的圆角体系；巨型空话 hero → 具体价值主张。
  • 适配场景给密度（dashboard 用 progressive disclosure，landing 砍导航留一个 CTA，admin 高密度键盘可达）。

ASK（决策点，AskUserQuestion 停下问——绝不替用户拍板）

  • 设计方向 / 基调（minimal vs maximal vs editorial…）。
  • 技术栈（React vs Vue；Vite vs Next；shadcn vs 自写组件；装哪套设计系统）。
  • 配色主色 / 字体（给 2–4 个方向带理由+备选）。
  • 改造现有项目：preserve（只动表层）vs overhaul（重建结构）——拿不准默认 preserve 再问。

NEVER（红线）

  • 绝不替用户拍板设计方向/栈/配色/字体（决策点）。
  • 绝不内嵌本地设计库当真相（版本/趋势在线查；查不到标 unknown，绝不编）。
  • 绝不重造 WCAG 数学（对比度判定一律走 _shared/visual_qa）。
  • 绝不交「图」充当「能跑的代码」；绝不静默跳过渲染回看（无渲染器要明说「未做像素级回看」）。
  • 绝不把静态 lint/构建成功当浏览器 E2E；Playwright 缺失写 UNAVAILABLE，不伪造截图、截图 hash 或键盘结果。
  • 绝不让本技能阻断科研主线（off-DAG，不产 findings、不进 STAGE_GATES）。
  • 绝不放任「一眼 AI」过关（紫蓝渐变滥用 / emoji 当标题图标 / gradient-orb 光斑 / 玻璃拟物冒充产品图 / 千篇一律卡片堆叠）。

适配场景表（好看≠能用的硬落点;信息密度按场景分）

场景信息密度审美/布局要点反例（别犯）
数据大屏 / dashboard高（但分层）progressive disclosure（概要先行、下钻见细节）；每个数据点回溯到某决策；桌面可比移动密把所有指标平铺糊一屏（信息过载是头号病）
管理后台 / admin高效率优先非 engagement；高密度表格/批量操作/键盘可达套营销大留白巨 hero，浪费屏效
营销 landing低单一转化目标 → 常砍导航、留一个主 CTA；劝转化非炫创意一堆导航链接分散注意、多个 CTA 抢焦点
学术海报 / 科研系统中高（层级清）标题→方法→结果→结论清晰；配色克制；图表诚实（与 figure 同口径）花哨装饰压过数据、配色喧宾夺主
移动端 / 小程序低-中触控目标 ≥44pt（iOS）/48dp（Android）；拇指热区；空/加载/错误态桌面密度直接塞进小屏、触控目标过小

self-check（交付前过一遍;院士会问的五问）

  1. 有记忆点吗？说得出 signature element 是什么吗？（说不出 = 一眼 AI 模板）
  2. 场景对吗？dashboard/admin/landing/海报/移动端的密度与审美匹配吗？
  3. 能落地跑吗？给的是真能在浏览器跑的代码,不是图、不是伪代码？
  4. 是不是一眼 AI？ai_tell_lint 0 命中?紫蓝渐变/Inter/16px 圆角/emoji 标题/orb 都规避了?
  5. 可访问吗？contrast_lint（复用 visual_qa）全 PASS?焦点可见?色盲不靠颜色单独承载信息?
  6. 方向是用户定的吗？配色/风格/栈是 AskUserQuestion 让用户拍的,不是我替他选的?
  7. 浏览器证据齐吗？三视口、console/page error、overflow、键盘和截图+SHA 跑过吗？没跑就写 UNAVAILABLE。
  8. 渲染回看了吗？真实截图经视觉复核且截图 SHA 绑定了吗？没有就明说「未做像素级回看」。
  9. 交付合同过了吗？用户决策、素材 license/access、单 token 源、QA artifact/sha256、三视口截图 hash 与回看日期都在 design_delivery_gate 里闭合了吗？声明状态与报告真实状态一致吗？

分工边界（诚实,别越界）

  • 与 figure（科研 DAG stage 9）：figure = 论文里的数据图表（matplotlib，诚实性/绑证据档/critical 门/回炉）; frontend = 交互界面/网页/应用 UI（React/Tailwind/shadcn，审美/可用/可访问）。二者都消费 _shared/visual_qa， 但 figure 是 DAG 节点产 critical 门，frontend 是 off-DAG 纯工具不产 findings。要画论文里的统计图 → 去 figure，不在这。
  • 与 system-design（按需工程②）：frontend = 界面/前端;system-design = 架构分层/接口/数据流/(需要时)schema。要设计后端架构 → 去 system-design。
  • 与 file-reading（常驻）：要先读懂用户给的设计稿/截图/Figma 导出 → file-reading 读懂再来这做。
  • design token（v2 诚实定位）：DTCG 单源→多端工程化用于用户项目内部;v2 无 Light 中央视觉 SSOT（一手核无 db05、无 design_tokens 文件、consistency 不管视觉 token）。若同项目也用 figure，配色/字体由用户/总控人工对齐。

名实对齐（诚实落后项,别夸大）

  • 「设计」≠「自动出顶级审美」：本技能的硬增量是静态三门 + 真实 Chromium QA + 在线找灵感 + 决策点纪律;审美高线仍靠模型品味 + render-then-look 人判,脚本只兜「别一眼 AI、别不可读、别版面硬错」的底,不保证「拿 Awwwards」。
  • ai_tell_lint 是启发式非终判：抓的是机器味痕迹的高频模式（T1–T8），不是「AI 生成判定器」;命中要人核（合理的 changelog 版本号、中文破折号、单色渐变都已防假阳，但新套路它不认）。
  • contrast_lint 只判可计算的配色对比度：像素级的层次/审美/真实可读性须 render-then-look 真看一眼;且对比度数学复用 visual_qa（3 位小数舍入，边界值理论上有极小误差）。
  • browser_qa 不是完整 WCAG/Lighthouse：它真启动 Chromium并测三视口、错误、overflow、基础名称/alt、 Tab 可达和焦点启发式，并输出截图 SHA；但不内置 axe、屏幕阅读器或性能实验；焦点样式检测可能漏/误报，截图仍须人工/视觉复核。
  • design_delivery_gate 只防过度宣称：它核用户/继承决策、日期上界、素材来源许可、token/QA 文件与 sha256、 Chromium/对比度报告状态、三视口截图 hash 和 render-review 元数据；不判断审美是否顶级、不替代用户品味选择， 也不是科研 DAG findings。
  • .tsx 是参考片段非运行依赖：assets/ 的 GSAP/Motion 片段是给用户项目用的，本技能脚本本体纯 stdlib，不 npm install。
  • 零本地库 = 灵感/版本在线查：但灵感站多图、可能 WebFetch 受限（Mobbin/Dribbble）→ 诚实降级 unavailable，不假装看到了。
  • 非 DAG 节点：本技能不进科研流水线、不产 findings、不阻断;它是「要做界面时叫一下」的按需工具,别期待它像主线技能那样被总控自动编排。

© Light0305, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 16 other files (scripts, references, assets) in skills/light-frontend-design of Light0305/Light-skills.

  • SKILL.md
  • 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

Open the folder on GitHubat commit 6b44f57

Compare with similar skills

Light Frontend Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Light Frontend Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Light Frontend Design this skillLight0305/Light-skills640—~3.1kAutomated safety check: PassMIT
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
UI Design Systemtry-works/role-model118—~5kAutomated safety check: PassMIT
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
Atlaspacifio/ui154—~2.5kAutomated safety check: PassMIT
Shadcn Tailwind UILiarMTTT/TavernWeave153—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • Atlas

    pacifio/ui

    Atlas — a design language and UI guide system for agent interfaces.

    154 GitHub stars~2.5k tokensUpdated 5 mo ago
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    153 GitHub stars~1.7k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • Audit AI Frontend

    jxnl/personal-monorepo-template

    Audit AI-generated, AI-shaped, or AI-looking frontend code, UI screenshots, and design diffs.

    563 GitHub stars~1.3k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed

More from Light0305/Light-skills

All 23 skills in this repo

  • Citation Verification

    Light0305/Light-skills

    Verifies that every reference in a manuscript is real, correctly identified and actually supports its claim, and produces a citation registry for typesetting.

    640 GitHub stars~3.4k tokensUpdated 3 mo ago
    Auto-check passed

  • Light Research Orchestrator

    Light0305/Light-skills

    Coordinates and recovers multi-stage Light research projects from a single passport file, with checkpoints, stale-work tracking and rerouting only when you approve.

    640 GitHub stars~3.8k tokensUpdated 3 mo ago
    Auto-check passed

  • Patent Disclosure Handoff

    Light0305/Light-skills

    Builds an evidence-backed invention disclosure packet from a project or research result for attorney or patent-agent review, without giving legal advice.

    640 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed

  • Light Project Structure

    Light0305/Light-skills

    Audits, scaffolds and safely migrates research project folder structures, keeping existing repositories read-only until you approve exact moves from a plan.

    640 GitHub stars~3k tokensUpdated 3 mo ago
    Auto-check: notes

  • China Software Copyright Materials

    Light0305/Light-skills

    Prepares draft materials for a China software copyright registration from a real project: application worksheet, source deposit plan, operation manual and consistency checks.

    640 GitHub stars~1.9k tokensUpdated 3 mo ago
    Auto-check passed

  • Light System Design

    Light0305/Light-skills

    Evidence-based workflow for designing or modernizing a software system: current-state inventory, options, API and schema contracts, migration plans, ADRs and verification.

    640 GitHub stars~3.6k tokensUpdated 3 mo ago
    Auto-check passed

Works with

Categories

Questions about Light Frontend Design

What does Light Frontend Design do?

Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…. Light Frontend Design is an agent skill from Light0305/Light-skills.

When should I use Light Frontend Design?

Light Frontend Design fits situations like: tasks that involve Design systems; tasks that involve Accessibility; tasks that involve Visual regression testing.

How do I install Light Frontend Design in Claude Code?

Run `npx skills add Light0305/Light-skills --skill light-frontend-design -a claude-code`. Or copy the skill folder (skills/light-frontend-design in Light0305/Light-skills) into .claude/skills/light-frontend-design in your project. Claude Code loads it when a task matches its description.

How do I install Light Frontend Design in Codex?

Run `npx skills add Light0305/Light-skills --skill light-frontend-design -a codex`. Or copy the skill folder (skills/light-frontend-design in Light0305/Light-skills) into .agents/skills/light-frontend-design in your project. Codex loads it when a task matches its description.

Can I use Light Frontend Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Light0305/Light-skills --skill light-frontend-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/light-frontend-design, .gemini/skills/light-frontend-design, .github/skills/light-frontend-design and .opencode/skills/light-frontend-design in your project.

What does Light Frontend Design need to run?

Going by SKILL.md and its folder, Light Frontend Design needs Python for the scripts in its folder and the command-line tools its instructions call (python, npm and npx). Our summary lists: Python 3; Node.js.

Does Light Frontend Design access the network?

SKILL.md names 1 domain. In commands or code: awwwards.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Light Frontend Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Light Frontend Design use?

Light Frontend Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Light Frontend Design use?

About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7.5k tokens, read only when the agent opens those files.

What are the alternatives to Light Frontend Design?

Skills that share tags, products or a category with Light Frontend Design: Extract Design (Manavarya09/design-extract, 4.2k stars), UI Design System (try-works/role-model, 118 stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars) and Atlas (pacifio/ui, 154 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Light Frontend Design?

Light0305 (a GitHub user) maintains it in Light0305/Light-skills, which has 640 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on July 6, 2026.

Source: Light0305/Light-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.