Back to Details

frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
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.
此技能指导创建与众不同的生产级前端界面，避免通用的“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: 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
编码前，先理解上下文并确定一个大胆的美学方向：
  • 用途：该界面解决什么问题？谁会使用它？
  • 风格基调：选择一种极致风格：极简主义、极繁主义混乱、复古未来主义、有机自然风、奢华精致风、趣味玩具风、杂志编辑风、粗野主义原始风、装饰艺术几何风、柔和马卡龙风、工业实用风等。有很多风格可供选择。可以将这些作为灵感，但要设计出符合选定美学方向的作品。
  • 限制条件：技术要求（框架、性能、可访问性）。
  • 独特性：什么让这个界面令人难忘？人们会记住的一个点是什么？
关键：选择一个清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于目的性，而非强度。
然后实现可运行的代码（HTML/CSS/JS、React、Vue等），要求：
  • 达到生产级且功能完整
  • 视觉冲击力强且令人难忘
  • 风格统一，具有清晰的美学视角
  • 每一个细节都经过精心打磨

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.
重点关注：
  • 排版：选择美观、独特且有趣的字体。避免使用Arial、Inter等通用字体；转而选择能提升前端美学的独特字体；出人意料、富有个性的字体选择。将独特的标题字体与精致的正文字体搭配使用。
  • 色彩与主题：坚持统一的美学风格。使用CSS变量确保一致性。主色调搭配鲜明的强调色，比平淡、均匀分布的调色板效果更好。
  • 动效：使用动画实现特效和微交互。对于HTML优先选择纯CSS解决方案。如果可用，在React中使用Motion库。专注于高影响力的时刻：一次精心编排的页面加载动画（使用animation-delay实现分步显示）比零散的微交互更能带来愉悦感。使用滚动触发和出人意料的悬停状态。
  • 空间布局：出人意料的布局。不对称设计。元素重叠。对角线视觉流。打破网格的元素。充足的留白或可控的密度。
  • 背景与视觉细节：营造氛围和深度，而非默认使用纯色。添加符合整体美学风格的上下文特效和纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明度、戏剧性阴影、装饰性边框、自定义光标和颗粒叠加层。
切勿使用通用的AI生成美学风格，比如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、老套的配色方案（尤其是白色背景搭配紫色渐变）、可预测的布局和组件模式，以及缺乏特定上下文特色的模板化设计。
创造性地解读需求，做出符合上下文的出人意料的选择。每个设计都应独一无二。在亮色与暗色主题、不同字体、不同美学风格之间切换。切勿在多次生成中趋同于常见选择（例如Space Grotesk）。
重要提示：让实现复杂度与美学愿景相匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简主义或精致风格的设计需要克制、精准，并注重间距、排版和微妙细节。优雅源于对愿景的出色执行。
请记住：Claude能够完成非凡的创意工作。不要有所保留，展示当跳出思维定式并完全致力于独特愿景时所能创造的成果。