用途:本技能用于引导 AI 辅助的 UI 生成走向企业级、有意图的设计,而非产出千篇一律的通用界面。适用于构建用户界面或前端组件、创建仪表盘或管理后台、设计企业软件或 SaaS 应用、生成带样式的前端代码、用户寻求设计帮助或 UI 改进,以及任何需要专业精致样式的项目。
主要能力:要求编码前先承诺一个设计方向,可选的人格包括:精密与密集(紧凑单色技术风,适合开发者工具)、温暖与亲和(宽松间距、柔和阴影,适合消费级 SaaS)、精致与信任(冷色调、层次深度,适合企业金融)、大胆与清晰(高对比、戏剧性留白,适合现代仪表盘)、实用与功能(低饱和配色、功能密集,适合 GitHub 风格工具)、数据与分析(图表优化、数字优先,适合分析平台)。
核心工艺原则:4px 网格统领所有间距(4px → 8px → 12px → 16px → 24px → 32px);对称内边距为强制要求,除非内容形成自然视觉平衡;深度策略须有意图且一致,可选纯边框、单一细微阴影、分层阴影或表面色块偏移;排版层级标题 600 字重配紧凑字距,正文 400–500,范围 11px 至 32px,等宽字体仅用于数据;卡片布局内部可变化但表面处理保持一致。
关键细节:使用 Phosphor Icons,避免原生表单元素;动画 150–250ms 配 cubic-bezier 缓动,不使用弹跳;颜色仅用于传达含义(状态、操作、错误、成功);深色模式需以边框而非阴影强调;包含导航上下文(侧边栏、面包屑或活动状态)。
限制:资料未提供安装命令、收费方式、支持平台及具体使用步骤,相关细节暂未提供。本技能基于 Dammyjay93 的 claude-design-skill,采用 MIT 许可。