From light
Provides design direction and implementation advice for creating visually appealing, accessible, and consistent frontends. Covers design principles, technology choices (Next.js, React, Tailwind, shadcn/ui), and anti-patterns. Useful for dashboards, landing pages, and mobile interfaces.
How this skill is triggered — by the user, by Claude, or both
Slash command
/light:light-frontend-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> **代号词表**(本技能频繁引用的编号,首次见此):
assets/gsap-horizontal-pan.tsxassets/gsap-sticky-stack.tsxassets/motion-scroll-reveal.tsxreferences.mdreferences/design-systems-map.mdreferences/ecosystem-2026.mdreferences/fonts-and-colors.mdreferences/redesign-audit.mdreferences/visual-a11y-rules.mdscripts/ai_tell_lint.pyscripts/audit_checklist.pyscripts/contrast_lint.py代号词表(本技能频繁引用的编号,首次见此):
- db05 = 设计系统库(
databases/db05-frontend-styles/,前端/可视化设计规范 + 范式卡 +design_tokens.template.json视觉真相源)。- db09 = 项目状态库(
databases/db09-projects/,跨会话项目记忆:项目卡 / 术语表 / 决策日志 /palette.json取色源)。- a04 = system-design(系统设计 / 数据库 / 接口 / ER 图,前端数据接口对接它)。
- a07 = consistency(一致性常驻技能,统一项目 palette、PPT / 论文图 / 前端同源视觉)。
- m11 = figure-drawing(论文图绘制,与前端共享 palette)。
- m16 = slides(答辩 / 路演 PPT,与前端协调视觉风格)。
databases/db09-projects/projects/<project_name>/palette.json 则必用其取色(与论文图 m11/PPT m16 共享的视觉 SSOT 实例,前端不另立色板;schema 见 db09 README,色值锚点真相源是 db05 design_tokens.template.json)。设计长在已有语境(品牌/代码库/UI kit/真实截图)上而非凭空造。简报太空(如"做个好看的")时进 Advisor 模式:从风格库提 3 个差异化方向让用户选,再押注其一(canvas-design)。涉及品牌则先按 Core Asset Protocol 收集 logo/产品图/UI 截图/品牌色字,写入 brand-spec.md 当一等公民。
设计系统持久化:用一个全局真相源(如 MASTER.md/design tokens)+ 页级覆盖文件(页文件覆盖全局,无页文件则用全局),避免跨页风格漂移(ui-ux-pro-max)。
取 db05 卡时按项目学科用 domain_scope= 过滤(如农业项目看 general + agri-tech 卡,不被他方向偏科卡干扰;无标注的卡默认 general 对所有可见)。引用任何组件库 license/版本时不信卡内散文,跑 databases/db05-frontend-styles/scripts/style_signal.py --npm <包名> 实时查 registry.npmjs.org,冲突信官方在线源、无网用快照并标 stale;Pro/定价层无 API,指向官方 pricing 页人工核。栈选型与各框架的可执行要点(命令/选项/已知坑)见 references.md 与 references/ecosystem-2026.md,正文只给决策级提示:
"use client" 并守边界防 bundle 膨胀;loading.tsx+Suspense 流式、并行取数、next/font 防 layout shift、<Image> 防 CLS;Server Actions 内逐个鉴权;上线前 next build+Lighthouse。(细节见 references「next-best-practices」节。)npx shadcn@latest init 后 add [component] 把源码拷进项目自维护,主题走 CSS 变量,升级手动 diff。(CLI 选项见 references「shadcn/ui」节。)@import "tailwindcss" + @theme 暴露 token),变体可叠、移动优先,复用走组件而非滥抽 class。{state,actions,meta}、显式变体优于布尔。(vercel-composition-patterns,见 references。)design_tokens.template.json(DTCG 视觉 SSOT,a07 维护),前端不另立色板/字阶。细节见 references/ecosystem-2026.md「设计 token 工程化」节。references/ecosystem-2026.md,优先吸收官方/高安装量/可验证的 workflow,而不是安装未知低信号包。三个 linter 把"好看"落成可数判定,交付前必过;都支持 python <脚本> <文件>(或 - 读 stdin)真实输入与 --selftest 自测两种模式:
python scripts/audit_checklist.py <file.html>(给页面元素加 data-* 标注后跑):R1 eyebrow ≤ceil(sections/3)、R2 连续图文 split ≤2、R3 ≥8 段需 ≥4 种 layout family、R4 hero 副文 ≤20 词/≤4 行、R5 nav 单行 ≤80px、R6 bento N 内容=N 格、R7 nav/hero/bento 关键元素出现却未标注 data-* 即 FAIL(防 R4/R5/R6 在没看见的数据上空过)。自带 GOOD/BAD/UNANNOTATED 自测。python scripts/ai_tell_lint.py <file>:T1 scroll cue、T2 装饰性段落编号 eyebrow、T3 版本/Made-with 填充页脚(裸 vX.Y.Z 仅在页脚上下文才算,changelog 列版本不误杀)、T4 英文正文 em-dash(仅扫 HTML 文本节点、排除 CSS/JS/注释/字符串,且与中文相邻的合法破折号不报)——命中即改。自带 DIRTY/CLEAN/CLEAN_TRICKY 自测。python scripts/contrast_lint.py <tokens.json|styles.css>:解析 token/CSS 变量 hex,按 WCAG 相对亮度算两两对比度,按 references/visual-a11y-rules.md 阈值(正文 4.5:1 / 大字 3:1 / UI 3:1)判 PASS/FAIL。纯 stdlib,JSON 支持 DTCG $value 树与显式 pairs 指定角色。自带自测。按 brief 信号选唯一一套:Fluent(Office/Teams) / Carbon(数据后台) / Polaris(电商) / Atlaskit(协作) / Primer(devtool) / govuk-frontend(英政府) / USWDS(美政府) / Radix(自建底座)。一仓一套、版本固定(表内 npm 包名与版本经 curl registry.npmjs.org 实测 HTTP 200)。
改造已有项目:detect(preserve vs overhaul) → audit 4 轴(Layout/Spacing/Hierarchy/Styling) → preservation rules(守住 IA/品牌/已达标无障碍) → modernisation levers → 改造 vs 重做决策树。
直接拷进 Next.js client component 或 Vite+React 项目:
assets/gsap-sticky-stack.tsx — GSAP ScrollTrigger 粘性堆叠卡片(gsap.context + ctx.revert 清理)。assets/gsap-horizontal-pan.tsx — 纵向滚动驱动横向 pan,pin+scrub,reduced-motion 回退原生 overflow。assets/motion-scroll-reveal.tsx — framer-motion 错峰滚动揭示,useReducedMotion 关动效,observer 自动清理。python scripts/audit_checklist.py <file.html> 7/7 + python scripts/ai_tell_lint.py <file> CLEAN + python scripts/contrast_lint.py <tokens.json> 全 PASS。可运行前端代码 + 设计说明(风格/色板/字体/组件清单) + 截图。设计系统登记 db05 与 db09。
数据接口对接 a04;与 PPT(m16)/论文图(m11) 视觉风格协调(a07);无鉴权接口风险提示(security_awareness)。同一项目 palette 由 a07 统一,前端配色与 PPT/论文图同源,不另起一套。
逐工具核查笔记(真实端点/命令/参数/坑)见同目录 references.md。
热门技能/前端栈版本快照见 references/ecosystem-2026.md。
机械门禁脚本见 scripts/;可运行代码骨架见 assets/;字体色彩/设计系统/redesign 协议见 references/ 目录。
npx claudepluginhub light0305/light-skillsGenerates production-grade frontend UIs via design reasoning framework, style selection, anti-pattern avoidance, accessibility, and responsive standards for React/Vue/Svelte/HTML.
Generates distinctive, production-grade frontend code with bold aesthetics for web components, pages, or apps. Avoids generic AI designs.
Designs and builds distinctive production-grade frontend UIs with high aesthetic intentionality. For new web UIs, visual redesigns, or themed components in React/Vue/Svelte/HTML/CSS.