# 前端视觉设计 (frontend-design)

> 以设计工作室负责人的视角，为界面做出贴合主题、不落俗套的配色、字体与布局选择。

- 分类: [UI 与交互](https://www.myskills.tools/zh/categories/ui-interaction/)
- 来源: 官方 · Anthropic
- 代码仓库: https://github.com/anthropics/skills/tree/main/skills/frontend-design (commit 41bbe19)
- SKILL.md: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
- 安装命令: `npx skills add anthropics/skills --skill frontend-design`
- 许可证: Apache-2.0
- 兼容工具: Claude Code
- 权限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状态: 扫描通过
- 规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。

## 核心规则

需求说明里的原话永远优先；它留出的自由空间，不要用通用默认样式填满。

## 执行阶段

1. **立足主题** — 若需求未说明产品或主题，先提出具体主题、受众和主要用途并与客户确认，从该领域的材料和语汇中寻找视觉选择。
2. **拟定设计方案** — 制定精简的令牌体系：4–6 个命名色值、字体及其角色、用 ASCII 线框比较的布局概念，以及设计原则。
3. **对照需求复审** — 检查方案中是否有对任何同类页面都会给出的默认选择，有则修改，并说明改了什么、为什么。
4. **实现并自查** — 按修订后的方案编码，注意 CSS 选择器优先级，保证响应式、可见焦点和减弱动效等基本质量，环境支持时截图自查。

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

| 能力 | 是否需要 | 说明 |
|---|---|---|
| 文件写入 | 需要 | 根据设计方案编写前端代码和页面文案。 |
| 命令执行 | 不需要 | 技能未要求运行命令。 |
| 网络外发 | 不需要 | 不需要访问网络。 |

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

```yaml
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---
```

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