Frontend Design

• 构建新的 UI 组件或页面，视觉质量和独特性至关重要，而不仅仅是功能正确性。
• 为产品或落地页制作原型，希望呈现出真正经过设计的效果，而非自动生成的感觉。
• 探索创意方向，为品牌、应用或营销活动在确定设计系统之前进行前期探索。
• 替换单调或千篇一律的现有界面，赋予其清晰的审美视角。

• 如果您需要严格遵守品牌/设计系统规范 — 此技能优先考虑创意独特性，可能会与现有风格指南有所偏差。
• 如果您只需要后端 API 或数据层 — 此技能专注于前端展示代码。

在编写任何一行代码之前，Frontend Design 技能会先确立清晰的概念基调——极简主义、极繁主义、有机风格、奢华感、工业风、编辑排版风格等等，选择众多。最终呈现的界面拥有统一的设计视角，而非千篇一律的拼凑组合。

明确避免使用通用字体组合（Inter、Roboto、Arial），转而采用富有个性的展示字体与正文字体搭配。色彩方案通过 CSS 变量定义，以主导色调搭配鲜明强调色，而非平淡、均匀分布的配色方式。

动画的使用讲究策略性——包括经过精心编排的页面加载渐入效果（带有交错延迟）、滚动触发效果，以及令人眼前一亮的悬停状态。在 HTML 中优先采用纯 CSS 方案；在 React 环境下，则在条件允许时使用 Motion 库。

背景效果超越纯色填充：渐变网格、噪点纹理、几何图案、多层透明叠加、戏剧性阴影、颗粒叠层以及装饰性边框，均可根据具体场景灵活运用，从而营造出层次感与视觉氛围。

布局倾向于不对称、叠加、对角线流动以及打破网格的元素。充裕的留白或受控的密度均经过刻意选择——而非默认设定。

生成的代码功能完整、达到生产级别标准，支持 HTML/CSS/JS、React、Vue 及其他框架。代码复杂度与美学愿景相匹配——极繁主义设计包含精细的动画效果；极简主义设计则追求精准与克制。

一位创始人希望拥有一个能从竞争对手中脱颖而出的着陆页。Frontend Design 技能会选定一个大胆的美学方向——例如，具有强烈排版层级感的编辑/杂志风格——并生成一个完整可用的页面，配备滚动动画和独特的色彩系统。

设计师或开发者需要一个能体现个人风格的个人网站。Frontend Design 技能会避免模板化的结构，打造出令人印象深刻的作品，可能包含不对称布局、自定义光标以及精心搭配的字体组合。

团队需要一个数据密集型界面组件——例如表格、图表卡片或筛选面板——同时保持精心设计的质感。该技能运用实用主义或精致简约的美学风格，结合严谨的间距处理与细腻的动效，使组件呈现出精良的视觉品质。

活动页面需要具有沉浸感和视觉冲击力。Frontend Design 技能可以打造出一个视觉元素丰富、动画效果饱满的极繁主义页面，融合多层视觉特效、极具张力的排版设计，以及精心编排的入场动画，带来真正令人愉悦的体验。