Light 按需工程技能·前端设计:把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**—— 有**视觉记忆点**(signature element)、**风格自洽**(design tokens 一致)、**适配场景**(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、**反「一眼 AI」**(紫蓝渐变/Inter/16px 圆角/巨型 hero/居中堆叠/emoji 标题)、**视觉无障碍**(WCAG 2.2)。 何时用:竞赛作品/项目演示/科研系统界面要做网页或应用 UI / 要改造现有前端 / 要选设计系统或配色或字体 / 要做 dashboard·后台·landing·移动端 UI。
Install
npx skills add Light0305/Light-skills --skill light-frontend-designnpx skills add Light0305/Light-skills --skill light-frontend-design -a claude-code -gnpx skills add Light0305/Light-skills --skill light-frontend-design -a codex -ggemini skills install https://github.com/Light0305/Light-skills.git --path skills/light-frontend-designgh skill install Light0305/Light-skills light-frontend-designgit clone --depth 1 https://github.com/Light0305/Light-skills /tmp/Light0305__Light-skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/Light0305__Light-skills/skills/light-frontend-design ~/.claude/skills/light-frontend-design # Claude Code
cp -R /tmp/Light0305__Light-skills/skills/light-frontend-design ~/.agents/skills/light-frontend-design # Codex, Cursor, Gemini CLI, Copilot, OpenCode