minoan-frontend-design

构建一眼就能看出是经过精心设计、而非自动生成的前端界面。每个界面都应让人感觉是某位设计师针对特定情境做出了一系列具体选择。

上下文协议

开始设计前，检查项目根目录中是否有 .design-context.md。如果没有，而且这是一个新项目，请运行 /shape 获取完整的设计简报，或者直接询问用户：谁会使用它？它应该给人什么感觉？它绝不应该像什么？不要从代码推断受众——代码能告诉你做出了什么，却无法告诉你它是为谁而做。

创意方向

编码前，先为概念方向命名——“Bloomberg Terminal”“医学期刊”“拼贴小志”“VHS 梦境”“情报档案”。这个名称将为之后的每个设计决策定下基调。

每个美学选择都要根植于主题本身。爵士俱乐部的网站应该有烟雾与黄铜的气息。儿童阅读应用应该像翻开一本立体书。金融科技仪表盘应该像控制室，而不是玩具。设计必须如此贴合情境，以至于把这种美学移植到另一个项目上会显得格格不入。

坚定地选择一个方向：极致简约、繁复混乱、奢华精致、低保真小志、幽暗阴郁、编辑／杂志风、粗野／原始、复古未来主义、装饰艺术／几何、电影感／宽银幕、数据密集／科学风，或者一个完全未命名的方向。最终设计应该独一无二。

每个设计都需要一个足够鲜明的元素，让人会向朋友描述它。找到这个元素，并让其他一切为它服务。

字体排印

字体排印承载着设计的声音——它应当拥有能让人感受到的分量。默认字体代表默认思维：避开 Arial、Inter、Roboto、Space Grotesk 和系统字体栈。展示字体应当令人印象深刻，正文字体则应清晰易读、精致优雅。像演员在一幕戏中那样搭配它们——张力能塑造个性。充分运用字体表现力：巨大的字号跳跃、字重对比、用大写字母彰显权威、用宽松的字距营造优雅。通过字重和颜色控制层级，而不只是依靠大小。

巨大的编辑风格字体——6xl-9xl 的超大展示字、内容背后的幽灵数字、字体删除线——能够彰显权威。每个设计中至少要有一个字体设计瞬间，能够表达态度，而不仅仅是整理信息。

把 Inter、Roboto、Arial、Open Sans、Lato 和 Montserrat 视为模型下意识会选用的默认字体——完全避开它们。Fraunces、Playfair Display、DM Sans 和 Space Grotesk 等字体确实制作精良，但它们已经成了第二种条件反射：模型在被要求避开默认选项时会转而使用的字体。目标是找到一种只属于这个项目的字体——深入探索字体厂商目录（Pangram Pangram、Velvetyne、ABC Dinamo、Future Fonts、Klim），直到找到一种轮廓鲜明、一眼可辨的字体。

色彩

色彩决定空间的温度。调色板应明确表态：大胆而饱和、幽暗而克制，或高对比且简约——绝不犹豫不决，也不模棱两可。以一种主导色领衔，用醒目的强调色点缀。一个出其不意的强调色，胜过一套平衡的五色方案。绝不使用纯黑——纯黑会产生刺眼的对比，使层次变得扁平。使用丰富的近黑色（zinc-950、深海军蓝）。让阴影带有背景色调。温暖的编辑风格配色（炭灰色上的奶油色、羊皮纸色、琥珀色）和深色模式一样大胆——如果情境需要温暖，就不要默认选择深色。适合深色主题时，就彻底贯彻：以一种独特的强调色（酸性黄、生物荧光青、深玫瑰色）搭配浓郁的近黑色。

使用 OKLCH，而不是 HSL——它在感知上更加均匀。让中性色带有品牌色调（即使色度只有 0.005）。根据使用情境推导主题：交易终端 → 深色，医院门户 → 浅色，儿童应用 → 浅色，晚上 9 点的摩托车论坛 → 深色。不要默认选择任一方向——正确的主题应当符合真实用户在真实情境中的需求。

动效

