Communitygithub.com

kennedys0/taste-style-claymorphism

在用户明确选择时，将黏土风格（Claymorphism）设计样式应用于前端和UI作品。提供排版、色彩、布局、组件、交互动效、文案和质量门禁。不将其强加于无关工作上。

taste-style-claymorphism 是什么？

这是一个名为“黏土风格（Claymorphism）样式包”的AI Agent技能。该技能为开发者提供了一套完整、可实施的UI样式指南，用于在用户明确选择或项目配置指定后，创建具有雕塑感、触感和物理体积感的黏土风格界面。它详细定义了色彩方案（如饱和紫色黏土、浅色瓷器黏土）、布局几何（如圆角卡片和药丸按钮）、表面深度纹理（通过双重内阴影和柔和投影实现）、组件解剖（如主次按钮、开关、复选框和输入框）、动画原则（140-200ms缓出触感压缩），以及严格的质量门禁（如必须可见双内阴影、光线方向一致）。该技能明确规定了何时可以使用该样式（仅在用户选择后），并包含一个“黏土材质保真度门禁”，确保实现不会退化为简单的圆角平面。技能支持通过CSS变量进行主题化，并提供了深浅色模式的完整令牌集。开发者可以在支持AI Agent开发的平台（如Claude Code、Cursor、Codex等）中使用此技能，通过引用其ID `claymorphism` 来快速应用一致的黏土风格设计，避免手动实现和不一致的设计决策。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/kennedys0/taste-engine/tree/HEAD/optional-standalone-skills/taste-style-claymorphism
查看原文→浏览所有技能

在你喜欢的 AI 中提问

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

仅当用户明确选择或在确认的项目配置中指定后，才使用此技能。对于未解释的新UI请求，请使用样式选择器（如<taste-style-selector>）代替，由用户决定其偏好。现有的品牌、无障碍和用户覆盖规则优先于以下所有示例。以下样式指南并非在样式选择前就开始UI编码的许可。

样式包：黏土风格

ID： claymorphism
标识： 模压成型、触感细腻、雕刻般的表面，具有双重内阴影的立体深度、柔和的投影和友好的物理存在感。

这是一个样式包，并非强制默认值。仅在明确选择或确认适用项目样式后加载。项目指令可以覆盖个别选择。保持无障碍性、实用性和品牌约束。字体是建议，并非必需依赖。带有圆角和1px边框的扁平卡片不符合黏土风格。

适用场景与权衡

  • 适用于： 有趣的消费者体验、创意工具、个人仪表盘、交互式小部件、触感Web应用以及现代教育或设计平台。
  • 谨慎使用于： 极端密集的表格数据、长篇法律阅读内容，或低功耗设备（如果过多的阴影计算影响性能）。
  • 参考方向：
    • 主要饱和黏土： 饱满鲜艳的紫罗兰/紫色（#813FFC）模压表面，左上角为亮白色内高光，右下角为深色块状阴影，以及清晰的排版。
    • 浅色瓷器黏土： 柔软的米白色（#ECEBF5）模压表面，左上角为纯白色内高光，右下角为柔和的灰紫色块状阴影，以及深灰紫色排版。
    • 下沉式内嵌井： 凹陷的表单输入框，带有清晰的白色浮雕边缘（3px solid rgba(255, 255, 255, 0.85)）、反向内嵌阴影和清晰易读的占位符标签。

黏土材质保真度门禁 — 强制要求

在判定黏土风格页面完成之前，视口首屏必须明显表现为雕刻般的黏土构成。 如果用户选择了此样式，那么带有圆角和1px边框的扁平卡片是不合格的，即使CSS变量命名为clay。

一个成功的黏土风格实现需要展示所有以下特征：

  1. 立体双内阴影（高光 + 阴影）： 黏土表面必须具有对立的内阴影对：模拟入射光的左上角内高光（inset 3px 4px 6px rgba(255,255,255,...)）和模拟立体厚度的右下角内块状阴影（inset -4px -6px 8px rgba(dark-tint,...)）。单一平面的高光线或通用斜面均不合格。
  2. 柔和有色投影： 表面投射出柔和、有方向性、带色调的投影（8px 16px 24px rgba(..., 0.20–0.35)），营造出柔韧材质漂浮或搁置在有色画布上的感觉，而非生硬的黑色投影。
  3. 丰润的Squircle和药丸几何形状： 大量的圆角（卡片24px–32px，按钮20px–26px，药丸或圆形9999px，squircle复选框14px）。尖锐的90度角不合格。
  4. 下沉与凸起的极性： 可操作组件（按钮、徽章、开关拇指、卡片）是凸起的；容纳性井（输入框、非活动开关通道）是下沉的，具有反向的内嵌阴影和可选的白色浮雕边缘。
  5. 交互时的触感压缩： 在悬停、聚焦和点击时，控件通过微小的缩小（scale(0.97–0.98) 或 translateY(1–2px)）和收紧的阴影进行物理响应，感觉就像用指按压柔软可塑的黏土。

