Communitygithub.com

kennedys0/企业级-数据优先设计风格

在用户明确选择此风格时,为其前端和 UI 工作应用企业级/数据优先的设计风格。提供排版、色彩、布局、组件、交互、动效、文案和质量门禁。不强制用于不相关的工作。

企业级-数据优先设计风格 是什么?

该技能(`enterprise` 风格包)为 AI 编码代理(如 Claude Code、Cursor、Codex)提供了一套完整的企业级、数据优先的 UI 设计指南。其核心目标是在用户明确选择此风格后,帮助生成信息密集、专业且高效的操作型界面,例如 B2B SaaS 平台、云监控控制台和金融交易门户。技能详细定义了排版(如使用 Inter 字体、tabular-nums 数字)、色彩(提供明暗两种模式的精确色板)、布局(32-40px 的紧凑表格行高)、组件(如带粘性表头、分页和语义状态标签的数据表格)以及交互(如 `⌘K` 快捷键)的规范。该技能通过强制性的“企业数据保真度门禁”来保证质量,要求界面首屏必须看起来像一个密集的数据驾驶舱,而非消费级的营销页面。它包含了明确的反套路(anti-slop)规则,禁止虚假数据和 decorative 元素,并强调内容的真实性与可扫描性。同时,该技能也提供了可选的动画建议和 CSS 变量令牌,方便开发者快速实施。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kennedys0/taste-engine/tree/HEAD/optional-standalone-skills/taste-style-enterprise

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

仅当用户明确选择或确认的项目配置指定时,才使用此技能。对于未经解释的新 UI 请求,请使用样式选择器(例如样式选择器)来决定用户的品味,而非在此处自行决定。现有的品牌、无障碍和用户覆盖规则高于以下所有示例。以下样式指南并非允许在样式选择前就开始编写 UI 代码。

样式包:企业级 / 数据优先

ID: enterprise 特征: 信息密集的操作控制台、表格数据对齐、语义状态标记、键盘生产力和可靠的工作流架构。

这是一个样式包,而非强制默认值。仅在明确选择或确认适用项目样式后加载。项目说明可以覆盖个别选择。保留无障碍、实用性和品牌约束。字体为建议,非必需依赖项。一个包含 3 个虚假 KPI 数字和装饰性饼图的消费者卡片模板不符合企业级数据优先风格。

