# light-frontend-design

> Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**—— 有**视觉记忆点**(signature element)、**风格自洽**(des…

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、不阻断主线)。

- Type: Skill
- Made by: Light0305
- Category: Design
- Formats: Skills
- Version: 2.2.0-round2
- Source: https://github.com/light0305/light-skills/tree/HEAD/skills/light-frontend-design
- Page: https://pluginboard.ai/skills/light-frontend-design

## Works with

- ChatGPT
- Claude
- Gemini
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT: Download the light-frontend-design folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans.

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Claude

In Claude (web or desktop): Download the light-frontend-design folder and zip the folder itself, then upload it in Customize → Skills.

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Gemini

In Gemini: Download the light-frontend-design folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it).

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### GitHub Copilot

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.copilot/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Cursor

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.cursor/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Claude Code

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.claude/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Codex

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.agents/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Antigravity

In Antigravity: Copy the light-frontend-design folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI).

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Gemini CLI

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.gemini/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Replit

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design .agents/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### OpenClaw

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.openclaw/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### OpenCode

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.config/opencode/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

### Hermes Agent

Run in your terminal:

```shell
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.hermes/skills/light-frontend-design
```

View the folder on GitHub: https://github.com/Light0305/Light-skills/tree/HEAD/skills/light-frontend-design

---
From Pluginboard (https://pluginboard.ai).