技能包Skill
awesome-design-md 和 shadcn skill
页面总是默认 shadcn 味:Stripe 或 Linear 风格的 DESIGN.md,整套组件照着改,附一页设计系统。
538 X 收藏,截至 发帖日期
安装 shadcn skill
npx skills add shadcn/ui下一步 装好后,把提示词连同 DESIGN.md 的 Raw 链接发给 Claude Code。
Claude Code 做出来的页面,总带着一股默认 shadcn 味?想换成 Stripe、Linear 那种质感,这两样东西配着用:
- awesome-design-md。想要哪种质感,先在这里挑一份。开源仓库,120K 星,照 Stripe、Linear、Vercel、Notion 等 74 个产品的风格整理了 DESIGN.md,社区仿写,非官方。配色、字体、间距、圆角、阴影,还有该做和别做的,都写在里面,agent 能直接读。
- shadcn 官方的 skill。挑好一份交给它。它先新开一个项目,不碰你现有的代码,装上全部组件,再按这份 DESIGN.md 改一遍整套样式。做完会给你一页设计系统总览:颜色查过对比度,每个组件的各种状态都列出来,该做和别做的摆成对照。
装好以后,在 GitHub 打开你挑的那份 DESIGN.md,点 Raw 复制链接,在 Claude Code 里发这一句。
提示词
用 shadcn skill 新建一个 Next.js 项目,照这份 DESIGN.md 搭一套设计系统,最后做一页总览。先把文件下载到项目里再读:<Raw 链接>不满意就换一份重跑。看中一套,就让 Claude Code 把主题和组件搬进你的项目,当起点再改成你自己的。