优先使用纯 CSS 动画——在截图和静态渲染中，由 JavaScript 类切换控制的隐藏内容不可见。从可见状态开始，再添加动画。页面加载时依次显现，比零散的微交互更能带来惊喜。滚动触发的动画和悬停状态应带来意外之喜。对于文本专属的动画模式（标题显现、编辑式渐进显现、文本切换），请参阅 references/text-animation-catalog.md，其中列出了 24 种命名效果及其精确时间规格。

空间构图

采用出人意料的布局、不对称设计、重叠与 Z 轴深度、对角线流动、打破网格的元素、戏剧性的尺寸变化、全出血效果、分屏构图，以及大小各异的 Bento 网格。留出充足的负空间，或采用受控的紧凑布局——选定一种并贯彻到底，不要停留在两者之间。居中 Hero 区块是默认选择——用左对齐文本、不对称分栏或编辑式留白打破这一惯例。只有在层级关系需要通过阴影来传达时才使用卡片，不要把卡片当作包罗万象的通用容器。

对于仪表板和数据密集型界面，要尽量在首屏展示更多信息。将指标、图表和控件紧凑地排列在网格中，并用细边框和负空间分隔，而不是用卡片容器。所有数字都使用等宽字体。把仪表板视为指挥中心，而不是画廊。

氛围与纹理

营造深度与氛围，不要默认使用平面纯色。背景是画布，而不是墙面。根据场景运用效果：渐变网格、噪点和颗粒叠加、几何图案、带内部折射边框的玻璃拟态、强烈或柔和的阴影、视差深度、裁切路径形状、印刷风格纹理（半色调、双色调、risograph）、反白文字、手绘 SVG 装饰元素、生成式图案背景。

创作契合场景的定制 SVG 插画——绝不使用占位图片。拉面店配手绘的碗，海洋非营利组织配生物荧光粒子。插画本身就是设计，而非装饰。

应当避免的设计

绝不采用通用 AI 风格：过度使用的字体（Inter、Roboto、Arial、Space Grotesk、系统字体堆栈）、陈词滥调的配色方案（白底紫色渐变、霓虹外发光）、一眼可预测的居中布局、通用的三等分卡片功能区、过量的渐变文字、通用占位内容（John Doe、99.99%、“提升你的工作流”）、表情符号或 SVG 鸡蛋头像占位图、把核心内容挤到首屏以下的 Hero 区块，或不完整的实现。 应改用：立场鲜明的独特字体、大胆且坚定的配色、令人惊喜的不对称布局、扎根于具体场景的定制细节，以及带有创意名称和自然数据的真实内容（47.2%，而非 50%）。需要照片时，请使用图像服务或生成有意义的视觉内容——绝不要使用空容器。满足每项需求，每个选择都应经过深思熟虑。

不要满足于第一个看起来不错的想法。模型的默认输出是其训练数据的平均值——要真正与众不同，就必须超越显而易见的选择。

以下两种 CSS 模式绝对禁止用于卡片、提示框和警告框：

• 在卡片／提示框／警告框中，绝不要使用宽度大于 1px 的 border-left: 或 border-right: 作为强调色条（这是最常见、最滥用的 AI 设计标志之一——请改用背景色调、完整边框，或完全不设指示元素）
• 绝不要将 background-clip: text 与任何渐变背景搭配使用（渐变文字只是装饰，不具实际意义——请使用纯色，并通过字重或字号来强调）

Craft

让实现复杂度与审美愿景相匹配。极繁主义设计需要精雕细琢的代码。极简主义设计需要近乎苛刻的克制。两者都要求对间距、对齐和一致性进行像素级把控。满足提示词要求的每项功能——完整实现是底线，而非上限。完整且大胆的实现，胜过不完整的杰作，也胜过完整却乏味的作品。

Claude 有能力创作非凡、值得获奖的作品。看到这个界面的人，应该能感受到某种意想不到的情绪。不要有所保留——展现当每个审美选择都经过深思熟虑、每个细节都臻于完善、愿景得到不打折扣的实现时，真正的可能性。

构建后的 QA 工作流

构建完成后，按以下顺序进行优化检查：

