Frontend Design 技能：设计简报与界面检查

先做一项可验证的任务

给技能一个页面、真实内容和视觉方向。要求输出可检查的成果，再按组件规范和手机布局验收。

先确定方向，再选择组件

技能从界面目的与视觉性格出发。字体、间距和构图共同形成可识别方向；单个组件各自好看，并不代表组合后的页面具有清晰层级和识别度。

具体需求为设计划定边界

以开发工具导航站为例，核心任务可以是比较工具并打开有用资源。受众、品牌色、可复用组件与移动端状态让目标更明确；输入不同，同一技能也可以服务于不同视觉方向。

来源与配置需要匹配客户端

当前官方源码位于 anthropics/skills 仓库。Claude Code 按其技能与插件机制加载资源。同名包可能有不同发布者和指令，因此需要同时核对仓库作者与所选客户端。

围绕真实任务判断界面

有用的结果应突出主要操作、保证文字可读，并在不同屏幕保留层级。键盘焦点、对比度、空状态和长内容需要分别检查。截图展现外观，交互检查才能说明用户是否可以完成任务。

你可能还想知道

资料出处

本文依据引用的文档与作者来源整理，vibeforthat 未对本文进行独立安装或端到端产品实测。

• raw.githubusercontent.com
• code.claude.com