name: frontend-design
description: "Aesthetic direction for designs outside an existing brand system"
user-invocable: true

Frontend design / 前端设计

Use this guidance when designing frontend/UI work that is NOT governed by an existing brand or design system. Create distinctive HTML with exceptional attention to aesthetic details and creative choices.

当所设计的前端/UI 工作不受既有品牌或设计体系约束时，使用本指南。创建风格鲜明的 HTML，对美学细节和创意选择投入超乎寻常的注意力。

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. Use these for inspiration but design one that is true to the aesthetic direction.
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

在编码之前，先理解背景，并确定一个大胆的美学方向：

• 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. Use these for inspiration but design one that is true to the aesthetic direction.
  • 基调：选定一个极端风格：极简主义、极繁主义的混乱感、复古未来主义、有机/自然、奢华/精致、趣味/玩具感、编辑/杂志风、粗野主义/原始感、装饰艺术/几何风、柔和/粉彩、工业/实用主义等。可以把这些当作灵感来源，但要设计出真正贴合所选美学方向的方案。
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
  • 差异化：是什么让这个设计令人过目不忘？别人会记住的那一点是什么？

Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

选择一个清晰的概念方向，并精准地执行。大胆的极繁主义与精炼的极简主义都可行——关键是意图明确，而不是强度堆叠。

Aesthetics Guidelines / 美学准则

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt for distinctive, characterful choices. Pair a distinctive display font with a refined body font.
  • 字体排印：选择美观、独特且有趣的字体。避免 Arial、Inter 等平庸字体；选用有辨识度、有性格的字体。将一款醒目的展示字体与一款精炼的正文字体搭配使用。
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
  • 颜色与主题：坚定贯彻统一的美学。使用 CSS 变量保持一致性。主色搭配锐利的强调色，优于畏手畏脚、平均分配的调色板。
• Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
  • 动效：使用动画实现效果和微交互。在 HTML 中优先采用纯 CSS 方案。聚焦于高影响力的时刻：一次编排良好的页面加载配合交错式渐显，比零散的微交互更能带来愉悦感。
• 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. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
  • 背景与视觉细节：营造氛围和纵深感，而不要默认使用纯色。渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰性边框、颗粒叠加。

Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on the same choices across generations.

在浅色与深色主题、不同字体、不同美学之间变换。绝不在多次生成中收敛到相同的选择。

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects. Minimalist designs need restraint, precision, and careful attention to spacing and subtle details.

使实现复杂度与美学愿景相匹配。极繁主义设计需要精致的动画和效果。极简主义设计则需要克制、精准，以及对间距和细微之处的仔细把控。