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.

本Skill可指导打造独具特色、可投入生产的前端界面，规避千篇一律的‘AI通用风格’。在实现可正常运行的代码时，需格外注重美学细节与创意选择。

用户需提供前端需求：待开发的组件、页面、应用或界面。还可补充关于用途、受众或技术限制的上下文信息。

Input Types & Workflows

输入类型与工作流程

When User Provides Screenshot/Image/Design Reference

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

MANDATORY workflow for screenshot/image/design inputs:

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
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
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.

针对截图/图片/设计输入的强制工作流程：

提取设计规范：使用
```
./references/design-extraction-overview.md
```
:
- 借助ai-multimodal skill分析截图/图片
- 提取内容：颜色（hex codes）、排版（字体、字号、字重）、间距比例、布局模式、视觉层级
- 将分析结果记录在项目
```
docs/design-guidelines/extracted-design.md
```
  中
- 可参考
```
./references/extraction-prompts.md
```
  获取全面的分析提示词
遵循提取的规范实现代码：
- 使用提取得到的精确颜色（hex codes）
- 匹配排版规格（字体、字号、字重、行高）
- 复刻布局结构与间距系统
- 保持视觉层级与组件模式
- 保留原设计的美学方向与氛围
验证质量：使用
```
./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实现 staggered reveals）比零散的微交互更能带来愉悦感。使用滚动触发与出人意料的悬停状态。
空间布局：打破常规的布局。不对称设计。元素重叠。斜向视觉流。突破网格限制的元素。充足的留白或可控的信息密度。
背景与视觉细节：营造氛围与层次感，而非默认使用纯色背景。添加符合整体美学风格的上下文效果与纹理。运用创意形式，如渐变网格、噪点纹理、几何图案、分层透明效果、夸张阴影、装饰性边框、自定义光标与颗粒叠加层。
视觉资源：使用
```
ai-multimodal
```
skill生成资源，若需去除生成资源的背景，可使用
```
media-processing
```
skill

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

skill。这可确保生成的资源与设计思维及美学规范保持一致，而非生成通用化的图像。

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）。

重要提示：根据美学愿景匹配实现复杂度。极繁主义设计需要包含大量动画与特效的复杂代码。极简或精致风格的设计则需要克制、精准，并注重间距、排版与细节处理。优雅感源于对设计愿景的完美执行。