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流水线审美」。要实现可真实运行的代码，对美学细节和创意选择要格外关注。
用户会提供前端需求：需要构建的组件、页面、应用或界面，可能还会包含用途、受众或技术约束相关的背景信息。

Input Types & Workflows

输入类型与工作流

When User Provides Screenshot/Image/Design Reference

当用户提供截图/图片/设计参考时

MANDATORY workflow for screenshot/image/design inputs:
  1. Extract Design Guidelines using 
    ./references/design-extraction-overview.md
    :
    • Analyze screenshot/image with ai-multimodal skill
    • Extract: colors (hex codes), typography (fonts, sizes, weights), spacing scale, layout patterns, visual hierarchy
    • Document findings in project 
      docs/design-guidelines/extracted-design.md
    • See 
      ./references/extraction-prompts.md
      for comprehensive analysis prompts
  2. Implement Code following extracted guidelines:
    • Use exact colors from extraction (hex codes)
    • Match typography specifications (fonts, sizes, weights, line-heights)
    • Replicate layout structure and spacing system
    • Maintain visual hierarchy and component patterns
    • Preserve aesthetic direction and mood
  3. Verify Quality using 
    ./references/visual-analysis-overview.md
    :
    • Compare implementation to original screenshot
    • Check color accuracy, spacing consistency, typography matching
    • Ensure all design elements preserved
Important: Do NOT skip to implementation. Extract design guidelines FIRST, then code.
截图/图片/设计类输入的强制工作流：
  1. 提取设计规范 参考
    ./references/design-extraction-overview.md
    ：
    • 调用ai-multimodal技能分析截图/图片
    • 提取内容包括：颜色（十六进制码）、排版（字体、字号、字重）、间距尺度、布局模式、视觉层级
    • 将分析结果记录到项目的
      docs/design-guidelines/extracted-design.md
      文件中
    • 完整分析提示词可参考
      ./references/extraction-prompts.md
  2. 遵循提取的规范实现代码：
    • 使用提取到的精确颜色（十六进制码）
    • 匹配排版规范（字体、字号、字重、行高）
    • 复现布局结构和间距系统
    • 保留视觉层级和组件模式
    • 维持美学方向和整体氛围
  3. 质量校验 参考
    ./references/visual-analysis-overview.md
    ：
    • 将实现效果与原截图对比
    • 检查颜色准确性、间距一致性、排版匹配度
    • 确保所有设计元素都被保留
注意：不要直接跳到代码实现步骤，必须先提取设计规范，再编写代码。

When Building from Scratch (No Screenshot Provided)

从零开始构建（无提供截图）

Follow "Design Thinking" process below to create original design.
遵循下方的「设计思维」流程创作原创设计。

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 (Use 
    anime.js
    for animations: 
    ./references/animejs.md
    ). 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.
  • Visual Assets: Use 
    ai-multimodal
    skills to generate the assets and 
    media-processing
    skill to remove the background of generated assets if needed
重点关注以下维度：
  • 排版：选择美观、独特、有辨识度的字体。避免使用Arial、Inter这类通用字体，选择能提升前端美学质感的独特字体，打造出其不意、富有个性的字体选择。可以将有辨识度的展示字体与精致的正文字体搭配使用。
  • 颜色与主题：确定统一的美学风格，使用CSS变量保证风格一致性。主色搭配高饱和度点缀色的效果远好于平淡、分布均匀的调色板。
  • 动效：使用动画实现效果和微交互。HTML优先使用纯CSS方案，React项目可使用Motion库（动画实现用
    anime.js
    ，参考
    ./references/animejs.md
    ）。重点打造高记忆点的动效时刻：一次配合错落延迟（animation-delay）的精心设计的页面加载入场动画，带来的愉悦感远多于零散的微交互。可以使用滚动触发和出人意料的hover状态效果。
  • 空间构图：打破常规的布局，使用不对称、元素重叠、对角线流向、突破网格的元素、充足的留白或者可控的元素密度。
  • 背景与视觉细节：打造氛围和层次感，不要默认使用纯色背景。添加符合整体美学风格的上下文效果和纹理。可以使用渐变网格、噪点纹理、几何图案、分层透明度、戏剧化阴影、装饰性边框、自定义光标、颗粒感叠层等创意形式。
  • 视觉资源：使用
    ai-multimodal
    技能生成资源，必要时使用
    media-processing
    技能移除生成资源的背景。

Working with Visual Assets

视觉资源处理

Quick Start: 
./references/ai-multimodal-overview.md
快速入门：
./references/ai-multimodal-overview.md

Generating New Visual Assets

生成新的视觉资源

When you need to GENERATE new hero images, backgrounds, textures, or decorative elements that match the design aesthetic, use the 
ai-multimodal
skill. This ensures generated assets align with the design thinking and aesthetics guidelines rather than producing generic imagery.
当你需要生成符合设计美学的首图、背景、纹理或装饰元素时，使用
ai-multimodal
技能，这能保证生成的资源符合设计思路和美学规范，不会产出通用的素材。

Analyzing Provided Screenshots/Images/Designs

分析用户提供的截图/图片/设计稿

When user provides screenshots, photos, or design references to analyze or replicate, use 
./references/design-extraction-overview.md
to extract design guidelines BEFORE implementation. This is MANDATORY for screenshot inputs (see "Input Types & Workflows" above).
Workflows:
  • ./references/asset-generation.md
    - Generate design-aligned visual assets
  • ./references/visual-analysis-overview.md
    - Analyze and verify asset quality (modular)
  • ./references/design-extraction-overview.md
    - Extract guidelines from inspiration (modular)
  • ./references/technical-overview.md
    - Optimization and best practices (modular)
Each overview references detailed sub-modules for progressive disclosure.
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.
当用户提供截图、照片或设计参考需要分析或复刻时，在实现代码前参考
./references/design-extraction-overview.md
提取设计规范，这对截图类输入是强制要求（参考上方「输入类型与工作流」部分）。
工作流：
  • ./references/asset-generation.md
    - 生成符合设计的视觉资源
  • ./references/visual-analysis-overview.md
    - 分析与校验资源质量（模块化）
  • ./references/design-extraction-overview.md
    - 从参考素材提取规范（模块化）
  • ./references/technical-overview.md
    - 优化与最佳实践（模块化）
每个概览文档都引用了详细的子模块，可逐步查看详情。
绝对不要使用通用的AI生成审美，比如过度使用的字体（Inter、Roboto、Arial、系统字体）、陈腐的配色方案（尤其是白色背景配紫色渐变）、可预测的布局和组件模式，还有缺乏场景特色的模板化设计。
要进行创意性解读，做出符合场景的意料之外的选择，每个设计都应该独一无二。要在明暗主题、字体选择、美学风格上做差异化，永远不要在多次生成中趋同于常见选择（比如Space Grotesk字体）。
重要提示：实现复杂度要匹配美学愿景。极繁设计需要包含大量动画和效果的复杂代码，极简或精致风格的设计需要克制、精准，对间距、排版和细微细节格外关注。优雅来自于对愿景的优秀落地。
记住：Claude可以完成非常出色的创意工作，不要束缚思路，大胆展示跳出框架、完全投入独特设计愿景时能创造出的优秀作品。