前端设计 是做什么的？
请以小型工作室设计负责人的角色来处理，这家工作室以能为每位客户提供独一无二的视觉形象而闻名。客户已经拒绝了那些感觉模板化的方案，并为独特的观点付费：对于配色、排版和布局，做出深思熟虑、有主见的选择，并承担一个你可以证明其合理性的、真正的美学风险。
设计智能
在编写任何代码或敲定设计方案之前，先获取数据驱动的起点：
python3 ui-ux-pro-max/scripts/search.py "<产品类型> <行业> <关键词>" --design-system
这将返回一个完整的设计系统推荐——风格、配色、排版以及应避免的反模式——基于产品类型和目标受众。用它来为以下构思过程的关键系统提供种子。如果简报已经指明了方向，则用它来验证而非替代该方向。
如果品牌已存在，请先注入品牌背景：
node brand/scripts/inject-brand-context.cjs
设计方案完成并获得批准后，将实现工作移交给 ui-styling 技能，用于使用 shadcn/ui + Tailwind 进行组件设置。
植根于主题
如果简报没有明确产品或其主题，请先自行确定：命名一个具体主题、其受众、以及页面的单一任务，并说明你的选择。如果在你的记忆中，有任何关于用户偏好的信息、关于他们正在构建的内容的背景、或你之前做过的设计——请将其作为提示。主题本身的世界、其材料、工具、工艺品和特定语境，才是独特设计的来源。在构建过程中，始终使用简报中的真实内容和主题。
设计原则
对于网页设计，主视觉区就是论点陈述。以主题世界中最具特色的内容作为开场，采用对其有意义的形式：标题、图片、动画、实时演示、交互时刻。务必深思熟虑：一个带有小标签的大数字、支撑性统计数据以及渐变强调色是模板化的答案，只有当这确实是最好选择时才使用。
排版承载着页面的个性。精心搭配展示字体和正文字体，不要轻易使用你在前一个项目中会使用的同一字体家族，并设置一个清晰的字体层级，包括有意的字重、字宽和间距。让字体处理本身成为设计中令人难忘的部分，而不仅仅是内容的载体。
结构即是信息。结构化的设计元素，如编号、眼眉、分隔线和标签，应编码一些关于内容的真实信息，而不是装饰它们。许多通用设计会使用编号标记（01 / 02 / 03），但这只有当内容实际上是序列时才合适——比如一个真实的过程或带时间线的列表，其中顺序携带了读者需要的信息。在采纳之前，质疑像编号标记这样的选择是否真正合理。
有意识地利用动效。思考动画是否以及如何服务于主题：页面加载序列、滚动触发的揭示、悬停微交互、环境氛围。一个精心编排的瞬间通常比零散的效果更有冲击力；选择方向所需的即可。然而，有时少即是多，额外的动画会让人感觉设计是 AI 生成的。
使复杂度与愿景相匹配。极繁主义的方向需要精细的执行；极简的方向需要在间距、字体和细节上精确。优雅在于出色地执行所选愿景。
仔细考虑文案内容。通常，设计简报可能不包含真实内容，需要你来构思文案。文案本身也可能让设计感觉像模板一样。有关更多指导，请参见下面的写作段落。
流程：构思、探索、规划、批评、构建、再次批评
为了校准：目前 AI 生成的设计集中在三种风格上：(1) 暖奶油色背景（接近 #F4F1EA），搭配高对比度衬线展示字体和赤陶色强调色；(2) 近乎黑色的背景，搭配单一亮酸绿色或朱红色强调色；(3) 宽版报纸式布局，搭配细线边框、零边框半径和密集的类似报纸的列。这三种风格对于某些简报来说是合法的，但它们是默认设定而非真正选择，并且无论主题如何都会出现。当简报明确了视觉方向时，请完全遵循它——简报本身的话语始终优先，包括当它要求其中一种风格时。当它留下自由发挥的轴线时，不要将这种自由度浪费在这些默认选项上。就像受雇的人类设计师一样，常常需要在做自己擅长的事情和将每个项目作为实验和学习机会之间取得谨慎的平衡。
分两步进行。首先，基于用户的设计简报构思一个简短的设计方案：创建一个紧凑的关键系统，包含颜色、字体、布局和标志性元素。颜色：用 4-6 个命名的十六进制值描述调色板。字体：为 2+ 个角色指定字体（一个富有特色且谨慎使用的展示字体、一个互补的正文字体，以及一个用于标题或数据的工具字体，如果需要）。布局：一个布局概念，使用一句式的文字描述和 ASCII 线框图来进行构思和比较。标志性元素：页面将通过它被记住的单一独特元素，它以恰当的方式体现简报。
然后，在构建之前对照简报审查该方案：如果方案中的任何部分看起来像是你为任何类似页面都会生成的通用默认设定（通过类似提示运行，查看是否得出类似结果），而不是为此特定简报做出的选择——请修改该部分，说明你更改了什么以及原因。只有在你确认了设计方案相对独特之后，才能开始编写代码，并严格遵循修订后的方案，从中衍生出每个颜色和字体决策。
在编写代码时，注意构建 CSS 选择器优先级。很容易生成相互抵消的 CSS 类（尤其是在使用基于类型的 .section 选择器和基于元素的 .cta 选择器时）。这在段落之间的 padding/margin 上经常发生。
尽量在你的思考中完成大量这类规划和迭代，只有在你有较高信心能取悦用户时，才向他们展示想法。
克制与自我批评
把你的大胆用在一个地方。让标志性元素成为唯一令人难忘的事物，周围的一切保持安静且有纪律，删去任何不为简报服务的装饰。不承担风险本身可能就是风险！在未明说的前提下，构建出质量合格的作品：响应式设计向下兼容至移动端，关注键盘焦点可见，尊重减少动效设置。在构建过程中批评自己的作品，如果你的环境支持，截取屏幕截图——一图胜千言。考虑香奈儿的建议：出门前，照镜子并取下一样配饰。人类创作者有记忆，并且总是尝试新事物，因此如果你有空间快速记下你尝试过的笔记，它可以帮助你在未来的迭代中做得更好。
关于设计中的文案
设计中出现的文字只有一个原因：使内容更容易理解，从而更容易使用。它们是设计材料，而不是装饰。在文案中投入与间距和颜色相同程度的意匠。在写任何东西之前，先问设计需要传达什么，以及如何最好地传达，以帮助用户浏览体验。
从屏幕用户的视角写作。用人们能控制和识别的术语命名事物，而永远不要按系统的构建方式命名。用户管理的是“通知”，而不是“Webhook 配置”。用直白的语言描述某物的功能，而不是推销它。具体永远比聪明更好。
默认使用主动语态。控件应准确说明它被使用时会发生什么："保存更改"，而不是"提交"。在整个流程中，一个操作应保持相同的名称，因此定义为"发布"的按钮会产生一条显示为"已发布"的提示。界面的词汇表就是用户浏览产品的路标。连贯性和一致性是用户学习导航的方式。
将失败和空白状态视为指导时机，而非情绪表达。解释发生了什么问题以及如何修复，使用界面的语气而非人的语气。错误不会道歉，也绝不会对发生了什么含糊其辞。空白屏幕是行动的邀请。
保持语调对话化和有针对性：使用简单的动词、句首大写、无填充词，语气与品牌和受众相匹配。让每个元素只完成一项工作。标签就只是标签，示例就只是示例，没有任何元素默默地承担双重职责。
相关技能
- ui-ux-pro-max：设计系统生成、调色板、字体推荐、UX 指南和样式搜索
- ui-styling：使用 shadcn/ui 和 Tailwind CSS 实现组件——将设计计划转化为代码
- brand：品牌背景注入、视觉识别标准、颜色提取和资产验证
- web-design-guidelines：构建后的 UI 代码审计，检查可访问性、UX 和最佳实践合规性