frontend-design

此技能旨在协助您生成精致、可投入生产环境的前端代码，同时刻意避免常见的 AI 生成美学。它专为需要构建视觉冲击力强的网页组件、登录页面、仪表板和完整界面的开发人员、设计师和创作者所设计。通过专注于具意图的设计选择，该技能确保每一个输出——无论是 React 组件、HTML/CSS 布局，还是复杂的 UI 仪表板——都感觉像是经过精心打造、修饰且与场景高度契合。

• 进阶 UI/UX 实现：使用 React、Vue、HTML 与 CSS 等现代框架生成代码，并优先考虑性能、无障碍设计与干净的架构。

• 精选美学导向：跳脱预设系统字体与常见的 UI 模式，提供订制字体建议、独特的配色方案与空间构成。

• 精致的动态设计：运用 CSS 动画与动态库来建立具备高影响力的微互动、交错显示与平滑过渡，提升用户参与度。

• 多维视觉深度：采用复杂的样式技术，包含渐变网格、噪点纹理、层叠透明度与几何图案，以营造氛围感而非平面设计。

• 具意图的风格多样性：提供广泛的美学色调，如粗野主义、复古未来主义、有机风、极繁主义或精致极简主义，以符合特定的项目需求。

• 输入要求：提供有关界面目的、目标受众的清晰背景，以及任何如框架或性能目标等技术限制。

• 工作流方式：该技能在编码前会先进行「设计思考」以确立概念方向，确保视觉产出不仅功能完善且令人印象深刻。

• 最佳实践：优先使用 CSS 变量进行主题设定，使用语义化 HTML 确保无障碍性，并建立连贯的设计语言，避免滥用如紫色渐变或通用间距等 AI 常用手法。

• 客制化：预期在字体选择与布局上的多样变化；建议用户定义「美学方向」，以利模型针对品牌或项目需求进行精确调整。

• 技术限制：虽然技能可创建视觉突出的代码，但请确保提供具体的框架需求（如 Tailwind CSS、Framer Motion）以引导实现细节。