Claude Skills

Claude Skills 让我不用费劲设计前端了用提示词费劲巴拉调出一个中规中矩的前端页面，还要纠结要不要为了这个学Figma，一用上Skills，直接从50分拉到80分，这个效果还要什么自行车（上图是原图，下图是用skills改过的）截图看不太出来但是实际上效果真的很好！

做法也很简单，只要你用的是Claude Code都可以直接用上的，无论api是GLM还是kimi还是minimax。

Skills我用的直接就是Claude官方出的前端设计Skills，先将Skills的内容下载到本地：

npx skills-installer install @anthropics/claude-code/frontend-design –client claude-code

下载了之后一般都在C盘/用户名/.claude下，在Claude Code用/skills
命令也能看到

然后, 在Claude Code里面，简单一句：帮我用 @anthropics/skills/frontend-design skill 重新设计xxx页面，就成了！你还可以指定风格，可以指定成极简风/自然风/未来主义风..

顺便提一句GLM4.7前端的审美真的很不错，不输Claude本家，真国货之光，现在还有跨年优惠，三个月才54，这个价格还要什么自行车，看上的可以直接点链接买个套餐一起Vibe Coding~

资料：

• Claude Skills 文档：https://code.claude.com/docs/zh-CN/skills
• Mermaid AI 文档：https://mermaid.ai/open-source/intro/
• Mermaid markdown 文档：https://wiki.hiwepy.com/docs/markdown/markdown-1h02l64ugip8u
  需求：
• 基于 Claude Skills 创建一个使用Mermaid 的 自定义Skills，要能支持所有的图表等