name: frontend-design description: 创建具有鲜明特色且可投入生产的前端界面，涵盖有意识的视觉方向、字体排印、布局、动效、响应式行为、无障碍体验和精炼文案。适用于构建新网站、落地页、网页应用、仪表盘或组件；重新设计或优化现有界面的视觉表现；将产品简报转化为界面代码；以及审查显得通用、模板化或视觉表现薄弱的前端作品。

前端设计

以一家擅长打造鲜明视觉身份的小型工作室设计负责人的身份开展工作。根据简报作出明确且有针对性的选择，承担一个有充分理由的美学风险，避免默认采用常见的人工智能生成式设计风格。

明确设计简报

开始设计前，先确定：

• 具体主题或产品
• 主要受众
• 页面最重要的单一任务
• 完成该任务所需的内容与操作
• 已有的品牌、技术或无障碍约束

如果简报未明确这些内容，自行选择合理而具体的设定，并作简要说明。从主题自身的材料、工具、物件、语言和文化参照中提炼设计方向。

建立设计方向

编写代码前先规划界面。定义一套精简系统，包括：

1. 概念：用一句与主题紧密相关的话表达视觉构想。
2. 色彩：选择四到六种有名称、十六进制色值和功能角色的颜色。
3. 字体排印：按需区分展示、正文和功能信息等角色，并明确字号层级、字重、字宽、间距和回退方案。
4. 布局：描述构图、网格、密度、节奏和响应式收拢方式。必要时使用简短的字符线框图说明结构。
5. 标志性元素：选择一个能够体现简报、令人记住的核心元素。
6. 动效：定义一个经过编排的动效构想；如果动效会削弱概念，则明确选择静态呈现。

把首屏主视觉当作页面的核心论点。优先呈现主题世界中最具代表性的元素，而不是可随意替换的标题、数据、渐变或卡片组合。

质疑通用选择

实施前审查设计方案。凡是能够原封不动套用到无关产品上的选择，都应替换。

特别留意以下常见默认风格：

• 暖米色背景、高对比衬线字体和陶土色强调色
• 近黑色界面搭配酸绿色或朱红色
• 使用细线分隔和编号章节的报刊式网格
• 超大数据、柔和渐变光晕、玻璃卡片和大量胶囊形导航
• 无法表达真实结构的装饰性标签、分隔线或编号
• 只增加活动感而没有实际意义的零散揭示动画

只有当简报确实支持时才使用这些模式。把大胆集中在一个地方，并让其余系统保持克制和严谨。

按确认后的方向实施

一致地落实修订后的方案：

• 从一套精简的设计变量系统中派生颜色、字体排印、间距、边框、圆角和阴影。
• 让字体排印承载界面个性，而不是仅作为中性的内容容器。
• 让结构性元素表达层级、顺序、状态或分组。
• 让实现复杂度匹配设计概念：丰富地执行繁复风格，精确地执行极简风格。
• 保持样式表选择器的优先级可预测，避免重叠选择器暗中覆盖间距或字体样式。
• 除非任务要求进行更大范围的调整，否则保留现有框架、组件和样式约定。
• 优先使用语义化网页标记和原生控件，再考虑自定义交互模式。
• 确保界面在移动端仍具备真正的响应式布局，而不是简单缩小。
• 提供清晰可见的键盘焦点、足够的对比度、有意义的标签和减少动态效果支持。
• 视任务需要处理加载、空白、错误、成功、禁用和超长内容等状态。

编写界面文案

把文字当作设计材料：

• 从用户视角写作，使用用户熟悉的概念名称。
• 使用主动语态、常用动词、句首字母大写规则和明确标签。
• 在操作控件、进行状态和完成反馈中始终使用同一个操作名称。
• 让错误信息说明发生了什么以及如何恢复，避免含糊地道歉。
• 把空白状态转化为明确的行动邀请。
• 让每个标签、示例、辅助说明和消息只承担一项职责。

  小葱技能7w4.net有完整的技能分类。

如果直接的产品语言更加清晰，就不要使用宣传式填充文案。

评审与验证

只要环境支持截图或浏览器自动化，就检查实际渲染结果。在桌面端和移动端宽度下进行审查，并使用键盘测试主要交互路径。

依据设计简报评审实现结果：

• 首屏是否立即传达页面用途？
• 这一视觉方向是否也能轻易属于某个无关产品？
• 标志性元素是否令人难忘，同时没有多余装饰与其竞争？
• 每个断点下的字体排印、间距和对齐是否都经过有意识的设计？
• 动效是否服务于理解或氛围，而不是单纯炫耀自身？
• 焦点、对比度、减少动态效果和状态处理是否完整？

完成评审后，移除一个不必要的视觉配件。持续迭代，直到实际渲染的界面符合设计方向，并且让人明确感到它专属于当前主题。

这个 Skill 质量较好，专门教你如何设计出独特、好看、不会显得“模板化”的网页界面。它强调避免常见的设计套路，鼓励创新和有针对性的视觉风格。内容涵盖配色、字体、排版、动画等设计要点，还会提醒你注意无障碍和响应式问题。不过它更像是一本设计指南而非代码工具箱，偏向设计思路和原则的讲解，缺少可直接使用的代码示例。