frontend-design

frontend-design 技能是一款专为开发人员与设计师打造的专业工具，用于生成高质量、令人印象深刻的网页界面，从而绕过“人工智能风格”常见的局限。此技能不依赖 Inter 或 Roboto 等常见字体，也不会产生千篇一律的紫色渐层布局，而是鼓励采用大胆且具意图的设计方向，从粗犷主义 (Brutalism)、极繁主义 (Maximalism) 到精致的极简主义 (Minimalism) 或复古未来风格 (Retro-futuristic) 皆可运用。

此技能非常适合构建 React 组件、HTML/CSS 布局、完整的落地页面、仪表板以及互动式网页成品。在代码生成之前，它强制执行严格的“设计思考”流程，确保视觉产出符合项目的具体用途、目标受众与氛围目标。其核心关注点在于排版、创意空间组成、进阶动态设计，以及如噪点纹理与网格渐层等细致的背景处理。

• 能够在 React、Vue 及原生 HTML/CSS/JS 等主流框架中执行生产级、功能完备的代码。

• 强制执行“设计优先”的方法论，要求用户选择极端的美学方向（如编辑风、有机风、工业风、装饰艺术风），以避免产出通用乏味的界面。

• 重视高影响力的视觉细节，例如自订字体搭配、错位动画呈现与打破常规的网格布局。

• 提供实作 CSS 变量的准则，以确保复杂界面的一致性与可维护性。

• 运用进阶 CSS 技术营造深度与氛围，包括层次透明度、颗粒叠加与独特的阴影效果。

• 确保无障碍性与效能等技术限制被整合进创意设计流程中。

• 用户应提供具体情境，例如界面用途、品牌语调或技术限制，以获得最佳产出。

• 若为复杂界面，请注明所需的技术堆栈（例如 Tailwind、Framer Motion 或纯 CSS）。

• 当目标是打造独特的产品视觉识别，或构建看起来像是手工精心制作的专业级界面时，使用此技能效果最佳。

• 避免请求通用的 UI 模式；相反地，应明确指定情感或风格目标（例如“粗犷/原始”或“奢华/精致”），以触发最有效的设计回应。

• 由于此技能在优先考虑风格冲击力的同时亦注重技术功能，建议务必检查产出代码的浏览器兼容性与响应式设计逻辑。