8898bb399e
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
Update audit tracker, roadmap, architecture docs, add admin-v2 Roles page + Billing tests, sync CLAUDE.md, Cargo.toml, docker-compose.yml, add deep-research / frontend-design / chart-visualization skills Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
120 lines
3.1 KiB
Markdown
120 lines
3.1 KiB
Markdown
---
|
||
name: frontend-design
|
||
description: 前端界面设计生成 — 创作独特、生产级的前端界面。避免通用 AI 审美，追求大胆、令人印象深刻的设计风格。支持组件、页面、仪表盘、落地页等各类 Web UI。
|
||
triggers:
|
||
- "设计页面"
|
||
- "前端设计"
|
||
- "UI设计"
|
||
- "创建界面"
|
||
- "设计组件"
|
||
- "网页设计"
|
||
- "落地页"
|
||
- "仪表盘设计"
|
||
- "美化界面"
|
||
- "制作网页"
|
||
tools:
|
||
- read
|
||
- write
|
||
- bash
|
||
---
|
||
|
||
# 前端设计技能
|
||
|
||
创作独特、生产级的前端界面，避免通用的"AI味"审美，追求令人印象深刻的真实设计。
|
||
|
||
## 设计思维流程
|
||
|
||
在编码之前，先理解上下文并确定**大胆的美学方向**：
|
||
|
||
### 1. 分析需求
|
||
|
||
- **目的**: 界面解决什么问题？谁在使用？
|
||
- **基调**: 选择一个极端方向：
|
||
- 极简主义
|
||
- 赛博朋克
|
||
- 复古未来
|
||
- 自然有机
|
||
- 奢华精致
|
||
- 玩具趣味
|
||
- 编辑杂志风
|
||
- 粗野主义
|
||
- Art Deco
|
||
- 柔和马卡龙
|
||
- 工业实用
|
||
- **约束**: 技术要求（框架、性能、可访问性）
|
||
- **差异化**: 什么让这个设计**令人难忘**？
|
||
|
||
### 2. 选择技术栈
|
||
|
||
| 场景 | 推荐技术 |
|
||
|------|---------|
|
||
| 单页面/组件 | HTML + Tailwind CSS |
|
||
| 交互应用 | React + Tailwind CSS |
|
||
| 数据仪表盘 | React + Recharts/D3 |
|
||
| 动画丰富 | HTML + GSAP/Framer Motion |
|
||
| 静态展示 | 纯 HTML/CSS/JS |
|
||
|
||
### 3. 设计执行原则
|
||
|
||
- **生产级质量**: 代码可直接用于生产
|
||
- **视觉冲击力**: 令人过目不忘
|
||
- **美学一致性**: 清晰的设计观点
|
||
- **细节精致**: 每个像素都经过思考
|
||
|
||
## 输出规范
|
||
|
||
**强制要求**: 入口 HTML 文件必须命名为 `index.html`
|
||
|
||
### 文件结构
|
||
|
||
```
|
||
output/
|
||
├── index.html # 入口文件
|
||
├── styles.css # 样式文件（可选）
|
||
└── script.js # 脚本文件（可选）
|
||
```
|
||
|
||
### 质量标准
|
||
|
||
1. **布局**: 清晰的视觉层次，合理的间距和对齐
|
||
2. **色彩**: 大胆但不混乱，有明确的色彩策略
|
||
3. **排版**: 字体选择与主题一致，字号层次分明
|
||
4. **交互**: 悬停效果、过渡动画、状态反馈
|
||
5. **响应式**: 适配桌面和移动端
|
||
6. **可访问性**: 合理的对比度、语义化HTML、ARIA标签
|
||
|
||
## 常见设计模式
|
||
|
||
### 落地页
|
||
```
|
||
Hero区域 → 特性展示 → 社会证明 → CTA → Footer
|
||
```
|
||
|
||
### 仪表盘
|
||
```
|
||
顶部导航 → 侧边栏 → 数据卡片 → 图表区 → 数据表格
|
||
```
|
||
|
||
### 博客/内容
|
||
```
|
||
导航 → 文章列表/详情 → 侧边栏 → 评论 → Footer
|
||
```
|
||
|
||
## 反模式（避免）
|
||
|
||
- 通用渐变背景 + 居中标题（太平庸）
|
||
- 过度使用阴影和圆角（失去个性）
|
||
- 全白背景 + 蓝色按钮（默认 Bootstrap 味）
|
||
- 堆砌动画（干扰内容）
|
||
- 不考虑实际内容的占位符设计
|
||
|
||
## 示例输出
|
||
|
||
当用户说"设计一个 AI 产品落地页"时：
|
||
|
||
1. 确定美学方向（如：深色科技风 + 霓虹强调色）
|
||
2. 选择技术栈（HTML + Tailwind CDN）
|
||
3. 构建完整页面（Hero + 特性 + 演示 + CTA）
|
||
4. 包含实际内容和有意义的交互
|
||
5. 输出可直接在浏览器打开的 `index.html`
|