wild-frontend

Wild Frontend

围绕鲜明的视觉概念，构建可用的前端代码。这项技能优先追求原创性和令人难忘的效果，而非模仿现有产品风格。

对于多步骤工作，先简短说明当前检查的概念或界面部分。

目标

选择一个能引导字体、色彩、布局、质感和动效的概念。在让主要任务易于理解和完成的同时，打造令人难忘的效果。

创意方向

将用户要求的方向和参考内容视为约束，并在需求留有发挥空间时做出有意的创意选择。开始实现前，确定一个简洁明确的方向：

• 用途：界面的功能
• 概念：核心创意
• 基调：粗犷、奢华、活泼、电影感、工业风、编辑风、有机、超现实、复古、仪式感，或其他鲜明风格
• 参考：为设计提供灵感的视觉来源、材质或场景
• 标志性细节：人们会记住的元素
• 交互风格：界面如何移动、响应或呈现内容

仅在需要更多概念示例或设计手法时，才使用 references/creative-moves.md。

工艺标准

针对特定的视觉效果，运用非常规构图、不对称、重叠和富有表现力的字体。像检查常规布局一样，认真检查它们的对齐、间距和可读性。

• 添加效果前先构建构图。明确视觉焦点、阅读顺序、视觉锚点、平衡、张力，以及视线在页面上的移动路径。
• 将负空间视为一种形状和节奏工具，而非摆放元素后剩下的区域。调整边距、间隔、密度变化和空白区域，让它们形成节奏并强化概念。
• 有意识地运用经久不衰的平面设计原则：层级、对齐、邻近、重复、对比、比例、平衡、节奏和图底关系。打破惯例应产生明确的视觉或功能效果。
• 将字体同时视为语言和形式。精心调整行长、行距、字距、换行、基线关系和视觉对齐；不要让醒目的字体变得粗疏随意。

约束

• 确保主要操作清晰明确。
• 确保重要文本易于阅读。
• 让布局适配常见视口尺寸，并确保可通过键盘操作交互控件。
• 在适用时提供可用的加载、空内容和错误状态。
• 为核心内容提供易于辨识的焦点样式和合理的对比度。
• 尊重减少动态效果的偏好。减少或替换非必要动效，同时保留内容、控件和易于理解的状态变化。
• 不要让装饰效果妨碍可用性。

质疑诸如居中卡片、千篇一律的首屏、大胆不足的配色、白底紫色／蓝色渐变或缺乏概念联系的通用字体等惯常选择。这些并非审美禁忌：即使用户要求的方向采用了熟悉的处理方式，也应遵循。运用创意自由来完善需求，而不是取而代之；删去削弱设计效果的装饰或冲突想法。

实现风格

使用用户要求的技术栈。只要服务于概念，就可以使用一次性组件、自定义 CSS、非常规布局、装饰层和自定义交互。代码应保持易于理解和修改。

最终验证

使用有代表性的内容渲染实际成品。在常见视口尺寸下检查整体构图和细节：视觉焦点顺序、对齐基准、留白、区块节奏、文本换行、视觉平衡、边缘处理和交互状态。响应式布局应经过有意的重新编排，而不只是缩小或堆叠。

使用键盘操作界面，并确认焦点始终可见且控件正常工作。测试实际可能出现的加载、空状态和错误状态。

对于动画作品，检查预期动效和减少动态效果时的替代方案。确认重要内容和控件仍然可用，且状态变化依然合理。

构建或类型检查无法证明视觉质量。每次优化前，先明确要解决的可见差异或尚未满足的要求，然后检查修改后的效果。只要概念在实现、可读性、交互或响应性方面仍存在实质性问题，就继续优化。如果无法渲染成品，请说明这一缺口以及接下来最合适的检查方式。

输出

先展示完成的成果，然后说明设计概念、标志性设计手法、修改的文件以及已执行的验证。

停止规则

当成品满足要求、实质性的可见问题已解决，并且相关视口、交互和动效检查均已完成或明确说明其局限时，即可停止。不要仅仅因为还可以尝试其他风格，就继续重新设计已满足这些条件的成果。