首屏测试： 在桌面截图中，无需阅读页面标题即可识别出凸起的雕刻按钮、双内高光/阴影以及下沉的输入井。如果它们看起来扁平或仅仅是圆角，请在添加更多内容前修改阴影令牌。

非卡片数量规则： 一个聚焦的组件展示（例如，主“提交”药丸按钮、次“返回”药丸按钮、圆形操作按钮、触感开关、复选框和下沉输入框）足以建立真实的材质保真度，无需用嵌套的气球卡片覆盖整个屏幕。

黏土深度明确例外—允许黏土具有立体深度

黏土风格特定覆盖： 针对过多阴影、光泽效果或新风格模糊的通用反杂散警告，此处不得被解释为禁止双内阴影、柔和投影或白色浮雕轮廓。这些是实现材质感的必要属性，对于营造触觉物理存在感至关重要。

  • 允许的材质处理： 双内阴影（对立的高光/暗色）、柔和的多停点有色环境阴影、白色浮雕边框（3px solid rgba(255,255,255,0.85)）以及触觉按压变换（scale(0.97)）。这些创造了必要的触觉深度和物理存在感。静态CSS即可提供完整的材质保真度，零动画库开销。
  • 色彩对比度纪律： 饱和原色黏土按钮需要纯白色文字（#FFFFFF），对比度至少达到4.5:1。浅色瓷器黏土表面需要深色文字（#28233D 或 #1D1735）。下沉井需要清晰、易于识别的占位符文字（#7C739E 或更深）。
  • 反杂散解释： 通过材质目的、物理连贯性和可读性来评估黏土深度，而非计算CSS阴影声明的数量。为满足通用最小化启发式规则而移除双内阴影是一种设计退化。

请参阅examples/claymorphism/sculpted-surfaces.css获取起始实现，以及tests/claymorphism-visual.md获取视觉验收标准。

排版与字体

友好的人文主义或几何无衬线字体：Manrope、Nunito Sans 或系统无衬线字体。标签使用500/600/700字重，标题使用700/800字重。字号缩放比例14/16/20/26/34 px；行高1.45–1.6。优先使用句首大写和简洁、人性化的标签。避免在立体表面上使用看起来脆弱的细显示字体。

色彩方向

选择一个有凝聚力的柔和与饱和配色：

  • 浅色模式（浅色瓷器黏土）：
    • 画布底色： 柔和的粉彩丁香/薰衣草色（#D7D1F1 或 --taste-clay-bg: #d7d1f1）。
    • 主要饱和黏土： 鲜艳的紫罗兰/紫色（#813FFC），白色文字（#FFFFFF），明亮的左上角白色高光，以及深紫色右下角块状阴影。
    • 次要浅色黏土： 柔软的米白色瓷器（#ECEBF5 / #F0EFF7），深色墨水文字（#28233D），明亮的左上角高光，以及柔和的薰衣草色右下角块状阴影。
    • 下沉输入井： 画布色调的井（#D7D1F1），由清晰的白色浮雕边缘（3px solid rgba(255, 255, 255, 0.85)）框起，下沉的内嵌阴影，以及易读的占位符（#8F87B0）。
  • 深色模式（深色夜间雕刻黏土）：
    • 画布底色： 氛围感强的黑曜石靛蓝色（#161326）。
    • 主要饱和黏土： 鲜艳的紫罗兰/紫色（#813FFC），纯白色文字（#FFFFFF），左上角高光，以及深紫色块状阴影。
    • 次要黏土表面： 饱满的雕刻李子/石板色（#26203D），清晰的浅瓷色文字（#F3F0FA），柔和的半透明白色左上角高光（rgba(255, 255, 255, 0.15)），以及深黑色右下角块状阴影（rgba(10, 5, 25, 0.60)）。
    • 下沉输入井： 深色下沉井（#1E1A33），由微妙的浮雕边缘（3px solid rgba(255, 255, 255, 0.20)）框起，下沉的内嵌阴影，以及易读的占位符（#A49BBF）。
  • 主题对比度耦合： 切换到深色模式时，次要黏土表面上的文字必须从深色墨水（#28233D）翻转为浅瓷色（#F3F0FA）。在深色黏土上保留深色墨水文字会立即造成对比度失败。饱和原色按钮在两种模式下均保留纯白色文字（#FFFFFF），对比度达到4.5:1以上。

布局与几何

卡片圆角24–32 px，按钮圆角20–26 px，全药丸或圆形9999px，squircle徽章和复选框14–16 px。保持一致8 px节奏和舒适的间距。避免没有语义交互的随机圆形。

