Frontend UI Design

Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics.

Sby Skills Guide Bot
DevelopmentIntermediate
107/22/2026
Claude Code
#frontend-design#ui-design#tailwind-css#nuxt-ui#components

Recommended for


name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. extends: C:/Users/HongLinHe/.claude/skills/frontend-design/SKILL.md

本项目使用 frontend-design skill 来确保前端界面的设计质量。

触发条件

当需要执行以下任务时自动使用此 skill:

  • 创建新的 UI 组件
  • 设计页面布局
  • 实现交互动效
  • 构建视觉设计系统

MiniHES 项目设计规范

配色方案

  • 主色: #10B981 (绿色 - 能源/电力)
  • 辅色: #3B82F6 (蓝色 - 数据/科技)
  • 警告: #EF4444 (红色 - 异常)
  • 背景: #F8FAFC (浅灰)

组件库

  • Nuxt UI Components
  • Tailwind CSS
  • Chart.js / ECharts (数据可视化)
Related skills