前端视觉设计

要解决什么问题

很多由大模型生成的 Web 界面会收敛到同一套「AI 味」：Inter/Roboto、紫渐变白底、对称栅格和可预测的卡片布局。产品明明有不同受众与品牌，却看起来像同一模板换色。本技能面向需要可投产、有记忆点的组件、页面或应用，把「先想清楚再写码」当成默认流程，而不是先堆组件再补文案。

技能如何工作

工作流分四步，核心是有明确美学意图，而不是单纯把视觉做「更炫」。

1. 设计思考：澄清目的、受众与技术约束；在极简、复古未来、编辑杂志、粗野主义等方向里选定基调，并定一个最让人记住的差异化点。
2. 落地代码：输出 HTML/CSS/JS 或 React/Vue 等可运行实现，要求风格统一、细节考究。
3. 审美要点：字体选有性格的展示字 + 精炼正文（刻意避开烂大街族）；配色用 CSS 变量、主色 + 锐利强调；动效优先 CSS，重视首屏错峰 reveal 与滚动触发；布局可破网格、重叠、非对称；背景用噪点、渐变网格、层叠透明等营造氛围。
4. 规避通用审美：每次方向不同，复杂度与愿景匹配（maximalist 多动效，minimalist 靠留白与克制）。

结构化产出为 DesignBuild：aesthetic、fonts、palette、motions、code_blocks，并附自然语言说明设计决策。可与 ui-styling、aesthetic、frontend-development 等下游技能衔接。

适用边界

• 适用：Web 组件、营销页、小型应用的前端视觉与实现一体产出。
• 不适用：纯后端逻辑；无障碍（WCAG）合规需另行核对，本技能不替代专项审计。
• 注意：动效与装饰要服务叙事，避免为「不像 AI」而堆砌无关花样。