前端设计视觉表达

要解决的问题

• 前端页面设计容易落入模板：暖奶油背景、黑底亮绿或朱红强调、宽幅报纸式列布局，往往与具体业务和主题无关。
• 文案、配色、排版常被当作内容填充，而不是设计材料。
• 生成式页面可能“看起来完整”，但缺少可解释的审美判断、主题来源和实现约束。

技能如何工作

该技能要求模型以小型工作室设计负责人的角色处理设计简报，而不是直接输出通用页面。核心流程包括：

• 确定主题：若简报未明确产品、受众或页面任务，先命名具体主题、受众和单一任务，并说明选择依据。
• 建立设计令牌：用 4-6 个具名十六进制颜色、2 个以上角色字体、布局概念和 ASCII 线框图形成紧凑方案。
• 反默认审查：在构建前检查方案是否像任何类似页面都会出现的通用默认，尤其避免未经验证地使用 #F4F1EA 暖色、黑底酸绿/朱红、宽幅报纸风格等外观。
• 约束代码实现：强调 CSS 选择器结构，避免 .section、.cta 等类相互抵消；保留移动端、可见键盘焦点和 prefers-reduced-motion 支持。
• 文案作为设计材料：标签、提示、错误与空状态使用用户可见名称、主动语态和一致动作词，例如“保存更改”而非抽象提交。

适用边界

适合需要视觉判断、主题表达和落地约束的网页或落地页设计任务。若设计简报已明确要求某种风格，应优先执行简报；若只是缺少文案或真实内容，该技能也会要求补足说明性文案，而不是用营销话术填充。