# 拒绝“一眼 AI”的塑料感：这套 Skill复刻了 Claude Design，让网页设计重回高级审美！
**作者**: 冰河
**日期**: 2026-04-23T14:01:05.000Z
**来源**: [https://x.com/binghe/status/2048046058878447733](https://x.com/binghe/status/2048046058878447733)
---
为什么 AI 生成的网页都长一个样？
你有没有发现不管用 ChatGPT、Claude 还是 Cursor 生成网页，结果总是特别眼熟：紫粉蓝渐变、蓝色大按钮、emoji 当图标、一大堆编出来的"好评数据"
这不模型技术理解力不行，是"品位"没跟上。
就像一个新手设计师，技术可以，但少了点感觉。
但是 Claude 新出的 Design 在短时间内就掀起了行业热潮，还让figma 股票暴跌。
就是因为 Claude Design在审美方面领先其它模型一个身位。
其实在它横空出世的第二天，推特上就有国外大拿反推出来了提示词，但内容比较繁锁，因为这是一套设计美学系统，我们把它的优秀总结为以几个主要原因：
1，它的角色定位是动态的，而不是只是一个类型的设计师角色。选择做什么设计项目的时候，会切换到各场景下的设计角色！
2，六步工作流：理解需求 -- 补齐资源 -- 制定任务 -- 组织结构 -- 完成验证 -- 样稿总结
3，反 AI 味套路。在配色方面使用 OKLCH 值，更强调感知均匀，而其它模型更多使用的是明亮的 HSL值，会非常明亮。
4，大胆留白！ 调整合适，而不是堆砌！这就是反传统的设计手法，会让你的作品与众不同没有局促的感觉，画面更有呼吸感！
5，产出结果后 Claude desing 有个验证环节，这是其它模型没有的 Agent 流程。它会换全新上下文来进行客观性的检测，这样就保证了样稿的评价独立性。
好我们明白了这些核心价值，再加上实际使用中的业务场景，我会把这些核心元素做成 Skill 供大家在不同设计需求中灵活使用。
上次的 PPT 演示类的 Skill 更讲究的是我的个人审美，但不能代表大家的喜好，今天这套 Skill 就可以按你的想法来做个人品味的页面风格了。
没看过上次的文章，链接在这里：
首先，我要介绍这套 Skill 四个硬性规定：
工作流按任务大小分为三档：
QUICK 快速档：
做法：跳过前 4 步直接上手做！
场景是：
帮我改个按钮
做个简单 demo
单个小组件
STANDARD 标准档：
做法：完整六步走 V0草稿先确认。
场景是：
做个落地页
做套 PPT
可点击原型
DEEP 深度档：
做法：六步+每步确认，节奏慢但是稳！
场景是：
多页网站
整套设计系统
品牌视觉体系
这套标准，只有你亲自用其它 AI 模型做设计对比的时候才会真切的感受出来。所以我建议你在使用这个 Skill 的时候，最好也用 Opus 模型来操作，保证效果！
相比原 Claude Design 我在基础上增加了七项优化！
1，触发词更多，可以用口语化触发。
2，三档工作流（如上），小任务不用走原 Claude Code 的全流程，按规模自适应，满足我们不同需求。
3，品牌优先，项目有 DESIGN.md 时 Skill 默认值自动让步，不然与原有设计风格与配色相冲突。
4，字体禁用清单，有些字体用了就 Low。
5，色彩和字体单独成文件，按需加载省上下文。
6，增加 check.py，一条命令扫 6 类 AI 红旗。
7，跟随语言，中文对话用中文解释，代码英文不变。
好，多说都是假把式，我们来实操一把！
第一步把web-design-engineer压缩包解压到 Claude Code 的 skills 目录,放进去就好。
新建一个项目目录，在当前目录打开 Claud code
我们直接输入模糊需求：我要设计一个作品展示类网站，系统自动调用这个 Skill (前提是你没有安装其它网页设计 Skill，如果有，就直接要求使用web-design-engineer skill 来制作
弹出业务需求流程！下面你可以按需选择：
先定类型，后定风格，再讨论技术实现方案！
如果你有简单的设计要求就选择自己输入。
如果你对技术框架不懂，管他呢，直接让它来决定。
核心页面方面是多选的，有就选择没有就不选，当然如果还有其它版块要求在下面输入要求就好。
中间会给出详细的设计方案。
如果你有兴趣就看看，觉的不满意就给出修改意见！
当然我们多数朋友 都是小白，就别整那出了。。。
因为有些页面功能性选择，会考虑的全较全面，需求越详细，制作出来的内容会越有针对性，这时它会把你当成甲方，给出更多详细的要求。
你不懂，或懒的回复那些要求，就直接按他的来！
页面设计出来后，会进行静态检查。
并且网页右下角像 Claude design 一样，还准备了 Tweaks 可以切换不同配色和字号定义等。
因为是演示，我没有细究其它风格，这个探索工作留给你们吧。
这已经基本把Claude design的大多数业务流程全走了一遍。
网页设计并不能充分代表这个 Skill 的强大，大家去试一下 UI 设计还有框架类的网站设计看一下交互细节！
这个过程中，你可以上传图片参考，也可以把自己公司的 LOGO，或设计元素上同上传作为设计资产。
其实使用过程和 Claude design 一样的流程！
我自己试了一下，UI 设计界面也是非常漂亮的。设计完结果，你可以让他导出代码类内容，用于编程时配套设计规范标准使用。
多个模型生成的页面，你们自行对比吧。
注意：如果是有框架的，可能需要端口才可以打开预览。
我在使用了 GLM、Minimax 、Kimi 都有非常 AI 味的设计美学，我不喜欢。
还是最后用 Opus 4.7 使用 Skill 出来的页面最具审美！
本 Skill 我已经放到订阅区了！感谢订阅我的兄弟们！
> 也欢迎大家加入“钱来有道”社群，众多小说写作，公众号爆文，动态漫剧剧本创作类工具免费使用！广告结束！
## 相关链接
- [@binghe](https://x.com/binghe)
- [926](https://x.com/binghe/status/2048046058878447733/analytics)
- [Apr 23](https://x.com/binghe/status/2047314823667744794)
- [check.py](https://check.py/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [10:26 PM · Apr 25, 2026](https://x.com/binghe/status/2048046058878447733)
- [926 Views](https://x.com/binghe/status/2048046058878447733/analytics)
---
*导出时间: 2026/4/25 23:36:16*