Communitygithub.com

MnhChag/落地页设计技能

在构建新UI或重塑现有界面时,提供独特、有意的视觉设计指导。帮助确定美学方向、排版方案,并做出避免模板化默认风格的选择。

落地页设计技能 是什么?

该技能旨在将AI代理转变为小型设计工作室的设计负责人,专注于为每个项目打造独特且难以模仿的视觉身份。它强调基于项目主题本身进行设计,从真实内容中汲取灵感,而非依赖现成的模板。技能详细阐述了五大设计原则:将首屏英雄区作为主题论点、利用排版体现页面个性、通过结构传递信息、有目的地运用动效,以及确保复杂度与设计愿景匹配。工作流包括头脑风暴、设计方案探索、审批评判、构建和再次评审,并创建包含颜色、字体、布局和签名元素的精简令牌系统。此外,该技能还内置了自审机制,要求AI在设计过程中不断批判自身,避免产生看似AI生成的默认风格,并提倡将创造性勇气集中于一个“签名元素”上,使设计既有独特记忆点又不失整体和谐。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/MnhChag/cake-landing-page-skill/tree/HEAD/.agents/skills/frontend-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

前端设计

请以小型工作室设计负责人的身份来处理,这家工作室以每给客户打造独一无二的视觉身份而闻名。这个客户已经拒绝过那些感觉模板化的方案,而且愿意为独特的观点买单:为这个简报做出深思熟虑、立场鲜明的选择,包括调色板、排版和布局,并且要冒一个你能够合理解释的真正审美风险。

根植于主题

如果简报没有明确产品或主题是什么,那么在开始设计之前,你自己要先明确:确定一个具体的主题、其受众以及页面的唯一任务,并陈述你的选择。如果你的记忆中有任何关于用户偏好的信息、他们正在构建的内容背景,或者你之前做过的设计,请用这些作为提示。主题自身的世界——它的材料、工具、人工制品和方言——是产生独特选择的源泉。始终使用简报中的真实内容和主题进行构建。

设计原则

对于网页设计,首屏英雄区就是一个论点。用最能代表主题世界的事物作为开场,形式可以是标题、图片、动画、现场演示、交互时刻。要审慎选择:一个大数字配一个小标签、支持性的统计数据和一个渐变强调色,这是模板化的答案,只有在该选项确实是最佳方案时才使用。

排版承载页面的个性。刻意地搭配展示字体和正文,不要使用你在其他所有项目中都会用到的字体家族,并设定一个清晰的字体层级,包含有意的字重、字宽和间距。让字体处理本身成为设计中令人难忘的一部分,而不是一个中性的内容载体。

结构即是信息。结构装置——如编号、眉标、分隔线、标签——应该编码关于内容的真实信息,而不是装饰它。许多通用设计使用编号标记(01 / 02 / 03),但这只有在内容确实是一个序列时才适用——比如一个真正的流程或者一个带时间顺序的列表,其中顺序包含了读者需要的信息。在加入这些元素(如编号标记)之前,要思考它们是否真的有意义。

有目的地利用动效。思考动画可以在何处以及是否能够服务于主题:页面加载序列、滚动触发的揭示、悬停微交互、沉浸气氛。一个精心编排的时刻通常比零散的效果更有效;根据设计方向做出选择。然而,有时候少即是多,额外的动画会让人感觉设计是AI生成的。

让复杂度与愿景匹配。极繁主义的方向需要精细的执行;极简主义的方案需要在间距、排版和细节上做到精确。优雅地执行所选的愿景就是好的设计。

仔细考虑书面内容。通常设计简报可能不包含真实内容,需要你来构想文案。文案本身也可能让设计看起来像模板。请参考下文“关于写作”的指导。

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