表面、深度与纹理

表面必须感觉像由物理哑光黏土模压而成：

  • 主要黏土（凸起）： box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20);
  • 浅色瓷器黏土（凸起）： box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12);
  • 下沉井（凹陷）： box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70); 边框为 border: 3px solid rgba(255, 255, 255, 0.85);

组件结构与交互

  • 主按钮（“提交 >”）： 饱和紫色药丸，白色粗体文字，方向性箭头，点击时触感压缩。
  • 次按钮（“返回 ↶”）： 浅色瓷器药丸，深色墨水文字，返回箭头图标，点击时触感压缩。
  • 圆形操作按钮： 50% 圆角的圆形按钮（例如暂停 ❚❚），饱和黏土材质，居中图标。
  • 开关： 药丸形轨道，带有光滑的黏土拇指球体；在浅色轨道/紫色拇指和紫色轨道/白色拇指之间切换。
  • 复选框： Squircle容器，具有双内阴影和鲜艳的紫色复选标记（✓）。
  • 输入框： 下沉井，带有左图标、易读的占位符和白色浮雕边缘边框。

动画

140–200 ms 平滑缓出。按压时触感压缩（scale(0.97) 或 translateY(2px)），同时收紧阴影。绝不使用弹跳、过冲或持续的浮动循环。

可选的Anime.js v4配方

  • 动画决策： 按下的按钮有1–2%压缩并短暂恢复；保留现有的雕刻阴影。
  • 起始持续时间： 180ms（0 = 立即）；根据任务和用户偏好调整。
  • 避免： 弹跳、过冲、浮动循环。
  • 依赖： 默认使用CSS/原生。仅当请求的交互合理时使用Anime.js v4。当可用时，遵循Taste Engine的references/motion-engine.md；独立使用时遵循上述减少动画和无装饰循环原则。

UI文案与微文案

温暖而具体。示例：“提交”、“返回”、“输入您的用户名”、“保存至草稿”。避免甜腻的AI口号或虚假的营销宣传。

起始令牌（建议，非完整主题）

Token浅色模式默认值深色模式默认值
--taste-clay-bg#d7d1f1#161326
--taste-clay-primary#813ffc#813ffc
--taste-clay-light#ecebf5#26203d
--taste-clay-text#28233d#f3f0fa
--taste-clay-muted#7c739e#a49bbf
--taste-clay-shadow-primary8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20)8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30)
--taste-clay-inner-primaryinset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40)inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50)
--taste-clay-shadow-light8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12)8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25)
--taste-clay-inner-lightinset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35)inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60)
--taste-clay-inner-wellinset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70)inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15)
--taste-clay-well-rim3px solid rgba(255, 255, 255, 0.85)3px solid rgba(255, 255, 255, 0.20)
--taste-clay-radius-pill9999px9999px
--taste-clay-radius-btn24px24px
--taste-clay-radius-card28px28px
--taste-clay-radius-squircle14px14px
--taste-font-bodyManrope, system-ui, sans-serifManrope, system-ui, sans-serif
--taste-motion-duration180ms180ms

令牌代表一个方向，并非对每个调色板/平台都保证可复制粘贴。在项目级别定义--taste-clay-*，确保色彩对比度，并通过主题令牌进行适配，而不是散落字面值。

首屏英雄区域构成（完整视口首屏）

当面向公众的作品集/落地页/主页包含英雄区域时： 使用一个可见屏幕的头部+英雄区域组合。基础高度使用min-height: 100svh并回退到100vh，仅当头部在正常文档流中时减去其实际高度；让英雄区域为无障碍和短屏移动设备扩展。不要将此应用于私有仪表盘或其他任务屏幕；用户直接覆盖规则优先。样式特定方向： 使用一个雕刻般的英雄表面或精心平衡的柔软材质环境；将真正的作品集介绍和行动号召（CTA）放在首屏组合中。不要嵌套鼓起的卡片来填满100svh。黏土深度应保持微妙和方向性，并留有大量平坦空间。当存在时，请参阅路由器的references/hero-layout.md。独立使用遵循相同的响应式和反杂散原则。

样式特定质量门禁

  • 需做： 确保触感双内阴影可见；保持光线方向一致（左上到右下）；提供触感激活/按下状态；验证主要和浅色黏土均达到WCAG AA对比度；验证深色/浅色模式切换，使文字和表面颜色成对适应（例如，深色黏土上的浅瓷色文字，浅色黏土上的深色墨水文字）。
  • 禁止： 不要将简单的圆角视为黏土风格；避免气球阴影、过多的光泽光晕、不可读的亮色叠加标签、装饰性徽章，以及深色/浅色模式冲突（深色文字保留在深色黏土上）。
  • 确认桌面和移动端的一致性；视

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-enterprise

Apply Enterprise / Data-first 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.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community