技能说明
来自 PaulRBerg/agent-skills 的 frontend-design，适合网站、落地页、后台和组件重设计。它要求先读产品与现有设计系统，再确定主题、色彩、字体、布局、标志性元素和动效边界，最后在真实浏览器或截图中检查响应式、可访问性、溢出和交互状态。仓库采用 MIT 许可证；作者明确提醒这是带有个人偏好的工作流，安装前应按自己的技术栈和团队规范审阅。
关于此技能
把网页设计从泛泛的“现代、简洁”推进到有产品语境、有明确取舍、能在真实页面里验证的视觉方向。
核心能力
先读产品再定风格
先看页面目标、用户、现有组件和设计系统，再决定视觉语言，不凭空套模板。
形成一套视觉方向
统一定义主题、色彩、字体、间距、布局、标志性元素、文案和动效边界。
用渲染结果复核
检查桌面和窄屏的层级、溢出、对比度、焦点、状态和动效降级，发现问题后再修正。
适用场景
设计落地页和官网
让营销页从行业和品牌语境出发形成清晰、有记忆点的视觉方向。
重设计后台和产品界面
保留已有功能与组件体系，同时改善信息层级、密度、操作路径和视觉一致性。
审查 AI 生成的网页
用主题替换、层级、标志性元素和真实渲染检查，找出模板感和不适合产品的装饰。
使用步骤
- 01
读页面和产品上下文
确认用户、页面主要任务、内容层级、现有设计语言、视口、主题和无障碍要求。
- 02
写出一条设计方向
明确主题、系统、标志性元素、一次有理由的突破、动效和文案原则。
- 03
按现有体系实现
沿用项目已有组件、令牌、字体和依赖，把视觉方向落实到真正的工作界面。
- 04
渲染、检查、迭代
在代表性宽窄屏和关键状态下检查层级、素材、溢出、对比度、焦点和动效，修正后再交付。
常见问题
它会先做一堆设计方案让我挑吗？+
默认不会。它会先根据产品语境形成一条完整方向，只有用户明确要求比较方案时才输出多个方向。
能只做设计点评不改代码吗？+
可以。若用户只要求点评、审查或设计计划，应先报告方向和问题，不擅自改动文件。
它能保证页面一定好看吗？+
不能。它提供判断框架和验证清单，仍需结合品牌、内容、设备和真实用户目标复核。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/09
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
bunx skills add PaulRBerg/agent-skills