前端设计技能：告别AI垃圾美学，创建独特、生产级前端界面与代码

frontend-design by secondsky/claude-skills

77 周安装量

90 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/secondsky/claude-skills --skill frontend-design

设计用户体验前端架构

🇨🇳中文介绍

此技能指导创建独特、生产级的前端界面，避免通用的“AI 垃圾”美学。实现真正可运行的代码，并特别关注美学细节和创意选择。

用户提供前端需求：要构建的组件、页面、应用程序或界面。他们可能包含关于目的、受众或技术限制的上下文。

设计思维

在编码之前，理解上下文并致力于一个大胆的美学方向：

目的：这个界面解决什么问题？谁使用它？
基调：选择一个极端：极度简约、极致混乱、复古未来主义、有机/自然、奢华/精致、有趣/玩具感、编辑/杂志感、粗野主义/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义等。有太多风格可供选择。用这些来激发灵感，但要设计一个真正符合美学方向的作品。
限制：技术要求（框架、性能、可访问性）。
差异化：什么让这个界面令人难忘？人们会记住的那一点是什么？

关键：选择一个清晰的概念方向并精确执行。大胆的极致主义和精致的极简主义都有效——关键在于意图，而非强度。

然后实现可运行的代码（HTML/CSS/JS、React、Vue 等），要求：

生产级且功能完备
视觉冲击力强且令人难忘
具有清晰美学观点的整体性
每个细节都经过精心打磨

前端美学指南

关注：

排版：选择美观、独特且有趣的字体。避免使用通用字体，如 Arial 和 Inter；选择能提升前端美感的独特字体；选择意想不到、富有特色的字体。将独特的展示字体与精致的正文字体配对使用。
色彩与主题：致力于一个统一的美学。使用 CSS 变量确保一致性。具有鲜明强调色的主色调胜过胆怯、均匀分布的调色板。
动效：使用动画实现效果和微交互。对于 HTML，优先使用纯 CSS 解决方案。对于 React，在可用时使用 Motion 库。专注于高影响力的时刻：一个编排良好的页面加载，配合错落有致的元素显现（animation-delay），比分散的微交互更能创造愉悦感。使用能带来惊喜感的滚动触发和悬停状态。
空间构成：意想不到的布局。不对称。重叠。对角线流。打破网格的元素。充裕的负空间或受控的密度。
背景与视觉细节：创造氛围和深度，而不是默认使用纯色。添加与整体美学相匹配的上下文效果和纹理。应用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加。

使用通用的 AI 生成美学，例如过度使用的字体族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白底紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特征的千篇一律的设计。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

色彩与主题问题

问题：陈词滥调的配色方案（白底紫色渐变） 解决方案：致力于大胆、符合上下文的色彩选择。使用 CSS 变量确保一致性。考虑：单色加一种强调色、高对比度的粗野主义、柔和的土色调、鲜艳的互补色对。

问题：低对比度影响可访问性 解决方案：验证色彩对比度符合 WCAG AA 标准（文本 4.5:1，大文本 3:1）。使用 WebAIM 对比度检查器等工具。

问题：可预测的、千篇一律的布局 解决方案：尝试不对称、重叠元素、对角线流、打破网格的组件。创造性地使用 CSS Grid 和 Flexbox。

问题：响应式断点失效 解决方案：在 320px、768px、1024px、1440px 下测试。使用流体排版（clamp()）和容器查询。

问题：过度或刺眼的动画 解决方案：使用微妙、有目的的动画。尊重 prefers-reduced-motion 设置。专注于一个编排良好的页面加载，而不是分散的微交互。

问题：动画导致的性能问题 解决方案：优先使用 CSS 动画而非 JavaScript。使用 transform 和 opacity（GPU 加速）。避免对 width、height、top、left 进行动画处理。

问题：缺少键盘导航 解决方案：确保所有交互元素都可通过键盘访问。添加可见的焦点状态。

