Skills Directory精选自 GitHub 的开源 Skills
中文

frontend-designcommit 41bbe19SKILL.md · UI 与交互

前端视觉设计

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

npx skills add anthropics/skills --skill frontend-design
权限
  • read-repo
  • write-files
  • shell
  • network
兼容工具
Claude Code
GitHub
186.0k
来源
官方 · Anthropic
状态
扫描通过
许可证
Apache-2.0
分类
UI 与交互
代码仓库
github.com/anthropics/skills/skills/frontend-design

核心规则

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

执行阶段

  1. 阶段 01立足主题

    若需求未说明产品或主题，先提出具体主题、受众和主要用途并与客户确认，从该领域的材料和语汇中寻找视觉选择。

  2. 阶段 02拟定设计方案

    制定精简的令牌体系：4–6 个命名色值、字体及其角色、用 ASCII 线框比较的布局概念，以及设计原则。

  3. 阶段 03对照需求复审

    检查方案中是否有对任何同类页面都会给出的默认选择，有则修改，并说明改了什么、为什么。

  4. 阶段 04实现并自查

    按修订后的方案编码，注意 CSS 选择器优先级，保证响应式、可见焦点和减弱动效等基本质量，环境支持时截图自查。

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

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

SKILL.md 头部信息（YAML）

SKILL.md 头部信息（YAML）commit 41bbe19
---
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
---

相关技能

规则扫描无法覆盖所有风险，安装前请阅读此技能的 SKILL.md，确认权限后再使用。
Markdown 版本 GitHub