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实现渐显效果）比零散的微交互更能带来愉悦感。使用滚动触发与出人意料的悬停状态。
  • 空间布局：打破常规的布局。不对称设计、元素重叠、斜向流动、突破网格的元素。充足的留白或可控的密度。
  • 背景与视觉细节：营造氛围与深度，而非默认使用纯色。添加符合整体美学风格的背景效果与纹理。运用创意形式，比如渐变网格、噪点纹理、几何图案、分层透明效果、夸张阴影、装饰性边框、自定义光标与颗粒叠加层。
  • 视觉资源：使用
    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具备非凡的创意能力。不要有所保留，展示跳出思维定式、全力投入独特愿景时所能创造的成果。

IMPORTANT Task Planning Notes

重要的任务规划提示

  • Always plan and break many small todo tasks
  • Always add a final review todo task to review the works done at the end to find any fix or enhancement needed
  • 始终将任务拆解为多个小的待办事项
  • 始终添加一个最终审核的待办事项，在最后审查已完成的工作，找出需要修复或优化的地方