问题：语义化 HTML 差 解决方案：使用语义化标签（<nav>、<main>、<article>、<section>）。在需要的地方添加 ARIA 标签。

问题：图像缺少替代文本 解决方案：为图像添加描述性替代文本。对于装饰性图像使用空替代文本（alt=""）。

创建设计后，验证：

色彩对比度符合 WCAG AA 标准（文本 4.5:1）
排版独特且可读
视觉层次清晰（标题、正文、强调）
设计具有清晰的美学方向（非通用）
间距和对齐一致
没有过度使用的 AI 模式（紫色渐变、Inter 字体等）

在移动端断点（320px-480px）测试
在平板端断点（768px-1024px）测试
在桌面端断点（1440px+）测试
文本在所有尺寸下都保持可读
图像和媒体缩放适当
小屏幕上无水平滚动

所有交互元素都可通过键盘访问
焦点状态可见且清晰
全程使用语义化 HTML
图像存在替代文本
颜色不是唯一的指示方式（针对色盲用户）
动画尊重 prefers-reduced-motion 设置

动画使用 GPU 加速属性（transform、opacity）
动画不会导致布局抖动
图像已优化（WebP、适当尺寸）
字体高效加载（font-display: swap）
关键 CSS 已内联以实现更快的首次绘制

使用 CSS 变量确保主题一致性
干净、语义化的类名
没有硬编码的魔法数字
注释解释了复杂的决策
在没有 JavaScript 的情况下也能工作（渐进增强）

在 Chrome/Edge（Chromium）中测试
在 Firefox 中测试
在 Safari（WebKit）中测试
为现代 CSS 功能（Grid、clamp 等）提供回退方案

# 测试响应式断点
# 打开浏览器开发者工具 → 切换设备工具栏
# 在以下尺寸测试：320px, 768px, 1024px, 1440px, 1920px

# 检查色彩对比度
# 使用 WebAIM 对比度检查器：https://webaim.org/resources/contrastchecker/

# 测试键盘导航
# 通过 Tab 键遍历所有交互元素
# 验证可见的焦点状态
# 使用屏幕阅读器测试（Mac 上的 VoiceOver，Windows 上的 NVDA）

# 打开浏览器开发者工具 → 性能标签页
# 记录页面加载和交互
# 查找布局偏移（CLS）
# 验证动画以 60fps 运行
# 检查长时间动画是否存在内存泄漏

Chrome/Edge：主要测试
Firefox：验证 CSS Grid/Flexbox 行为
Safari：测试 WebKit 特定问题
移动浏览器：测试触摸交互和视口

🇺🇸English

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose : What problem does this interface solve? Who uses it?
Tone : Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints : Technical requirements (framework, performance, accessibility).
Differentiation : What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL : Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

Typography : Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion : Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition : Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT : Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

Common Design Issues

Typography Problems

Issue : Generic font choices (Inter, Arial, Roboto) Solution : Use distinctive font pairings from Google Fonts or custom fonts. Examples: display fonts (Playfair Display, Bebas Neue, Archivo Black) paired with refined body fonts (Source Serif, Crimson Text, Work Sans).

Issue : Poor hierarchy and readability Solution : Establish clear type scale with CSS variables. Use size, weight, and spacing to create visual hierarchy.

Color & Theme Issues

Issue : Clichéd color schemes (purple gradients on white) Solution : Commit to bold, contextual color choices. Use CSS variables for consistency. Consider: monochromatic with one accent, high-contrast brutalism, muted earth tones, vibrant complementary pairs.

Issue : Low contrast affecting accessibility Solution : Verify color contrast ratios meet WCAG AA (4.5:1 for text, 3:1 for large text). Use tools like WebAIM Contrast Checker.

Layout Issues

Issue : Predictable, cookie-cutter layouts Solution : Experiment with asymmetry, overlapping elements, diagonal flow, grid-breaking components. Use CSS Grid and Flexbox creatively.

