frontend-design-review

仓库创建 2026年1月17日最近提交 21 天前SkillHot 收录 20 天前
▸ 精选理由

在 PR 和设计评审中快速给出可执行的改进建议与标准对照。

这个 Skill 做什么

评估或生成高质量前端界面,覆盖设计系统与可访问性规范。

用于评估或产出高质量前端界面,既能做设计审查也能从零创建设计系统合规、可访问的 UI。适合做 PR 评审、可访问性审计、组件/响应式测试或想把界面做得更有品质和一致性时使用,不适合后台或数据库逻辑审查。核心看三个方面:从洞察到行动的流畅性、工艺质量和可信赖性,既给问题诊断也给改进建议。

▸ 展开 SKILL.md 英文原文

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

内容创作界面评审可访问性设计系统通用
2.7k
Stars
304
Forks
40
仓库内 Skill
+0
7 日增星
安装 / 使用
给你的 Agent 一句话(通用)
帮我安装这个 skill:https://raw.githubusercontent.com/microsoft/skills/main/.github/skills/frontend-design-review/SKILL.md
或 curl 直取 SKILL.md
curl -fsSL "https://raw.githubusercontent.com/microsoft/skills/main/.github/skills/frontend-design-review/SKILL.md"
SKILL.MD 节选查看完整文件 ↗
# Frontend Design Review

Review UI implementations against design quality standards and your design system **OR** create distinctive, production-grade frontend interfaces from scratch.

## Two Modes

### Mode 1: Design Review
Evaluate existing UI for design system compliance, three quality pillars (Frictionless, Quality Craft, Trustworthy), accessibility, and code quality.

### Mode 2: Creative Frontend Design
Create distinctive interfaces that avoid generic "AI slop" aesthetics, have clear conceptual direction, and execute with precision.

---

## Creative Frontend Design

Before coding, commit to an aesthetic direction:
- **Purpose**: What problem does this solve? Who uses it?
- **Tone**:
via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有