---
slug: "claude-visual-style-skill"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/carbon-silicon-interpreter/claude-visual-style-skill@main/README.md"
repo: "https://github.com/carbon-silicon-interpreter/claude-visual-style-skill"
source_file: "README.md"
branch: "main"
---
# Claude Visual Style Skill / Claude 视觉风格技能

[🇬🇧 English Documentation](https://github.com/carbon-silicon-interpreter/claude-visual-style-skill/blob/HEAD/README_EN.md)

> [!NOTE]
> 本项目是基于公开 prompt 实现的 agent skill。本项目中使用的所有设计风格提示词和定义均下载自 **[Design Prompts](https://designprompts.dev)**。这些设计风格并非原创，本项目旨在让大家更方便地在 Claude 中使用这些优秀的资源。

Claude Visual Style Skill 是一个强大的 Claude Agent 技能，旨在帮助用户为前端项目选择并应用令人惊叹的视觉设计风格。该技能提供了一系列精选的 16+ 种独特视觉美学，让生成美观、风格一致的 UI 变得轻而易举。

![风格选择演示](https://github.com/carbon-silicon-interpreter/claude-visual-style-skill/raw/HEAD/assets/style-selection-demo.jpg)

## 🎨 包含的风格 (Included Styles)

| # | 风格名称 (Style Name) | Demo |
|---|---|---|
| 1 | 自由风格 / Free Style | - |
| 2 | 学术 / Academia | [View Demo](https://designprompts.dev/academia) |
| 3 | 装饰艺术 / Art Deco | [View Demo](https://designprompts.dev/art-deco) |
| 4 | 极光网格 / Aurora Mesh | [View Demo](https://designprompts.dev/aurora-mesh) |
| 5 | 包豪斯 / Bauhaus | [View Demo](https://designprompts.dev/bauhaus) |
| 6 | 醒目排版 / Bold Typography | [View Demo](https://designprompts.dev/bold-typography) |
| 7 | 自然衬线 / Botanical Serif | [View Demo](https://designprompts.dev/botanical-serif) |
| 8 | 商务风格 / Business Style | [View Demo](https://designprompts.dev/business) |
| 9 | 粘土拟态 / Claymorphism | [View Demo](https://designprompts.dev/claymorphism) |
| 10 | 企业信任 / Corporate Trust | [View Demo](https://designprompts.dev/corporate-trust) |
| 11 | Crypto | [View Demo](https://designprompts.dev/crypto) |
| 12 | 赛博朋克 / Cyberpunk | [View Demo](https://designprompts.dev/cyberpunk) |
| 13 | 扁平化设计 / Flat Design | [View Demo](https://designprompts.dev/flat) |
| 14 | 毛玻璃 / Glassmorphism | [View Demo](https://designprompts.dev/glassmorphism) |
| 15 | 工业风 / Industrial | [View Demo](https://designprompts.dev/industrial) |
| 16 | 动态排版 / Kinetic | [View Demo](https://designprompts.dev/kinetic-typography) |
| 17 | 奢华质感 / Luxury | [View Demo](https://designprompts.dev/luxury) |
| 18 | 质感设计 / Material Design | [View Demo](https://designprompts.dev/material) |
| 19 | 极繁主义 / Maximalism | [View Demo](https://designprompts.dev/maximalism) |
| 20 | 现代暗黑 / Modern Dark | [View Demo](https://designprompts.dev/modern-dark) |
| 21 | 单色主义 / Monochrome | [View Demo](https://designprompts.dev/monochrome) |
| 22 | 新粗犷主义 / Neo-brutalism | [View Demo](https://designprompts.dev/neo-brutalism) |
| 23 | 新拟态 / Neumorphism | [View Demo](https://designprompts.dev/neumorphism) |
| 24 | 报纸印刷 / Newsprint | [View Demo](https://designprompts.dev/newsprint) |
| 25 | 自然有机 / Organic | [View Demo](https://designprompts.dev/organic) |
| 26 | 趣味几何 / Playful Geometric | [View Demo](https://designprompts.dev/playful) |
| 27 | 复古 / Retro | [View Demo](https://designprompts.dev/retro) |
| 28 | 简单暗黑 / Simple Dark | [View Demo](https://designprompts.dev/simple-dark) |
| 29 | Hand-Drawn / Sketch | [View Demo](https://designprompts.dev/sketch) |
| 30 | Swiss | [View Demo](https://designprompts.dev/swiss) |
| 31 | Tech Style | [View Demo](https://designprompts.dev/tech) |
| 32 | Terminal CLI | [View Demo](https://designprompts.dev/terminal) |
| 33 | Vaporwave | [View Demo](https://designprompts.dev/vaporwave) |

## ✨ 主要功能

- **主动风格建议**：当你开始前端任务时，自动提议应用设计风格。
- **视觉预览链接**：为每种风格提供在线演示的直接链接，所见即所得。
- **上下文感知生成**：一旦选中某种风格，Claude 会自动将该风格特定的调色板、排版和布局规则应用于所有生成的代码中。

## 🚀 工作原理

1.  **请求前端代码**：开始一个请求，例如“为咖啡店做一个落地页”。
2.  **选择风格**：技能会展示一个可用风格的编号列表。
3.  **应用与构建**：只需回复编号或名称。Claude 会加载特定的设计提示词，并使用该美学风格生成你的代码。

## 📦 安装指南

本技能专为 Claude Code 或支持模型上下文协议 (MCP) 及直接技能集成的类似 Agent 环境设计。

1.  将 `visual-style-skill` 目录放入你的 skills 文件夹中。
2.  确保配置指向 `visual-style-skill/SKILL.md`。

## 🙏 致谢

**特别感谢 [Design Prompts](https://designprompts.dev) 服务！**

本技能中使用的高质量设计提示词和风格定义均源自 **[Design Prompts](https://designprompts.dev)**。我们非常感谢他们提供了如此出色且精心策划的设计美学合集，正是这些资源使得 AI 模型能够生成如此视觉独特且打磨精细的结果。

如果您喜欢这些风格，请访问他们的网站以探索更多精彩的设计资源！