Issue : Responsive breakpoints failing Solution : Test at 320px, 768px, 1024px, 1440px. Use fluid typography (clamp()) and container queries.

Animation Issues

Issue : Excessive or jarring animations Solution : Use subtle, purposeful animations. Respect prefers-reduced-motion. Focus on one well-orchestrated page load rather than scattered micro-interactions.

Issue : Performance problems from animations Solution : Prefer CSS animations over JavaScript. Use transform and opacity (GPU-accelerated). Avoid animating width, height, top, left.

Accessibility Violations

Issue : Missing keyboard navigation Solution : Ensure all interactive elements are keyboard accessible. Add visible focus states.

Issue : Poor semantic HTML Solution : Use semantic tags (<nav>, <main>, <article>, <section>). Add ARIA labels where needed.

Issue : Missing alt text on images Solution : Add descriptive alt text for images. Use empty alt (alt="") for decorative images.

Design Validation Checklist

After creating a design, verify:

Visual Quality

Color contrast meets WCAG AA standards (4.5:1 for text)
Typography is distinctive and readable
Visual hierarchy is clear (headings, body, accents)
Design has a clear aesthetic direction (not generic)
Spacing and alignment are consistent
No overused AI patterns (purple gradients, Inter font, etc.)

Responsive Design

Tested at mobile breakpoint (320px-480px)
Tested at tablet breakpoint (768px-1024px)
Tested at desktop breakpoint (1440px+)
Text remains readable at all sizes
Images and media scale appropriately
No horizontal scrolling on small screens

Accessibility

All interactive elements keyboard accessible
Focus states visible and clear
Semantic HTML used throughout
Alt text present for images
Color is not the only indicator (for colorblind users)
Animations respect prefers-reduced-motion

Performance

Animations use GPU-accelerated properties (transform, opacity)
No layout thrashing from animations
Images optimized (WebP, proper dimensions)
Fonts loaded efficiently (font-display: swap)
Critical CSS inlined for faster first paint

Code Quality

CSS variables used for theming consistency
Clean, semantic class names
No hardcoded magic numbers
Comments explain complex decisions
Works without JavaScript (progressive enhancement)

Browser Compatibility

Tested in Chrome/Edge (Chromium)
Tested in Firefox
Tested in Safari (WebKit)
Fallbacks for modern CSS features (Grid, clamp, etc.)

Testing Your Design

Visual Testing

# Test responsive breakpoints
# Open browser DevTools → Toggle device toolbar
# Test at: 320px, 768px, 1024px, 1440px, 1920px

Accessibility Testing

# Check color contrast
# Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/

# Test keyboard navigation
# Tab through all interactive elements
# Verify visible focus states
# Test with screen reader (VoiceOver on Mac, NVDA on Windows)

Performance Testing

# Open browser DevTools → Performance tab
# Record page load and interactions
# Look for layout shifts (CLS)
# Verify animations run at 60fps
# Check for memory leaks with long animations

Cross-Browser Testing

Chrome/Edge: Primary testing
Firefox: Verify CSS Grid/Flexbox behavior
Safari: Test WebKit-specific issues
Mobile browsers: Test touch interactions and viewport

Weekly Installs

Repository

secondsky/claude-skills

GitHub Stars

First Seen

Jan 23, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code69

codex62

cursor62

gemini-cli61

opencode59

github-copilot57

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

49,900 周安装

前端设计技能：告别AI垃圾美学，创建独特、生产级前端界面与代码

🇨🇳中文介绍

设计思维

前端美学指南

相关 Skills

常见设计问题

排版问题

色彩与主题问题

布局问题

动画问题

可访问性违规

设计验证清单

视觉质量

响应式设计

可访问性

性能

代码质量

浏览器兼容性

测试你的设计

视觉测试

可访问性测试

性能测试

跨浏览器测试