标签 UI风格 下的文章

缘由

之前的 design-style 全部基于 https://designprompts.dev 给出的 prompt,但是终究只有 30 + 种,满足不了需求,往往大家想要的 UI 不在里面,例如我想抄一下 Claude.ai,Spring.com 等等这些网站的 UI 风格,但是我不会写 Prompt,尤其是涉及动画,CSS,字体这些,自己写 Prompt 有点麻烦,截图给 AI 或者直接让 Gemini 写一份往往不能得到满意的结果(大概率没有动画效果或者字体不对,或者 CSS 不标准),尽管 Gemini 的视觉能力和知识面已经足够强了,但是不够稳定,所以有了以下的 Skill,作用就是通过 ChromeDevToolsMCP 提取 CSS 样式自动编写 System Prompt
直接效果展示

spring.com 风格

binance.com 风格

UI 风格可以去 https://mobbin.com/ 找想要的网站即可
使用方式也很简单,现在有个缺点就是容易爆 Context,推荐关闭自动压缩上下文 + 搞个长上下文的 Model,

使用design-system-analyzer 创建www.binance.com风格prompt并且写入文件

自此,你想抄谁就抄谁,当然再次强调,这些只能决定 UI 风格,不代表前端质量,前端不仅仅是 UI 设计,UX 设计才是重中之重

项目地址:GitHub - NakanoSanku/OhMySkills: useful anthropic skills


📌 转载信息
转载时间:
2026/1/9 17:43:57