适用场景 / 权衡

  • 适用于: B2B SaaS 平台、运营管理控制台、云基础设施监控器、金融科技和交易门户、物流和供应链后端以及数据密集型生产力工具。
  • 谨慎使用于: 消费者营销登陆页面,其中叙事节奏和情感视觉品牌优先于密集的表格扫描。
  • 参考方向:
    • 现代云控制台(Linear / Stripe / Vercel 风格): 清晰的石板色中性基础(浅色 #0F1117 / 深色 #F9FAFB),紧凑的 36px 表格行,表格数字(font-variant-numeric: tabular-nums),细微的分隔线(#E5E7EB 或 #262933)和语义状态标记。
    • 高密度运营台: 干净的白色桌面,紧凑的 32px 行,带有键盘快捷键提示的搜索过滤栏(⌘K),粘性表格标题和响应式主从面板。

企业数据保真度门禁 — 强制

在调用企业级页面完成之前,打开时的视口必须明显看起来像一个功能性、密集且专业的数据驾驶舱。 如果用户选择了此样式,一个带有装饰性指标卡片和零可扫描表格结构的大型消费者模板将直接被判定为失败。

成功的企业数据优先实现应展示所有以下特性:

  1. 信息密集的表格架构: 核心记录和实体应以结构化的、可扫描的数据表或紧凑的主从列表形式呈现,并具有一致的行高 (32px–40px) 和明确的列标题。
  2. 表格数字与右对齐: 所有数字、金额、指标和时间戳必须强制使用 font-variant-numeric: tabular-nums。数字列严格右对齐;文本列左对齐。
  3. 具有可读对比度的语义状态标记: 状态指示器(健康、降级、失败、待处理)应使用校准过的语义状态药丸,在柔和着色的背景上使用深色可访问文本(例如 成功:背景 #ECFDF5,文本 #065F46,满足 WCAG AA 4.5:1 对比度)。
  4. 生产力暗示与快捷键: 搜索栏应具有键盘触发提示(⌘K 或 /),表格标题应具有排序指示器(▲/▼),选择记录后应出现批量操作栏。
  5. 真实状态完整性: 表格应包括真实的分页栏(显示 正在显示 1–25 项,共 1,420 项)、响应式水平滚动处理以及专用的空/加载/错误状态。

首视口测试: 在桌面截图中,识别密集数据表、可排序标题、过滤栏和表格数字,无需阅读页面标题。如果它看起来像一个有大型空白卡片的消费者营销页面,则应将其重新构建为一个功能性的操作视图。

明确的企业级密度例外 — 数据表是必需的

企业级特定覆盖: 通用的反套路警告(反对仪表板混乱或多个指标框)绝不能被解释为在这里隐藏数据表、过滤工具栏或状态指示器的授权。在真正的企业软件(Stripe, Datadog, AWS, Bloomberg)中,密集可扫描的数据是主要的界面要求。

  • 允许的企业级处理: 紧凑的数据表 (32px–40px 行高)、多列元数据网格、过滤工具栏、带键盘快捷键徽章的搜索栏、批量操作栏和语义状态药丸。
  • 反套路边界: 切勿编造虚假的收入指标、没有坐标轴的装饰性迷你走势图或传达零运营数据的动画饼图。真实的数据字段、空状态和真实的状态指示器是强制性的。
  • 反套路解释: 通过可扫描性、信息密度和任务效率来评估企业级布局,而不是试图剥离必要的操作控件。能够加速工作的表格密度是真正的设计。

排版与字体

中性、高度清晰易读的 UI 无衬线字体:Inter, Source Sans 3, SF Pro 或系统无衬线字体。用于标识符和哈希的等宽字体:JetBrains Mono 或系统等宽字体。正文和表格单元格:13–14 px(行高 1.45);列标题:12 px 大写(字重 600,字间距 0.05em);指标数字:20–28 px 并使用表格数字。

色彩方向

  • 浅色模式(现代云控制台):
    • 画布底色: 柔和中性石板色 (#F9FAFB)。
    • 表面 / 表格: 纯白色 (#FFFFFF)。
    • 主要墨色 / 排版: 深石板色 (#111827)。
    • 次要 / 弱化文本: 平衡石板色 (#6B7280)。
    • 细线边框: #E5E7EB。
    • 行悬停高亮: #F8FAFC。
  • 深色模式(云控制台):
    • 画布底色: 深石板色 (#0F1117)。
    • 表面 / 表格: 提升木炭色 (#161922)。
    • 主要墨色 / 排版: 清晰石板色 (#F9FAFB)。
    • 次要 / 弱化文本: 平衡灰色 (#9CA3AF)。
    • 细线边框: #232733。
    • 行悬停高亮: #1F2430。
  • 主要品牌色: 深企业蓝(浅色 #2563EB / 深色 #3B82F6)。
  • 语义状态标记(两种模式均校准至 WCAG AA):
    • 成功(健康): 浅色:文本 #065F46 背景 #ECFDF5(边框 #A7F3D0);深色:文本 #34D399 背景 rgba(16, 185, 129, 0.15)(边框 rgba(16, 185, 129, 0.35))。
    • 警告(降级): 浅色:文本 #92400E 背景 #FEF3C7(边框 #FDE68A);深色:文本 #FBBF24 背景 rgba(245, 158, 11, 0.15)(边框 rgba(245, 158, 11, 0.35))。
    • 错误(失败): 浅色:文本 #991B1B 背景 #FEE2E2(边框 #FECACA);深色:文本 #F87171 背景 rgba(239, 68, 68, 0.15)(边框 rgba(239, 68, 68, 0.35))。
    • 中性(待处理 / 非活动): 浅色:文本 #374151 背景 #F3F4F6(边框 #E5E7EB);深色:文本 #9CA3AF 背景 rgba(156, 163, 175, 0.12)(边框 rgba(156, 163, 175, 0.25))。
  • 主题耦合规则: 画布、表格、文本墨色和语义徽章必须同步适应。切勿在浅色表格上显示深色模式文本,或在深色控制台背景上显示浅色模式的深绿色文本。

布局与几何

基于 4px 基础节奏,密度增量为 8/12/16px;细微的 4px–6px 圆角;一致的表格行高(默认 36px,紧凑型 32px)。主从布局在桌面上灵活拆分,在移动设备上整齐堆叠。

表面、深度与纹理

表面干净、平坦,由边框驱动。阴影严格保留给浮动菜单、工具提示和模态对话框(0 4px 12px rgba(0, 0, 0, 0.08))。数据网格上无装饰性玻璃或粘土效果。

组件结构与交互

  • 数据表格: 粘性标题行,斑马纹或行悬停高亮 (#F8FAFC),数字列右对齐,文本左对齐。
  • 过滤与搜索栏: 集成搜索输入框并带有 ⌘K 徽章、多选过滤下拉菜单和日期范围选择器。
  • 语义状态徽章: 带有彩色指示点且文本可访问的紧凑圆角药丸。
  • 分页底栏: 当前页面范围、每页条数选择器和上/下一页按钮。

动效

最小的 100–140 ms 线性反馈过渡。优先考虑坚如磐石的稳定性和数据刷新或表格过滤时的零动效。

可选的 Anime.js v4 配方

  • 动效决策: 数据更新时微妙的行高亮闪烁或抽屉滑动过渡。
  • 起始时长: 120ms(0 = 立即);根据任务和用户偏好调整。
  • 避免: 装饰性页面过渡、弹跳图表、快速查询时的旋转加载器。
  • 依赖: 默认使用 CSS/原生。当 .taste-engine/references/motion-engine.md 可用时遵循其指引;独立技能遵循上述减少动效和无装饰性循环原则。

UI 文案与微文案

客观、精确且便于审计。示例:“找到 1,420 条记录”、“按状态筛选”、“导出 CSV”、“上次更新于 2 分钟前”。避免模糊的对话式 AI 口号。

入门令牌(建议,非完整主题)

令牌浅色模式默认值深色模式默认值
--taste-ent-bg#f9fafb#0f1117
--taste-ent-surface#ffffff#161922
--taste-ent-ink#111827#f9fafb
--taste-ent-muted#6b7280#9ca3af
--taste-ent-border1px solid #e5e7eb1px solid #232733
--taste-ent-radius6px6px
--taste-ent-row-height36px36px
--taste-ent-accent#2563eb#3b82f6
--taste-ent-font-bodyInter, -apple-system, system-ui, sans-serifInter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration100ms100ms

令牌代表一个方向,并非保证适用于每个调色板/平台的直接复制粘贴。在项目级别定义 --taste-ent-*,确保色彩对比度,并通过主题令牌进行适配,而不是分散使用字面量值。

英雄区构成(完整首视口)

当面向公众的 portfolio/landing/homepage 有英雄区时: 使用一个视口高度的页眉+英雄区组合。基础高度为 min-height: 100svh,并回退至 100vh,仅在页眉处于正常文档流中时减去页眉的实际高度;让英雄区扩展以适应无障碍需求和短屏移动设备。请勿将此应用于私有仪表板或其他任务屏幕;用户的直接覆盖优先。样式特定方向: 用一个工作的控制台摘要锚定打开视图:关键过滤栏、实时数据概览和立即执行的操作。避免消费者卡片膨胀和空白间隙。请参阅路由器的 references/hero-layout.md(如果存在)。独立使用遵循相同的响应式和反套路原则。

样式特定质量门禁

  • 应做: 验证表格数字(tabular-nums)和数字数据的右对齐;确保语义徽章在浅色和深色模式下均满足 WCAG AA 对比度;提供完整的分页和搜索过滤栏;测试粘性表格标题;验证浅色/深色模式切换,以便所有行、边框和文本同步翻转。
  • 不应做: 不要用消费者卡片网格替换数据表;避免未按比例的装饰性走势图;不要编造没有后端对应数据的虚假指标数字;避免主题对比冲突,例如深色背景上的深绿色文本或深色表格行上的深色文本。
  • 确认桌面和移动端的一致性;可见的键盘焦点 (:focus-visible);加载、空、禁用、错误和成功状态;减少动效行为 (prefers-reduced-motion)。
  • 不要将样式特定的假设注入无关项目。在组合样式时,明确命名主要样式和借用的特性。

通用反套路门禁(自包含)

每个元素都必须有存在的理由。内容优先于装饰。不要装饰不确定性。 不要编造余额、指标、推荐语、用户、Logo、批准、已验证/在线/实时状态、虚假活动或成功确认;使用诚实的空/加载/错误状态代替。演示数据仅在请求并明确标记时允许。

不要添加装饰性的卡片内嵌卡片层级:嵌套的表面必须代表一个独特的交互或信息边界。避免自动生成的 3 功能网格、4 统计仪表板、虚假的英雄声明、无目的的图表、徽章/芯片/图标刷屏、无关的装饰艺术以及仅仅为了填充视口的随机循环。优先使用排版、间距、对齐和分隔线进行分组。地位平等的内容需要有意的视觉平衡。

反套路文案: 没有通用的“释放你的潜力”、“体验未来”、“提升你的工作流程”、“无缝”等表述或其翻译等效物。标题必须传达实际内容,CTA 必须命名操作,空/错误/成功文本必须描述真实状态和后续步骤。避免虚假的紧迫感、编造的计数、模糊的 AI 宣传、多余的 emoji 和不可访问的全大写文本墙。根据此风格和用户语言调整措辞,但不要改变事实。

主题和模式对比完整性: 当用户请求深色模式或浅色模式(或构建主题切换器)时,背景和前景颜色必须在所有表面、文本、边框、输入和语义徽章上同步翻转。绝不允许黑色文本在深色背景上、白色文本在白色背景上或不可读的低对比度状态药丸。所有状态必须满足 WCAG AA 对比度(正文/正常文本至少 4.5:1,大标题和交互边界至少 3:1)。

响应式和动效: 有意地设计移动端布局,检查长标签、焦点状态和可访问对比度;不要为了追求时髦布局而裁剪文本。默认静态;动效用于有意义的交互,尊重减少动效偏好,避免没有真实状态的弹跳/浮动/脉冲装饰。

关键/高优先级发现阻止完成: 伪造的状态/数据、损坏的操作、不可访问/裁剪的控件、误导性文案、主题对比冲突或重大移动端失败必须修复。报告实际验证的内容;不要声明未执行的测试。

不是美学否决: 表现力丰富的颜色、阴影、渐变、卡片布局或装饰性处理,当它们是所选美学的有意部分并通过可用性检查时,是合理的。不要为了追求空泛的“简洁”而错误地强制应用此技能的反套路规则。

样式特定质量门禁(补充)

  • 应做: 提供完整的分页栏、可排序的表格标题、可操作的过滤器和可访问的键盘快捷键。在数据更新期间使用规律的行高和稳定的布局。
  • 应做: 在表格中优先使用 tabular-nums 确保数字对齐。将 status 徽章用于非二进制状态(失败、降级、健康、待处理)。
  • 不应做: 不要用“仪表板指标卡片”替换表格行。不要用难以阅读的纯色状态徽章替换语义状态药丸。
  • 应考虑: 多选过滤、内联搜索、可自定义的列宽和行列固定的复杂表格。

不适用此样式时的行为

此样式包不会自动激活。除非用户已明确选择 enterprise 风格,否则代理不应应用这些颜色、排版或布局约束。不知道用户偏好的情况下,回退到通用响应式、基于文档的语义 UI。当结合多个样式时,特别是在交叉风格项目中,记录哪些规则来自此包。

无障碍指南 (a11y)

  • 确保所有状态徽章和指示器在浅色和深色模式下均满足 WCAG AA 对比度。
  • 在所有交互元素上提供可见的焦点指示器。
  • 支持键盘导航:TAB 键遍历表格行,Space/Enter 键选择,方向键导航。
  • 不要在数据表中禁用文本缩放或缩放功能。
  • 遵守 prefers-reduced-motion:禁用装饰性动态效果。
  • 确保表格标题在语义上与数据单元格关联(例如,使用 <th> 和 scope="col" 或类似属性)。

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

kennedys0/taste-engine

Automatically routes visual UI work to a user-chosen aesthetic and applies SEO readiness to public-facing websites. Use whenever a user asks to build, create, design, or redesign a website, portfolio, landing page, dashboard, web app, mobile app, UI/UX screen, frontend, or component, or add/refine micro-interactions or full-screen hero sections (including Indonesian prompts such as "build a portfolio website"). Before writing UI code, ask ONE style question and stop if no visual style or approved project design system is specified. If the prompt already names an aesthetic such as skeuomorphism/skeumorphsm, claymorphism, glassmorphism, brutalism, neo-brutalism, minimalism, bento, or editorial, load its bundled style pack immediately and proceed WITHOUT asking again. Preserve established styles for minor fixes; for SEO-only tasks, load the SEO module without a visual style question; skip unrelated non-visual work.

kennedys0/taste-style-bento

Apply Bento Grid design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-brutalism

Apply Brutalism design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-claymorphism

Apply Claymorphism design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-glassmorphism

Apply Glassmorphism design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-neo-brutalism

Apply Neo-brutalism design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-retro-terminal

Apply Retro Terminal design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-skeuomorphism

Apply Skeuomorphism design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

kennedys0/taste-style-swiss-editorial

Apply Swiss / Editorial design style to user-selected frontend and UI work. Use only when the user explicitly chooses this style. Provides typography, color, layout, components, interactions, motion, copy and quality gates. Do not impose on unrelated work.

相关技能