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
Next.js App Router Expert
Development
A skill that turns Claude into a Next.js App Router expert.
Claude CodeCursoradvanced
890
234
3,180
README Generator
Development
Creates professional and comprehensive README.md files for your projects.
claudeCursorWindsurfbeginner
259
72
1,083
API Documentation Writer
Development
Generates comprehensive API documentation in OpenAPI/Swagger format.
claudeCursorWindsurfintermediate
156
44
943