high-end-visual-design
设计高端机构级品质的界面
大多数 AI 工具生成的 UI 设计千篇一律、缺乏精致感。本技能提供精确的设计规则，涵盖字体、间距、阴影、卡片结构和动画，助你打造看起来出自高端设计机构的界面。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“high-end-visual-design”。 Create a hero section for an AI startup with dark glassmorphism style
预期结果:
- 顶部是一个玻璃拟态胶囊形状的悬浮导航栏，带有宽裕的边距。首屏区域采用深邃的 OLED 黑色背景，搭配微妙的紫色径向渐变。标题使用大号的 Grotesk 字体，上方有一个标签徽章。下方是一个带有嵌套尾部箭头图标的 CTA 按钮。整个区域采用充足的垂直内边距，交互元素上使用平滑的 cubic-bezier 过渡动画。
正在使用“high-end-visual-design”。 Design a card component for a premium dashboard
预期结果:
- 卡片采用双边框模式，外层容器使用 1.5 rem 的圆角和微妙的边框装饰。内层核心区域有独立的背景色，带有内嵌高亮阴影和计算得出的更小圆角，形成同心曲线效果。悬停状态包括微妙的缩放和对角线图标位移。卡片置于深色背景上，带有环境漫反射阴影。
安全审计
安全The static analyzer flagged 107 patterns, but all are false positives. The 94 external_commands detections are markdown inline code backticks (e.g., `Vanguard_UI_Architect`, `backdrop-blur-2xl`), not shell execution. The 13 high-risk cryptographic detections are CSS hex color values (e.g., #050505, #FDFBF7) misidentified as weak algorithms. The 4 system reconnaissance detections are triggered by dollar signs in prices ($150k) and unrelated text. The file contains only markdown design guidance with no executable code, no network access, and no filesystem operations. Safe to publish.
质量评分
你能构建什么
构建高端落地页
生成具有高转化率的落地页，包含玻璃拟态效果、交错动画和不对称 Bento 网格布局。
重新设计现有仪表盘
将基础管理仪表盘转变为机构级品质的界面，采用嵌套卡片架构和流畅的悬停交互。
创建作品集网站
构建编辑风格的作品集，具有超大字号、柔和阴影和电影级滚动动画。
试试这些提示
Create a hero section for a SaaS product using the ethereal glass archetype with an asymmetric bento layout.
Build a three-tier pricing card section with double-bezel nested architecture and magnetic hover effects on the primary call-to-action button.
Design a floating pill-shaped navigation bar with a morphing hamburger menu that expands into a full-screen overlay with staggered link reveals.
Create a testimonial section using the editorial luxury archetype with a z-axis cascade layout, serif typography, and scroll-triggered fade-up animations.
最佳实践
- 在生成代码前，始终先选择一个风格原型和一个布局原型，以确保设计语言的一致性
- 所有动画使用 transform 和 opacity 属性，以保持 GPU 性能并避免触发布局重排
- 仅在固定或粘性元素上使用 backdrop-blur 滤镜，绝不要用于滚动容器
避免
- 在高端设计中绝不要使用 Inter、Roboto 或 Arial 等默认字体
- 绝不要使用 linear 或 ease-in-out 过渡，这会导致动画平淡无生气
- 绝不要使用 window.scroll 事件监听器来实现滚动动画，因为这会引发持续重排并损害移动端性能
常见问题
本技能推荐哪些字体？
本技能是否适用于原生 HTML 和 CSS？
我可以在移动优先项目中使用本技能吗？
支持哪些动画库？
本技能是生成代码还是仅提供设计规则？
使用本技能如何让设计看起来高端？
开发者详情
文件结构
📄 SKILL.md