# 前端设计方向 (frontend-design-direction)

> 在开发生产级 UI 前确定贴合产品领域的设计方向，并用渲染证据检查可访问性、响应式和各类内容状态。

- 分类: [UI 与交互](https://www.myskills.tools/zh/categories/ui-interaction/)
- 来源: 社区 · Affaan Mustafa
- 代码仓库: https://github.com/affaan-m/ECC/tree/main/skills/frontend-design-direction (commit 1c05119)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/frontend-design-direction/SKILL.md
- 安装命令: `npx skills add affaan-m/ECC --skill frontend-design-direction`
- 许可证: MIT
- 兼容工具: Claude Code, Codex, Cursor, Copilot, OpenCode
- 权限: read-repo ✓, write-files ✓, shell ✓, network ✓
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。
- ⚠ 可选的 UIZZE 参考检索是需要账号的第三方服务，仅在同意后使用，且不发送截图、代码或用户数据。

## 核心规则

仅检查源码无法通过最终渲染检查，未测试的部分要如实报告，绝不伪造证据。

## 执行阶段

1. **确定设计方向** — 编码前明确界面用途、受众、语气、一个令人记住的细节，以及框架、可访问性和现有设计系统等约束。
2. **记录证据契约** — 记录主操作、层级、目标视口及各决策的参考依据，并为加载、空、错误、部分、成功、权限状态写明触发与反馈。
3. **按契约实现** — 优先复用项目已有组件、令牌和图标库，用 CSS 变量保持一致，并避免紫色渐变、卡片套卡片等常见生成套路。
4. **渲染后检查** — 在目标视口检查键盘导航、焦点可见、标签、对比度、减弱动效和触控区域，逐一验证各内容状态并修复问题。
5. **运行证据检查器** — 把截图和观察写入本地 JSON 证据记录，再运行自带的 node scripts/check-evidence.js 校验其完整性。

## 权限说明（据 SKILL.md 整理）

| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 编写 UI 代码，并在工作区保存截图和本地 JSON 证据记录。 |
| 命令执行 | 部分需要 | 运行自带的 check-evidence.js 和渲染检查；未经授权不安装软件包。 |
| 网络外发 | 部分需要 | 仅在用户同意后使用可选的 UIZZE MCP，只发送脱敏后的概括性设计需求。 |

## SKILL.md 头部信息（YAML）

```yaml
---
name: frontend-design-direction
description: Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.
metadata:
  origin: community
---
```

首页: https://www.myskills.tools/zh/ · URL: https://www.myskills.tools/zh/skills/frontend-design-direction/