minimalist-ui
创建高端简约网页界面
大多数AI生成的界面看起来千篇一律、缺乏创意。本技能指导Claude生成精致的编辑风格网页设计，采用暖色调单色系配色、精致的字体层级和高端美学风格。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“minimalist-ui”。 创建一个带三档的简约定价区域
预期结果:
一个带三张卡片的宾果网格布局定价区域。每张卡片有1px #EAEAEA边框、充足的32px内边距、清晰锐利的8px圆角。主要档位使用#111111 CTA按钮。次要文字使用#787774。无阴影、无渐变。
正在使用“minimalist-ui”。 设计一个FAQ手风琴区域
预期结果:
一个无容器框的手风琴。每个项目用1px #EAEAEA底部边框分隔。使用Radix或Phosphor图标创建简洁的+和-切换开关。深黑色文字(#2F3437)，行高1.6以确保可读性。
正在使用“minimalist-ui”。 为SaaS产品创建一个英雄区域
预期结果:
一个使用Playfair Display或Newsreader的编辑风格衬线标题英雄区域，字间距紧密-0.02em，行高1.1。温暖的米白色背景(#FBFBFA)。副标题使用Switzer或SF Pro，字间距充足。可选的0.03透明度环境径向渐变。
安全审计
安全All 102 static findings are false positives triggered by CSS font-family declarations and UI design terminology. The SKILL.md is a legitimate design specification document. No actual shell commands, cryptographic code, keyloggers, or network exfiltration patterns exist. The hardcoded URL is a standard placeholder image service (picsum.photos) commonly used in web development.
检测到的模式
质量评分
你能构建什么
初创公司着陆页
创建精致、简约的着陆页，从众多典型SaaS设计中脱颖而出。
文档站点
生成具有编辑字体排版的简洁、易读文档布局。
设计系统组件
遵循简约设计原则构建一致的用户界面组件。
试试这些提示
为[产品名称]设计一个简约着陆页。采用高端实用主义简约风格，使用暖色调单色系配色、编辑风格衬线标题和宾果网格功能区域。包含英雄区域、三个功能卡片和定价表。
使用简约设计原则创建以下UI组件：(1) 背景色为#111111的主要CTA按钮，(2) 带柔和粉彩背景的标签徽章，(3) 仅带1px底部边框的手风琴FAQ区域。使用定义的配色和字体排版。
使用宾果网格布局设计一个三档定价表。每档应有充足的内边距(24px-40px)、1px #EAEAEA边框和清晰锐利的8px圆角。使用深黑色文字(#2F3437)和柔和灰色次要文字(#787774)。
为[产品类型]创建一个完整的着陆页。遵循高端实用主义简约协议：暖色调单色系配色(#FFFFFF, #F7F6F3, #111111)、编辑风格衬线标题(Lyon Text/Newsreader)、系统无衬线正文(SF Pro/Geist)。包含：带有紧凑字间距标题的英雄区域、宾果网格功能区、客户评价区域，以及带有简洁模糊效果的粘性导航栏。添加使用translateY(12px)淡入的滚动入场动画。
最佳实践
- 在添加组件之前先定义配色和字体排版层级
- 使用大量留白(各区域之间py-24或py-32)来营造高端感
- 将内容宽度限制在max-w-4xl或max-w-5xl以获得最佳可读性
- 使用IntersectionObserver实现滚动入场动画，以获得微妙、性能良好的显示效果
避免
- 使用Inter、Roboto或Open Sans等通用字体，这些字体显得企业化且缺乏创意
- 应用厚重的Tailwind阴影(shadow-md、shadow-lg)，这与简约美学相矛盾
- 使用明亮的原色、渐变或玻璃拟态效果，这会破坏单色调配色
- 为大型容器或主要按钮添加圆角-full药丸形状