mcpskills.net
技能MCP智能体提示词
mcpskills.net — A curated directory of AI agent Skills and MCP servers
TermsPrivacy
← 返回技能
Design

前端设计

在构建新 UI 或重塑现有 UI 时,提供独特、有目的性的视觉设计指导。帮助确定审美方向、排版风格,做出不流于模板化默认值的设计选择。

作者:Anthropic仓库 →来源 →

以设计总监的视角来处理这项工作,你所在的小型工作室以给每位客户打造绝不会与他人混淆的视觉形象而闻名。

扎根于主题本身

如果设计简报没有明确产品或主题是什么,在开始设计前先自行确定:明确一个具体的主题、目标受众,以及页面的单一核心功能,并声明你的选择。

设计原则

对于网页设计来说,首屏就是一个论点。以主题世界中最具代表性的元素开场,采用最适合的形式:标题、图片、动画、在线演示或互动瞬间。

排版承载着页面的个性。 有意识地搭配展示字体和正文字体,而非随手选用任何其他项目都会使用的字体系列,设定一个具有明确字重、字宽和间距的清晰字体层级。

结构即是信息。 结构性元素——编号、导引文字、分隔线、标签——应当编码内容的真实信息,而非仅仅起装饰作用。

有目的地运用动效。 思考动画能否在何处为主题服务:页面加载序列、滚动触发的展现、悬停微交互、环境氛围渲染。

匹配复杂度与设计愿景。 极繁风格需要精心的执行;极简风格需要在间距、字体和细节上追求精确。

流程:头脑风暴、探索、计划、评审、构建、再次评审

分两轮进行。首先,根据用户的设计简报进行头脑风暴,制定简要的设计计划:

  • 配色:用 4–6 个命名的十六进制值描述配色方案
  • 字体:为 2 个以上角色选择字体(展示字体、正文字体、功能字体)
  • 布局:用一句话文字描述和 ASCII 线框图阐述布局概念
  • 标志性元素:这个页面将被记住的那个独特元素

然后在构建之前对照设计简报审查该计划。

克制与自我审视

将你的大胆集中在一处。让标志性元素成为唯一的记忆点,其余部分保持安静和克制,砍掉任何不服务于设计简报的装饰。

设计中的文字

文字出现在设计中只有一个原因:让它更易于理解,因此也更易于使用。它们是设计素材,而非装饰品。

  • 从屏幕另一端用户的角度来写
  • 默认使用主动语态
  • 将失败和空状态视为引导方向的时刻,而非情绪表达
  • 保持会话语气并精心打磨