做前端前,先定下独特视觉方向

提供独特的视觉设计方向和美观建议。

frontend-design 适合新建页面或重塑现有界面时,避免做出一眼模板化的“AI 页面”。开始前先确认产品主题、受众和页面要完成的主要任务;如果 brief 没说清楚,先提出一个具体的主题和设计方向让客户确认。

先写一页设计计划:4–6 个颜色、字体角色、布局草图和让页面独特的原则,再检查它有没有落回常见的奶油背景、酸绿色、报纸栏、SaaS 卡片或无意义标签。英雄区应从产品世界里选最有代表性的表达,字体、结构和动效都服务信息层级,而不是装饰。

实现时保持短行、清晰焦点、键盘可用、响应式和 reduced-motion 支持。动效只保留一个值得记住的重点,交互状态要能被静态线索理解。文案使用用户听得懂的动作和结果,不要把系统内部术语直接当界面语言。

分类:编程开发

来源仓库:anthropics/claude-code

适合用来做什么

  • 为我们的新应用设计一个现代且有吸引力的UI。
  • 帮助确定我们网站重新设计的美学方向和排版。

安装 frontend-design

npx skills add https://www.iskills.cc/skills/anthropics/claude-code/frontend-design/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 frontend-design 的用途与原始说明

浏览全部 Skill 指南