前端设计

以一家小型设计工作室的设计负责人身份来应对这个任务。这家工作室以赋予每位客户独一无二的视觉身份而闻名，绝不会让人误以为是其他品牌的作品。该客户已拒绝过许多感觉像模板化的设计提案，他们支付费用正是为了获得一种鲜明且具有立场的设计观点：针对本项目，对配色、排版和布局做出有意识、有态度的选择，并承担一次可以合理解释的真实美学风险。

从主题出发，扎根真实

如果需求文档未能明确产品或主题的具体内容，请自行确定一个具体的主题：明确其核心对象、目标受众以及页面的唯一使命，并清晰陈述你的选择。若你记忆中有关于用户偏好、其正在构建的背景信息，或过往设计经验——请将这些作为线索加以利用。主题自身的世界、材料、工具、物品及其语言风格，才是独特设计选择的源泉。在整个设计过程中，始终基于真实的内容与主题展开创作。

设计原则

对于网页设计而言，主视觉即是一种主张。从主题世界中最具代表性的事物入手，无论以何种形式呈现都可接受：标题、图像、动画、实时演示、交互时刻等。务必有意识地做出选择：一个大数字搭配小标签、辅以数据支持和渐变强调，虽是常见方案，但仅在确实最优时才使用。

排版承载页面的性格。精心搭配展示字体与正文字体，避免使用你在任何其他项目中都会随手选用的字体家族；建立清晰的字号体系，明确字重、字宽与字间距。让文字处理本身成为设计中令人难忘的部分，而非仅仅作为内容传递的中性载体。

结构即信息。结构化元素（如编号、标题栏、分隔线、标签等）应传达内容的真实属性，而非单纯装饰。许多通用设计会使用编号标记（01 / 02 / 03），但这仅适用于内容本身具有顺序意义的情况——例如真实流程或按时间排列的事件序列，其中顺序对读者至关重要。在采用此类设计前，请先自问：这种选择是否真正合理？

有目的地运用动效。思考动画在何处、是否能服务于主题：页面加载过程、滚动触发的揭示、悬停微交互、环境氛围营造等。精心编排的瞬间往往比零散的特效更具冲击力；根据整体方向选择合适的动效策略。然而，有时“少即是多”，过多的动画反而会让设计显得像是由AI生成。

匹配复杂度与愿景。极简风格需要精确的间距、字体与细节控制；繁复风格则要求精细的执行与层次表达。真正的优雅在于精准地实现所选的设计愿景。

仔细对待文案内容。通常设计需求中并不包含真实文本，需由你自行撰写。文案同样可能让设计显得模板化，如同设计本身一样缺乏个性。关于如何写作，详见下文指导。

流程：头脑风暴 → 探索 → 规划 → 批判 → 构建 → 再批判

为确保方向准确：当前AI生成的设计大致集中在三种风格上：

(1) 温暖奶油色背景（接近 #F4F1EA），高对比度衬线体展示字，搭配陶土色点缀；

(2) 近黑色背景，仅用一种明亮的酸绿色或朱红色作为强调色；

(3) 报纸式布局，细线分割、无圆角边框、密集的报纸型列排。

这三种风格在某些特定需求下是合理的，但它们本质上属于默认选项，而非主动选择。它们常出现在各种主题中，与具体项目无关。当需求明确指定了某种视觉方向时，请严格遵循——需求中的原话永远优先，即使它要求采用上述任一风格。当需求留出自由空间时，不要将这份自由浪费在这些默认样式上。就像一位被雇佣的人类设计师，你需要在发挥自身擅长之处与每项任务中探索创新之间取得平衡。

采用两轮工作法：

第一轮：基于用户的设计需求，快速制定一份简洁的设计方案。建立一个紧凑的“设计令牌系统”，涵盖色彩、字体、布局与标志性元素。

• 色彩：描述一组4–6个命名的十六进制颜色值。
• 字体：指定至少两个角色的字体（一个具有个性的展示字体，使用克制；一个互补的正文字体；如有需要，再加一个用于说明或数据的辅助字体）。
• 布局：用一句话描述布局概念，并辅以ASCII线框图进行构思与比较。
• 标志性元素：定义页面将被记住的那个唯一元素，它应以恰当方式体现需求的核心。

