Frontend Design：让页面更易用也更协调

这个 Skill 能做什么

Frontend Design 为新界面或界面改造提供设计方向。使用时应给出用户任务、内容、品牌与技术约束，让设计决定服务于具体产品，而不是套用一套通用模板。

适合哪些场景

• 新页面开发前，梳理内容优先级与交互路径
• 改进移动端布局、表单反馈与阅读体验
• 在现有组件体系中优化间距、排版与状态表达

使用前准备

准备可用于练习的项目或材料，说明任务目标、现有约束和预期结果；在支持相应技能及工具的 Agent 环境中使用。具体依赖和版本以实际交付文件为准。

建议使用流程

1. 明确页面服务的人群、核心任务和真实内容。
2. 提供现有页面、设计规范与组件库作为约束。
3. 先确定信息结构和布局，再实现主要交互及各种状态。
4. 在桌面与手机尺寸下复核可读性、键盘操作与错误提示。

任务描述示例

下面是练习提示，可根据你的项目补充上下文，不是实际运行结果。

请优化测试报告页面。
使用现有 Vue 组件库，保留品牌色与导航结构。
重点突出失败用例、风险等级和复现入口。
补齐加载、空数据、错误及手机布局。
请说明每项调整如何帮助测试人员更快定位问题。

你可以获得什么

页面结构建议、可运行的界面实现与需要复核的交互状态。测试验收应关注信息是否清晰、任务是否可完成，以及小屏幕和键盘操作是否顺畅。

使用边界与人工复核

已有后台系统优先遵循组件库与团队约定。视觉设计不能代替可用性测试，还需要检查对比度、焦点、内容溢出和真实数据下的布局。

如何获取

点击页面的“获取 Skills”，扫码添加销售微信，发送技能名称“frontend-design”，由销售协助领取。资料版本、依赖及授权说明以实际交付为准。

本文由柠檬班根据公开项目资料与教学场景整理，保留原始项目来源；不代表原作者背书。使用及再分发应遵守原项目许可。