CopybookEnglish搜索

技能包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 那种质感,这两样东西配着用:

  1. awesome-design-md。想要哪种质感,先在这里挑一份。开源仓库,120K 星,照 Stripe、Linear、Vercel、Notion 等 74 个产品的风格整理了 DESIGN.md,社区仿写,非官方。配色、字体、间距、圆角、阴影,还有该做和别做的,都写在里面,agent 能直接读。
  2. shadcn 官方的 skill。挑好一份交给它。它先新开一个项目,不碰你现有的代码,装上全部组件,再按这份 DESIGN.md 改一遍整套样式。做完会给你一页设计系统总览:颜色查过对比度,每个组件的各种状态都列出来,该做和别做的摆成对照。

装好以后,在 GitHub 打开你挑的那份 DESIGN.md,点 Raw 复制链接,在 Claude Code 里发这一句。

提示词
用 shadcn skill 新建一个 Next.js 项目,照这份 DESIGN.md 搭一套设计系统,最后做一页总览。先把文件下载到项目里再读:<Raw 链接>

不满意就换一份重跑。看中一套,就让 Claude Code 把主题和组件搬进你的项目,当起点再改成你自己的。

收在合集里

Opus 5.5 设计品味页面一看就是 AI 做的:喜欢的网站写成 DESIGN.md,再改组件、查 CSS。打开