frontend-design

这项技能旨在指导你打造独具特色、达到生产级水准的前端界面，避免千篇一律的“AI 垃圾风”。编写真正可用的代码，并格外注重美学细节与创意选择。

用户会提供前端需求：要构建的组件、页面、应用或界面。他们也可能补充相关背景，例如用途、受众或技术限制。

设计思考

开始编写代码前，先理解背景，并选定一个大胆的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？
• 基调：选择一种鲜明风格：极简粗粝、繁复混沌、复古未来主义、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰艺术几何风、柔和粉彩风、工业实用风，等等。可供汲取灵感的风格数不胜数。以此为灵感，但最终设计应忠于所选美学方向。
• 限制条件：技术要求（框架、性能、无障碍性）。
• 差异化：如何让人过目难忘？人们会记住它的哪个特点？

至关重要：确立清晰的概念方向，并精准落实。大胆繁复或精致极简都可以，关键在于有意识地设计，而非单纯追求强烈的视觉效果。

接着编写可用的代码（HTML/CSS/JS、React、Vue 等），确保它：

• 达到生产级水准且功能完善
• 视觉鲜明、令人难忘
• 风格统一，有清晰的审美立场
• 每个细节都经过精心打磨

前端美学指南

重点关注：

• 字体排印：选择美观、独特、有趣的字体。避免使用 Arial 和 Inter 这类常见字体，改用独特、有个性的字体，提升前端美感。将醒目的展示字体与精致的正文字体搭配使用。
• 色彩与主题：坚持统一的审美风格。使用 CSS 变量保持一致性。与其采用温和、均匀分布的配色，不如选择主色鲜明、强调色锐利的方案。
• 动效：通过动画实现效果和微交互。对于 HTML，优先采用纯 CSS 方案；对于 React，在可用时使用 Motion 库。聚焦于影响力大的时刻：一次编排得当、带有交错显示效果（animation-delay）的页面加载，比零散的微交互更能带来惊喜。加入滚动触发效果和令人意外的悬停状态。
• 空间构图：尝试出人意料的布局、不对称、叠加、斜向动线、打破网格的元素。可以留出大块负空间，也可以采用经过控制的高密度布局。
• 背景与视觉细节：营造氛围与层次，不要默认使用纯色。添加符合整体美学的情境效果和纹理。尝试渐变网格、噪点纹理、几何图案、分层透明效果、醒目的阴影、装饰性边框、自定义光标和颗粒叠层等创意形式。

绝不要使用常见的 AI 生成式审美套路，例如过度使用的字体系列（Inter、Roboto、Arial、系统字体）、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局与组件模式，以及缺乏情境特色的千篇一律设计。

灵活发挥创意，做出出人意料、确实经过设计的选择。每个设计都应独一无二。尝试浅色和深色主题、不同字体和不同美学风格。绝不要在多次创作中反复采用常见选择（例如 Space Grotesk）。

重要：让实现的复杂度与美学构想相匹配。繁复设计需要复杂的代码、大量动画与视觉效果；极简或精致设计则需要克制、精准，并仔细打磨间距、字体排印和细微之处。优雅源于对构想的出色呈现。

请记住：Claude 能够创造非凡的作品。放开手脚，跳出框架思考，全力实现鲜明独特的构想，展现真正的创造力。

结构化输出：DESIGN.md

在构建流水线（website-rebuild、local-business-rebuild 或 azerbaijan-website-build）中调用此技能时，请在实现视觉效果的同时，将 DESIGN.md 文件作为结构化输出生成。

DESIGN.md 格式规范见 00-design-references/design-md-format.md。真实品牌网站（Stripe、Apple、Airbnb、Nike、Linear 等）的 DESIGN.md 参考文件位于 00-design-references/references/by-aesthetic/。

DESIGN.md 以结构化的 9 个部分（视觉主题、调色板、排版、组件样式、布局、深度/层级、注意事项、响应式设计、Agent 提示词指南）记录此技能做出的所有设计决策，供其他 Agent 或未来的会话使用，以构建在视觉上符合原始设计意图的页面。

有关如何逐步编写各个部分的说明，请使用 design-system-generator 技能。