1. 审查（或 /design-audit）：对照 references/anti-patterns.md 和下方领域专属的优秀参考进行检查。为 5 个维度评分（可访问性、性能、响应式、主题、反模式），每项 0–4 分。根据 references/heuristics-scoring.md 将问题标记为 P0–P3。
2. 评议（或 /design-critique）：使用 references/heuristics-scoring.md 进行 UX 评审（Nielsen 的 10 项启发式原则，每项 0–4 分，总分 /40）。依据 references/cognitive-load.md 评估认知负荷（8 项检查清单）。使用 references/personas.md 中的 2–3 个用户画像进行测试。运行 AI 套模板测试：如果有人说“这是 AI 做的”，别人会立刻相信吗？如果会，就进行修改。
3. 规范化：如果项目根目录中存在 .design-context.md 或 DESIGN.md，则与项目设计系统保持一致。将其中的设计令牌（颜色、字体、间距）视为素材，而非配方——以上所述的创意方向仍然优先。
4. 加固：测试边缘情况——长文本溢出、RTL、空状态、错误状态、i18n、键盘导航。
5. 润色（或 /design-polish）：进行最后一轮检查——对齐、间距、交互状态、过渡效果、微文案。确保每个像素都有其用意。

参考资料

按需查阅 references/：

工程：vercel-web-interface-guidelines.md、design-system-checklist.md。 技巧：creative-arsenal.md、design-dials.md、editorial-patterns.md（经评估测试）、astryx-hero.md（深度视差编辑式 Hero + 流体 DOM 同级链接）。着色器交叉参考：~/.claude/skills/rocaille-shader/references/fluid-dom.md（在 DOM 区块上实现指针响应式流体效果）。 Stripe（浅色模式）：stripe-design-tokens.md、stripe-component-patterns.md、stripe-signature-techniques.md。 Mintlify（深色优先文档）：mintlify-design-tokens.md、mintlify-component-patterns.md、mintlify-signature-techniques.md。 Composio（深色开发工具，单色镀铬效果 + 故障艺术）：composio-design-tokens.md、composio-component-patterns.md、composio-signature-techniques.md。 反模式：anti-patterns.md（源自 Impeccable v3.1.0 的精简检查清单，包含品牌语气规范）。 评审与评分：heuristics-scoring.md（Nielsen 的 10 项原则，P0-P3 严重性）、cognitive-load.md（8 项检查清单，工作记忆规则）、personas.md（5 种原型 + 项目专属原型）。 设计系统范例：linear-design-md.md（DESIGN.md 格式——来自 Linear 的设计令牌、组件、响应式规则）。 进阶技巧：sunny-mode-technique.md（@property 调色板过渡、混合模式叠加、物理学彩蛋）。 Impeccable 领域参考资料（代码示例 + 实现模式）：impeccable-typography.md（字体加载、OpenType、比例）、impeccable-color-contrast.md（OKLCH、深色模式令牌）、impeccable-spatial.md（容器查询、视觉对齐）、impeccable-motion.md（cubic-bezier 值、交错公式、减少动态效果）、impeccable-interaction.md（Popover API、roving tabindex、对话框）、impeccable-responsive.md（指针/悬停查询、安全区域、srcset）、impeccable-ux-writing.md（错误模板、语气矩阵）。 色彩科学（来自 meodai/skill.color-expert）：color-science-deep.md（色彩空间决策矩阵、HSL 的局限、色度与饱和度、以特征为先的和谐配色、无障碍统计、颜料混合、命名系统）、color-tools-palette.md（调色板生成算法、代码库、分析/检查、CSS Color 4/5、语义令牌架构、生成艺术方法）。 落地页组件：marquee-component.md（带动画、无障碍支持和响应式速度的无限 Logo 滚动条）、gallery-component.md（包含混合尺寸、吸附和灯箱的水平滚动展示区）、research-card-component.md（带元数据、内嵌数据可视化和分类标签的文章卡片）、article-layout.md（带粘性目录侧栏、块引用和引文系统的长篇内容布局）、inline-dataviz.md（纯 CSS 条形图、统计数据提示、动画计数器、迷你图、对比行）。 组件研究：调用 component-gallery。