译者按:最近用 Claude Code 和 Cursor 写前端页面,发现它们生成的页面长得都差不多——Inter
字体、紫粉渐变、大圆角卡片,一眼就能看出"这是 AI 写的"。这篇文章提到的 web-design-skill 项目很有意思,它把 Claude Design
的设计理念提炼成了一个可复用的 skill 文件,让 AI 写出更有设计品味的代码。我试着整理了一下,分享给大家。
问题
译者按:前阵子折腾 Claude Code 生成页面,被那满屏的 Inter 字体、蓝按钮、紫粉渐变 hero 气得够呛——一眼就能看出是 AI
写的。翻到这篇,介绍了 web-design-skill 这个 skill,用了一套正经设计系统(OKLCH、比例间距、真图标)来约束 AI
的审美输出,看完觉得有点东西,顺手转写分享一下。
让 Claude Code 或者 Cursor 随手生成一个