# Frontend Design

> Use when building or modifying any UI page, component, or layout — especially workbench, public RO pages, or collaboration areas. Do NOT use for backend-only logic with no UI surface.

- Skill: `photonics-dhl/frontend-design-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add photonics-dhl/frontend-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/photonics-dhl/frontend-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: photonics-dhl (https://skillmd.com/u/photonics-dhl)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/photonics-dhl/frontend-design-2

---


# Frontend Design — 前端视觉与交互规范

三套视觉系统 + 响应式 + 可访问性 + i18n，逐条可核对。

## 何时使用 / 何时不使用

- **使用**：新建或修改页面、组件、布局、样式 token；做移动端适配；处理表单、diff、review 等协作交互。
- **不使用**：纯后端 API、脚本、与 UI 无关的工具代码。

## 检查清单

### 三套视觉系统（Spec §18.2、§2.5-6）

1. **工作台**：现代产品式 UI——现代、克制、信息密度适中。
2. **公开 RO 页面**：严肃学术出版风格排版。
3. **协作区域**（Issue/PR/Review/diff）：GitHub 式交互与状态呈现。
4. **中英混排**：中文与英文内容混排良好；颜色 token 从首版预留（深色模式可后续）。

### 响应式（Spec §2.5-5、§18.2）

5. **桌面移动功能一致**：所有主要流程在移动端可完成；不得"移动端隐藏功能"。
6. **三栏改分步/抽屉**：复杂三栏界面（如 SDF 编辑器：左大纲、中编辑、右 SDF/AI 面板，§2.5-2）在移动端改为分步/抽屉，而非删除功能。

### 可访问性与性能（Spec §18.3）

7. **WCAG AA**：对比度达 AA 级目标；键盘导航可用；焦点状态明确。
8. **语义化 HTML**：语义化标签；图片必须有 alt。
9. **性能**：公开页面优先 SSR/缓存；大文件列表虚拟化；AI/上传任务显示可恢复进度。
10. **错误提示**：包含重试、保存草稿和问题定位入口。

### 国际化（Spec §2.5-5）

11. **i18n 从首版**：中文优先，但首日起采用中英文国际化架构；界面文案不得硬编码在组件里，必须走 i18n 资源。

### Hermes 审批交互（Spec §2.5-7、§9.4）

12. **审批不打断**：写入/删除/Merge/发布/权限变更需审批，但必须支持批量预览、作用域授权和撤销；UI 组件按 R0–R4 分级呈现确认强度（§9.4）。