C✳CODEZ.WIN
🌐 简体中文

Skill 多语言阅读指南

frontend-design-review用途、用法与原始来源

审核并创建具有独特性、生产级的前端界面,确保高设计质量和设计系统合规性。评估基于三大支柱:流畅的洞察到行动、精湛的工艺和值得信赖的构建。适用范围:PR审核、设计审核、可访问性审核、设计系统合规性检查、创意前端设计、UI代码审核、组件审核、响应式设计检查、主题测试以及创建令人印象深刻的UI。不适用于:后端API审核、数据库模式审核、基础设施或DevOps工作、不含UI的纯业务逻辑或非前端代码。

原文采集时间:

来源仓库
microsoft/skills
SKILL.md
.github/skills/frontend-design-review/SKILL.md
仓库 Star
3,157
仓库最近更新
2026/10/31
能力分类
开发
最近采集时间

许可:MIT

流程片段用于帮助阅读上游说明。本页没有执行第三方 Skill,不属于实测评测。

下面的用途和操作片段来自上游文档,由本站整理并翻译,和另行标注的 Codez 编辑分析分开展示。

这个 Skill 能做什么

审核并创建具有独特性、生产级的前端界面,确保高设计质量和设计系统合规性。评估基于三大支柱:流畅的洞察到行动、精湛的工艺和值得信赖的构建。适用范围:PR审核、设计审核、可访问性审核、设计系统合规性检查、创意前端设计、UI代码审核、组件审核、响应式设计检查、主题测试以及创建令人印象深刻的UI。不适用于:后端API审核、数据库模式审核、基础设施或DevOps工作、不含UI的纯业务逻辑或非前端代码。

如何使用:上游操作流程

设计系统工作流程

查看 Storybook/组件库中的组件,了解其 API 和用法。使用 Figma 开发模式获取精确的规格说明(间距、标记、属性)。使用设计系统组件和设计标记进行实现。将实现与 Figma 设计进行比较。

原文片段 · L54 ↗

审核流程

确定用户任务;检查设计系统是否匹配模式;评估美学方向;确定范围(组件、功能或流程)。

原文片段 · L72 ↗

核心原则

任务完成:最少点击次数。每个屏幕都回答“我能做什么?”和“接下来会发生什么?”操作层级:1-2每个视图的主要操作。次要操作逐步展开。引导:在介绍时解释各项功能。智能默认设置优于配置。导航:清晰明了entry/exit积分。Back/cancel随时可用。深入探索的线索。

原文片段 · L82 ↗

环境与依赖

本次未从该文件选出独立的环境要求片段,不代表无需依赖。请继续核对仓库的安装说明和引用文件。

限制与结果检查

2品质即工艺

设计系统合规性:符合 Figma 规范,使用设计标记;美学方向:独特的字体、协调的色彩、精心设计的动态效果。

原文片段 · L99 ↗

开始使用前

  1. 先核对支持的 Agent 宿主和仓库安装说明。保留完整 Skill 目录及其引用的脚本、资源和文档,只复制 SKILL.md 可能漏掉依赖。
  2. 向 Agent 提供实际输入、期望输出和验收标准。调用方式与可用工具取决于宿主环境,本站不假定存在通用的安装命令。
  3. 先在临时项目或输入副本上试用。涉及修改文件、远程服务或计费资源的操作,应逐项核对后再授权。
  4. 按照原文检查项和自己的需求验证输出。成功触发或仓库 Star 较高,都不能证明结果正确。

Skill 文件与目录格式规范 ↗

继续阅读原始文档

翻译与介绍范围

本页从固定版本的上游 SKILL.md 整理用途与操作片段,译文使用辅助翻译。它不是完整手册,也不代表经过兼容性实测;使用前请核对原文及其引用文件。

介绍依据下方列出的固定版本;当前仓库动态和目录采集时间单独展示。

固定版本来源
阅读原文 ↗
原文采集时间
来源提交版本
00d66a64919edca5bca2c673373444e36a4b5461
原文 SHA-256
639b68cdc6f9b4cdd66a111851555afee2eb82d4de37bf9cbad3be845bb00c2d
返回完整 Skill 目录