# Frontend Aesthetic Direction

> 为没有既有品牌或设计系统的全新前端项目确定可执行的视觉方向，明确字体、颜色、密度、圆角、阴影、组件、图像和动效规则。用户要求“从零定风格”“确定视觉方向”或准备制作高保真界面但缺少品牌依据时使用；存在既有品牌时应优先提取和复用。

- Skill: `onevium/frontend-aesthetic-direction` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/frontend-aesthetic-direction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/frontend-aesthetic-direction/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/frontend-aesthetic-direction

---


# 前端视觉方向

在真正的绿地设计中先确定系统，再制作高保真界面。目标是给后续决策建立依据，避免边做边发明互相冲突的默认值。

## 1. 确认确实没有既有语境

检查品牌规范、现有产品、参考网站、代码库 token 和局部设计系统。任何可用来源都应优先复用；用户有材料但未提供时先索取。

## 2. 明确意图

确认期望感受的三个形容词、受众、行业、喜欢的参考及具体原因、禁用风格和素材限制。若用户无法决定，给出 3–4 个真正不同的方向，每个写明背景色、强调色、字体组合、密度和理由；至少一个方向应明显跳出常见答案。

## 3. 锁定系统

- **排版**：明确标题、正文和必要的等宽字体、字重及字号阶梯，最多 1–2 个家族。常见字体可以使用，但必须有品牌、可读性、语言覆盖或技术理由。
- **颜色**：选择暖、冷或中性色调，定义主色、至多一个强调色、语义色和中性色阶。无品牌时可用 `oklch()` 构建协调色板。
- **密度**：选择 4px、8px 或项目明确的间距基础，并确定紧凑、常规或宽松。
- **圆角与阴影**：确定锐利、柔和或胶囊式，以及一套统一层级；不要混用多套阴影逻辑。
- **组件**：明确主要与次要控件默认采用填充、描边、幽灵或抬升样式。
- **图像与图标**：确定真实摄影、专业插画、正式图标集或诚实占位符；不要把临时装饰当最终资产。
- **动效**：选择克制、表现型或活泼，并定义基本时长与缓动；同时考虑减少动态效果设置。

米白、展示衬线和陶土色的暖编辑风本身合法，但只有简报确实支持时才选；不能作为所有产品的默认视觉答案。

## 4. 记录并试做

把方向写入源文件顶部的简短注释或项目设计决策文档，包含每个轴的具体选择和 token。然后先制作一个小表面，例如 Hero、卡片或按钮组，验证它是否符合三个形容词；通过后再扩展。

后续所有页面引用已定义 token。需要新值时先扩展系统，再使用，不在页面中散落一次性色值。

## 示例

**输入：**“这是一个全新的开发者工具，没有品牌，先帮我定视觉方向。”

**输出：**给出三套差异明显的方向，经用户选择后记录字体、冷中性色板、紧凑 4px 密度、4px 圆角、边框式组件和克制动效，并制作一组 Hero 与按钮验证方向。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。