用途
minoan-frontend-design 是一个前端设计技能,目标是构建“明显经过设计、而非生成”的前端界面——网站、落地页、仪表盘、React 组件、HTML/CSS 布局等。它要求每个界面都像某位具体设计师为某个具体场景做出的具体选择。
主要能力
- 上下文协议:设计前检查项目根目录的 .design-context.md。若不存在且是新项目,运行 /shape 获取完整设计简报,或直接询问用户:谁使用它、应该感觉像什么、不应该像什么。不要从代码推断受众。
- 创意方向:编码前先命名概念方向(如“Bloomberg Terminal”“医学期刊”“zine 拼贴”“VHS 梦境”“情报档案”),让名称锚定后续每个决策。
- 排版:排版承载设计的声音。跳过 Arial、Inter、Roboto、Space Grotesk、系统字体栈等默认字体;也警惕 Fraunces、Playfair Display、DM Sans 等“第二反射”字体。建议深入字体厂牌目录(Pangram Pangram、Velvetyne、ABC Dinamo、Future Fonts、Klim)寻找轮廓可辨识的字体。使用戏剧性字号跳跃、字重对比、大写字母、字距等。
- 色彩:调色板应明确立场——大胆饱和、情绪克制或高对比极简,绝不怯懦。以主导色领衔,用锐利点缀色强调。避免纯黑,使用丰富的近黑色(zinc-950、深海军蓝)。使用 OKLCH 而非 HSL。根据观看场景推导主题(交易终端→暗色,医院门户→亮色等)。
- 动效:优先纯 CSS 动画,内容默认可见再动画。错开的页面加载揭示、滚动触发动画和悬停状态应带来惊喜。文本动画可参考 references/text-animation-catalog.md 中的 24 种命名效果。
- 空间构图:非预期布局、不对称、重叠与 z 深度、对角线流动、破格元素、戏剧性尺度跳跃、全出血时刻、分屏构图、不同尺寸的 Bento 网格。仪表盘和数据密集界面应最大化首屏信息,用细边框和负空间分隔,数字使用等宽字体。
- 氛围与纹理:创建深度和情绪,而非默认纯色。可用渐变网格、噪点颗粒叠加、几何图案、玻璃拟态、阴影、视差深度、clip-path 形状、印刷纹理(半色调、双色调、孔版印刷)、镂空排版、手绘 SVG 点缀、生成式图案背景。生成贴合场景的自定义 SVG 插图,绝不用占位图。
- 应拒绝的内容:通用 AI 美学——过度使用的字体、陈词滥调的色彩方案(白底紫色渐变、霓虹外发光)、可预测的居中布局、通用三等分卡片功能行、过多渐变文字、通用占位内容(John Doe、99.99%、“Elevate your workflow”)、emoji 或 SVG 蛋形头像占位符、将核心内容推到首屏以下的 hero 区、不完整实现。
- 两条绝对禁令:卡片/标注/警报上,绝不使用宽度 > 1px 的 border-left 或 border-right 作为强调条纹;绝不将 background-clip: text 与任何渐变背景组合使用。
使用方式
该技能以 Claude Code 技能形式提供,安装后可在项目中使用。设计前检查 .design-context.md 或运行 /shape。构建后按顺序运行精炼流程:
- Audit(或 /design-audit):对照 references/anti-patterns.md 和领域参考检查,从 a11y、性能、响应式、主题、反模式五个维度各 0-4 分评分,按 references/heuristics-scoring.md 标记 P0-P3 问题。
- Critique(或 /design-critique):使用 Nielsen 10 项启发式(各 0-4 分,满分 40)进行 UX 评审;通过 references/cognitive-load.md 评估认知负荷;用 references/personas.md 中 2-3 个人物角色测试;运行 AI Slop 测试。
- Normalize:若项目根目录存在 .design-context.md 或 DESIGN.md,对齐项目设计系统,将其令牌视为材料而非配方。
- Harden:测试边界情况——长文本溢出、RTL、空状态、错误状态、i18n、键盘导航。
- Polish(或 /design-polish):最终打磨——对齐、间距、交互状态、过渡、微文案。
适用场景
适用于需要独特视觉识别的前端项目:网站、落地页、仪表盘、React 组件、HTML/CSS 布局、编辑式 hero 区等。特别适合希望避免通用 AI 生成美学的场景。
限制
- 该技能强调设计判断和美学方向,不提供具体收费、价格或平台信息(资料未提供)。
- 部分参考文档路径和命令(如 /shape、/design-audit、/design-critique、/design-polish)依赖特定技能环境。
- 资料未提供安装命令、版本要求或兼容性细节。
- 资料未提供实际效果保证或性能数据。