Light 按需工程技能·前端设计:把模糊的「做个好看的界面」落成**能跑的 React/Tailwind/shadcn 代码 + 设计决策说明**—— 有**视觉记忆点**(signature element)、**风格自洽**(des…
Part of Light SkillsPack · 23 skills
by Light0305· DesignUnclaimed · Yours? Claim it
About
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、不阻断主线)。
Skills people install alongside light-frontend-design.
Runs on your machine.
Runs on your machine.
Runs on your machine.
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.copilot/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.cursor/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.claude/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.agents/skills/light-frontend-design
Runs on your machine.
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.gemini/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design .agents/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.openclaw/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.config/opencode/skills/light-frontend-design
Runs on your machine.
npx -y degit Light0305/Light-skills/skills/light-frontend-design ~/.hermes/skills/light-frontend-design
Scanned and passed · checked 2 h ago
From people who use it
Step by step
Nothing new reaches your agent until a person has looked at it.
Scanned on every change, and again when our rules improve.
No reviews yet. Used light-frontend-design? Say how it went.
Write a reviewSkills people install alongside light-frontend-design.
Has your agent explain a technical idea as an interactive isometric figure of a real machine, built from many small shaded parts.
A community skill that turns a description, code, Terraform, SQL or API schemas into editable draw.io diagrams, and keeps them in sync.
Turns your agent into a disciplined logo designer, from the brief to tested SVG concepts, lockups, icons and brand guidelines.
Turns one approved character still into a game-ready sprite set: every action animated, keyed, looped and exported for your engine.
Nobody has shared how they use light-frontend-design yet.
Security scan
Passed
Safe to install in every agent it supports. Runs in your agent, as instructions.