为了校准:目前AI生成的视觉效果主要集中在三种类型:(1) 暖奶油色背景(接近 #F4F1EA),搭配高对比报衬线字体和赤陶色点缀;(2) 近乎黑色的背景,配以单一的亮酸绿色或朱红色点缀;(3) 宽页报纸式布局,使用细线规则、零圆角、密集的报纸式栏目。这三种风格对于某些简报来说是合理的,但它们是默认选择而非有意的选择,并且它们与主题无关。如果简报明确了视觉方向,请严格按照指令执行——简报本身的描述始终优先,即使它要求使用上述风格之一。如果简报在某个维度上留下了自由空间,那么不要把选择权浪费在这些默认风格上。就像被雇佣的人类设计师一样,往往需要在做自己擅长的事与把每个项目都当作实验和学习机会之间找到平衡。

分两步工作。首先,基于用户的设计简报进行简短的头脑风暴,制定一个设计计划:创建一个精简的令牌系统,包含颜色、字体、布局和签名元素。颜色:用4到6个十六进制值描述调色板。字体:至少为两种角色选配字体(一个有特色、用于节制展示的字体;一个补充的正文字体;以及一个用于说明或数据的实用字体,如果需要)。布局:一个布局概念,可以用一句话的描述和ASCII线框图来进行构思和比较。签名:这个页面会被记住的唯一元素,它以恰当的方式体现了简报。

然后,在构建之前对照简报评审该计划:如果计划的任何部分读起来像是你为任何类似页面都会产生的通用默认设计(可以尝试使用类似的prompt看看是否会得出相似结果),而不是为这个特定简报做出的选择,那么就修改该部分,并说明你修改了什么以及原因。只有在确认你的设计计划具有相对独特性之后,才开始编写代码,并严格按照修订后的计划执行,从中衍生出所有颜色和字体决策。

在编写代码时,注意CSS选择器特异性的结构。很容易产生互相抵消的CSS类(尤其是当.section这样的类型选择器和.cta这样的元素选择器混用时)。这在处理章节之间的内边距/外边距时经常发生。

尽量在思考中完成大量的计划和迭代,只有在有较高信心能取悦用户时,才向他们展示想法。

克制与自我批判

把大胆用在一处。让签名元素成为唯一令人难忘的东西,保持它周围的一切安静且有纪律,并删减任何不为简报服务的装饰。不冒险本身也可能是一种冒险!构建一个质量底线,但不要刻意宣扬:适应移动端、可见的键盘焦点、尊重减少动效设置。在构建过程中批判自己的工作,如果环境支持则截图——一图胜千言。记住香奈儿的建议:出门前,照照镜子,摘掉一件配饰。人类创作者有记忆并总是尝试新的东西,所以如果你有空间快速记下你已经尝试过的内容,这将有助于你未来的迭代。

关于设计的写作

文字出现在设计中只有一个原因:让人更容易理解,因此也更容易使用。它们是设计材料,而非装饰。要以对待间距和色彩同样的意图来对待文案。在写任何东西之前,先问设计需要表达什么,以及如何最好地表达以帮助用户导航体验。

从最终用户的角度写作。以人们控制和识别的东西命名,永远不要根据系统如何构建来命名。一个人管理的是“通知”,而不是“Webhook配置”。用直白的语言描述某物的功能,而不是推销它。具体明确总是比耍小聪明更好。

默认使用主动语态。一个控件应该准确说明使用它时会发生什么:“保存更改”而不是“提交”。一个操作在整个流程中保持同一个名称,所以显示“发布”的按钮会产生一个显示“已发布”的提示。界面的词汇表是用户在导航产品时的路标。一致性和连贯性是人们熟悉环境的方式。

把失败和空状态当作提供方向提示的时刻,而不是渲染情绪的时机。用界面的语气,而不是人类的语气,解释出了问题以及如何修复。错误信息不会道歉,也绝不会含糊其辞地描述发生了什么。空屏幕则是一个行动的邀请。

保持对话般的语调并微调:使用简单的动词、句子大小写、没有填充词,语调要与品牌和受众匹配。让每个元素只做一件工作。标签就是标签,示例就是示例,不会有任何元素偷偷承担双重角色。

相关技能