Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Skill

前端设计Skill

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.
本Skill指导创建独特、达到生产级别的前端界面，避免通用的“AI流水线”美学风格。实现真正可运行的代码，同时格外注重美学细节与创意选择。
用户提供前端需求：需要构建的组件、页面、应用或界面。他们可能会包含关于用途、受众或技术限制的上下文信息。

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 aesthetic direction:
    • Brutally minimal
    • Maximalist chaos
    • Retro-futuristic
    • Organic/natural
    • Luxury/refined
    • Playful/toy-like
    • Editorial/magazine
    • Brutalist/raw
    • Art deco/geometric
    • Soft/pastel
    • Industrial/utilitarian
    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.
编码之前，先理解上下文并确定一个大胆的美学方向：
  • 用途：该界面解决什么问题？谁会使用它？
  • 风格基调：选择一种极致的美学方向：
    • 极简主义
    • 极繁主义混乱风格
    • 复古未来主义
    • 有机/自然风格
    • 奢华/精致风格
    • 趣味/玩具风格
    • 刊物/杂志风格
    • 粗野主义/原始风格
    • 装饰艺术/几何风格
    • 柔和/马卡龙风格
    • 工业/实用主义风格
    以上方向仅供灵感参考，最终设计需贴合选定的美学方向。
  • 限制条件：技术要求（框架、性能、可访问性）
  • 差异化：是什么让这个界面令人难忘？用户会记住的核心点是什么？
关键要求：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——核心在于设计的目的性，而非强度。

Implementation Standards

实现标准

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
实现可运行的代码（HTML/CSS/JS、React、Vue等），需满足：
  • 达到生产级别且功能完整
  • 视觉冲击力强且令人难忘
  • 风格统一，具有明确的美学视角
  • 每一个细节都经过精心打磨

Frontend Aesthetics Guidelines

前端美学指南

Typography

排版

  • Choose fonts that are beautiful, unique, and interesting
  • Avoid generic fonts like Arial and Inter
  • Use distinctive choices that elevate the frontend's aesthetics
  • Pair a distinctive display font with a refined body font
  • NEVER converge on common choices (Space Grotesk, Inter, Roboto, system fonts)
  • 选择美观、独特且有趣的字体
  • 避免使用Arial、Inter等通用字体
  • 使用独特的字体选择提升前端美学
  • 将独特的标题字体与精致的正文字体搭配使用
  • 绝对不要选择常见字体（如Space Grotesk、Inter、Roboto、系统字体）

Color & Theme

色彩与主题

  • Commit to a cohesive aesthetic
  • Use CSS variables for consistency
  • Dominant colors with sharp accents outperform timid, evenly-distributed palettes
  • Vary between light and dark themes across different components
  • 保持风格统一
  • 使用CSS变量确保一致性
  • 主色调搭配鲜明强调色的效果，优于平淡、均匀分布的调色板
  • 在不同组件中切换亮色与暗色主题

Motion & Animation

动效与动画

  • 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)
  • Use scroll-triggering and hover states that surprise
  • 使用动画实现特效与微交互
  • 对于HTML优先选择纯CSS解决方案
  • 如有条件，在React中使用Motion库
  • 聚焦高影响力场景：一个精心编排的页面加载动画，配合分步显示效果（animation-delay）
  • 使用滚动触发和令人惊喜的悬停状态

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:
  • Gradient meshes
  • Noise textures
  • Geometric patterns
  • Layered transparencies
  • Dramatic shadows
  • Decorative borders
  • Custom cursors
  • Grain overlays
营造氛围与深度，而非默认使用纯色。添加符合整体美学的背景效果与纹理：
  • 渐变网格
  • 噪点纹理
  • 几何图案
  • 分层透明度
  • 戏剧性阴影
  • 装饰性边框
  • 自定义光标
  • 颗粒叠加层

What to AVOID

需避免的内容

NEVER use generic AI-generated aesthetics:
  • Overused font families (Inter, Roboto, Arial, system fonts, Space Grotesk)
  • Cliched color schemes (particularly purple gradients on white backgrounds)
  • Predictable layouts and component patterns
  • Cookie-cutter design that lacks context-specific character
绝对不要使用通用AI生成的美学风格：
  • 过度使用的字体家族（Inter、Roboto、Arial、系统字体、Space Grotesk）
  • 陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）
  • 可预测的布局与组件模式
  • 缺乏场景特色的千篇一律的设计

Design Variation

设计多样性

  • No design should be the same
  • Vary between light and dark themes
  • Use different fonts for different projects
  • Apply different aesthetics to different components
  • Interpret creatively and make unexpected choices that feel genuinely designed for the context
  • 每次设计都应独一无二
  • 在亮色与暗色主题之间切换
  • 为不同项目使用不同字体
  • 为不同组件应用不同美学风格
  • 创造性地解读需求，做出符合场景的意外设计选择

Implementation Complexity

实现复杂度

Match implementation complexity to the aesthetic vision:
  • Maximalist designs: Need elaborate code with extensive animations and effects
  • Minimalist designs: Need restraint, precision, and careful attention to spacing, typography, and subtle details
  • Elegance comes from executing the vision well
根据美学愿景匹配实现复杂度：
  • 极繁主义设计：需要复杂的代码，包含大量动画与特效
  • 极简主义设计：需要克制、精准，注重间距、排版与细节处理
  • 优雅源于对设计愿景的完美执行

Remember

谨记

Don't hold back. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision. Create extraordinary, creative work that is genuinely distinctive and memorable.
不要有所保留。展示跳出常规、完全投入独特愿景所能创造的成果。创造真正独特、令人难忘的非凡创意作品。