让 AI 画出有设计感的页面？这个视觉风格选择器有 33 种风格可选

每次让 AI 画网页，出来的都是紫色渐变 + 圆角卡片 + Inter 字体——丑得很稳定。

问题不在 AI 画功不行，是它不知道你想要什么风格。而这个 Skill 就是来解决这个问题的。

这是什么

Claude Visual Style Skill 是一个给 Claude 用的视觉风格选择器。你跟 AI 说「帮我做个落地页」，它不是直接开画，而是先问你：「你想要哪种风格？」然后给你列出 33 种设计方向，从包豪斯到赛博朋克，从新粗犷主义到瑞士极简风，每种都有在线 Demo 可以预览。

选完之后，Claude 会把这个风格对应的调色板、排版规则、布局原则全部注入到生成的代码里，确保出来的页面风格统一、不是那种「AI 糊弄感」十足的东西。

支持的风格（33 种）

学术风、Art Deco、极光网格、包豪斯、醒目排版、自然衬线、商务风、粘土拟态、企业信任、赛博朋克、扁平化、毛玻璃、工业风、动态排版、奢华质感、极繁主义、现代暗黑、新粗犷主义、新拟态、报纸印刷、趣味几何、复古、手绘风、Swiss、Tech Style、Terminal CLI、Vaporwave……

说人话就是：无论你想让 AI 做出什么调性的页面，它都有对应的视觉系统可以调用。

怎么用

在 Claude Code 或支持 Skill 的 Agent 环境里，把 visual-style-skill 目录放进 skills 文件夹，然后正常提需求就行。比如：

• 「帮我做一个咖啡品牌的落地页」→ 它会先展示风格列表 → 你选「Luxury」→ 它用奢华风格生成
• 「做一个科技感十足的 Dashboard」→ 选「Cyberpunk」或「Tech Style」→ 出赛博朋克风格

安装

把仓库克隆到本地 skills 目录：

git clone https://github.com/carbon-silicon-interpreter/claude-visual-style-skill.git
# 把 visual-style-skill 目录放到你的 Claude skills 目录

风格定义全部基于 Design Prompts 的公开设计系统，质量有保证。完全免费，开源 MIT 协议。

适合谁

设计师想快速验证风格方向、前端开发者想让 AI 输出更有设计感、独立开发者不想在 UI 上花太多时间但又不想页面太丑——这三种场景都适用。

GitHub 链接我放评论区了，8 颗星，1 个 fork，小而精的项目。

https://github.com/carbon-silicon-interpreter/claude-visual-style-skill

GitHub: https://github.com/carbon-silicon-interpreter/claude-visual-style-skill