Claude Visual Style Skill / Claude 视觉风格技能

🇬🇧 English Documentation

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

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

🎨 包含的风格 (Included Styles)

#	风格名称 (Style Name)	Demo
1	自由风格 / Free Style	-
2	学术 / Academia	View Demo
3	装饰艺术 / Art Deco	View Demo
4	极光网格 / Aurora Mesh	View Demo
5	包豪斯 / Bauhaus	View Demo
6	醒目排版 / Bold Typography	View Demo
7	自然衬线 / Botanical Serif	View Demo
8	商务风格 / Business Style	View Demo
9	粘土拟态 / Claymorphism	View Demo
10	企业信任 / Corporate Trust	View Demo
11	Crypto	View Demo
12	赛博朋克 / Cyberpunk	View Demo
13	扁平化设计 / Flat Design	View Demo
14	毛玻璃 / Glassmorphism	View Demo
15	工业风 / Industrial	View Demo
16	动态排版 / Kinetic	View Demo
17	奢华质感 / Luxury	View Demo
18	质感设计 / Material Design	View Demo
19	极繁主义 / Maximalism	View Demo
20	现代暗黑 / Modern Dark	View Demo
21	单色主义 / Monochrome	View Demo
22	新粗犷主义 / Neo-brutalism	View Demo
23	新拟态 / Neumorphism	View Demo
24	报纸印刷 / Newsprint	View Demo
25	自然有机 / Organic	View Demo
26	趣味几何 / Playful Geometric	View Demo
27	复古 / Retro	View Demo
28	简单暗黑 / Simple Dark	View Demo
29	Hand-Drawn / Sketch	View Demo
30	Swiss	View Demo
31	Tech Style	View Demo
32	Terminal CLI	View Demo
33	Vaporwave	View Demo

✨ 主要功能

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

🚀 工作原理

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

📦 安装指南

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

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

🙏 致谢

特别感谢 Design Prompts 服务！

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

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