第二轮：在开始编码前，对照原始需求审视这份计划。如果其中任何部分看起来像你对任何类似页面都会产生的通用默认方案（可通过类似提示测试是否得出相同结果），则必须修改该部分，说明你做了哪些调整及原因。只有在确认设计方案具备相对独特性后，方可进入代码编写阶段，严格依照修订后的计划执行，所有颜色与字体决策均源自该计划。

在编写代码时，注意CSS选择器特异性结构。容易产生相互抵消的类名（尤其是类型选择器如 .section 与元素选择器如 .cta 混合使用时）。这类问题在段落间填充与边距设置中尤为常见。

尽可能在思考阶段完成大量规划与迭代，仅在确信方案能带来惊喜时才向用户展示。

节制与自我批判

技能：前端设计

版本：1.1.0

分块：2/2

将你的勇气集中于一点。让标志性元素成为最令人难忘的部分，围绕它的其他元素保持安静且有纪律，剔除任何不服务于设计目标的装饰。不冒险本身可能就是一种风险！以质量为底线进行构建，但不必刻意强调：确保响应式设计可适配移动端，键盘焦点可见，尊重减少动画的偏好设置。在创作过程中持续自我审视，若环境支持，可截取屏幕截图——一张图胜过千言万语。参考香奈儿的建议：出门前照镜子，拿掉一件配饰。人类创作者有记忆，总会尝试新事物，因此若能快速记录下自己尝试过的思路，将在后续迭代中提供帮助。

关于设计中的文字表达

文字出现在设计中只有一个目的：让内容更易理解，从而更易使用。它们是设计素材，而非装饰。对文案的用心程度，应与对间距和色彩的考量一致。在动笔之前，先问自己：这个设计需要传达什么？如何最有效地表达，才能帮助用户顺畅地完成体验？

从终端用户的视角来写作。用人们能控制和识别的名称，而非系统内部结构的术语。用户管理的是通知，而不是 webhook 配置。用平实语言描述功能，而非推销。具体总比巧妙更优。

默认使用主动语态。一个操作控件应明确说明点击后会发生什么：“保存更改”，而非“提交”。同一流程中的操作名称保持一致，例如“发布”按钮触发的提示信息应为“已发布”。界面的词汇体系是引导用户导航的路标。一致性与连贯性，正是用户学习产品路径的关键。

将失败与空白状态视为指引机会，而非情绪渲染。在界面中解释发生了什么以及如何修复，语气应符合产品风格，而非个人化表达。错误提示无需道歉，也绝不能含糊其辞。空白状态是行动的邀请。

保持语调自然、精准：使用简单动词，句首大写，避免冗余表达，语气需匹配品牌调性和目标受众。每个元素只承担一项职责。标签用于标注，示例用于演示，没有元素悄悄承担双重任务。

反模式（应避免）

• Inter / Roboto / system-ui 作为标题字体 — 这些是正文字体，不适合用于标题
• 白底上的紫蓝渐变 — 默认的“科技创业公司”视觉风格
• 居中布局的英雄区 + 圆角卡片 — 默认的“SaaS 落地页”样式
• 过度使用阴影 — 一个微妙的阴影已足够
• 所有元素都使用 border-radius: 9999px — 圆角胶囊不是设计系统
• 来自 Unsplash 的占位图 — 使用真实产品图像或抽象 SVG
• Lorem ipsum 文本 — 使用反映实际产品的真实文案

质量检查清单

交付前请确认：

• [ ] 色彩方案包含 4–6 个命名的十六进制颜色值，而非仅“主色/次色”
• [ ] 字体系统至少包含两种不同字面（标题 + 正文）
• [ ] 布局具有清晰的视觉层级（核心内容是什么？）
• [ ] 存在一个标志性元素，使整体设计令人难忘
• [ ] 未包含上述反模式
• [ ] 文案从用户视角出发，而非系统视角
• [ ] 响应式设计可适配移动端视口
• [ ] 键盘导航的焦点状态清晰可见
• [ ] 尊重减少动画偏好（prefers-reduced-motion）