frontend-design-directioncommit 1c05119SKILL.md · UI 与交互

前端设计方向

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

可选的 UIZZE 参考检索是需要账号的第三方服务，仅在同意后使用，且不发送截图、代码或用户数据。

npx skills add affaan-m/ECC --skill frontend-design-direction

权限: read-repo
write-files
shell
network
兼容工具: Claude Code, Codex, Cursor, Copilot, OpenCode
GitHub: 294.3k
来源: 社区 · Affaan Mustafa
状态: 扫描通过
许可证: MIT
分类: UI 与交互
代码仓库: github.com/affaan-m/ECC/skills/frontend-design-direction

核心规则

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

执行阶段

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

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

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

SKILL.md 头部信息（YAML）commit 1c05119

---
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
---

核心规则

执行阶段

阶段 01确定设计方向

阶段 02记录证据契约

阶段 03按契约实现

阶段 04渲染后检查

阶段 05运行证据检查器

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

SKILL.md 头部信息（YAML）

相关技能