frontend-design

高质量前端界面设计指南。当用户要求构建 Web 组件、页面、仪表板、React/Vue 组件、HTML/CSS 布局，或对任何 Web UI 进行样式美化时使用。生成富有创意、精美的代码和 UI 设计，避免通用的 AI 美学。

$ 安裝

git clone https://github.com/ChuDiRen/AI-agent-testing-platform /tmp/AI-agent-testing-platform && cp -r /tmp/AI-agent-testing-platform/.codebuddy/skills/design/frontend-design ~/.claude/skills/AI-agent-testing-platform

// tip: Run this command in your terminal to install the skill

SKILL.md

View on GitHub →

name: frontend-design description: 高质量前端界面设计指南。当用户要求构建 Web 组件、页面、仪表板、React/Vue 组件、HTML/CSS 布局，或对任何 Web UI 进行样式美化时使用。生成富有创意、精美的代码和 UI 设计，避免通用的 AI 美学。

Frontend Design - 高质量前端界面设计

核心理念

设计先行：在编码前，深入理解上下文，并确定大胆的美学方向。

设计思考清单

1. 目的是什么？（展示/交互/转化/娱乐）
2. 用户群体是谁？
3. 技术约束有哪些？
4. 什么美学方向最适合？

反模式警告

避免"AI俗套"美学

❌ 禁止使用：
- 字体：Inter、Roboto、Arial（太常见）
- 颜色：紫色渐变 + 白色背景（AI 标配）
- 布局：居中卡片 + 圆角按钮（千篇一律）

✅ 应该追求：
- 独特的字体组合
- 有意义的配色方案
- 创新的布局结构
- 定制化的视觉元素

美学方向库

现代简约系

风格	特点	适用场景
极简主义	大量留白、单色调	高端品牌、作品集
瑞士设计	网格系统、无衬线字体	企业官网、SaaS
日式极简	不对称平衡、自然色调	生活方式、艺术

大胆表现系

风格	特点	适用场景
粗野主义	原始、大胆排版	创意机构
极繁主义	丰富层次、视觉冲击	娱乐、活动
赛博朋克	霓虹色、故障效果	游戏、科技

设计系统构建

字体配对

/* 现代科技感 */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'Inter', sans-serif;

/* 优雅杂志风 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

配色方案示例

行业	主色	点缀色	氛围
金融科技	深蓝 #1e3a5f	金色 #d4af37	信任、专业
健康医疗	青绿 #0d9488	橙色 #f97316	清新、关怀
创意设计	紫红 #be185d	青色 #06b6d4	创新、活力

实施检查清单

设计阶段

明确美学方向
定义设计系统
规划布局结构

开发阶段

代码为生产级质量
功能完整可用
响应式适配

质量阶段

视觉独特有记忆点
细节处理到位
动效自然流畅