light-frontend-design
bylight0305· 23 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。 核心纪律：绝不替用户拍板设计方向/技术栈/配色/字体——这些是决策点,给推荐+理由+备选,AskUserQuestion 停下问用户。 零本地设计库:灵感/趋势/栈版本在线查(Awwwards / npm view / WCAG 官网),标 last_checked,查不到标 unknown,不吃本地腐朽库。 给的是能跑的代码不是空话;复用 _shared/visual_qa 判对比度(不重造 WCAG 数学)。非 DAG 节点(按需,不产 findings、不阻断主线)。
How to install light-frontend-design?
light0305/light-skills/light-frontend-design
$npx -y skills add light0305/light-skills --skill light-frontend-designInstalls into the current project.
›Prefer a prompt? Paste this to your agent
Run `npx skills use "https://github.com/light0305/light-skills" --skill "light0305/light-skills/light-frontend-design"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.
Use the skills in "https://github.com/light0305/light-skills" that are relevant to the current task. Run `npx skills add "https://github.com/light0305/light-skills"` and select the relevant skills, then follow their instructions.
Related
6 picksType
- react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering.Jul 2026
- hyperframes-registryInstall, discover, and wire registry blocks and components into HyperFrames compositions.Jul 2026
- composition-patternsReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing…Jul 2026
- shadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces.Jul 2026
- lark-apps妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV…Jul 2026
- image-to-code-skillElite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then…Jul 2026
