新拟态软UI设计规范

这个规范解决什么问题

新拟态（Neumorphism）风格的 UI 很容易「看起来对，但落地乱」：阴影方向不一致、按压状态缺失、间距节奏随意、软色背景上的文字对比度不足。团队各自实现时，按钮在卡片上是一种软度，在表单里又是另一种软度，视觉隐喻混杂，可访问性也常常被牺牲。

@user_fccf428b/neumorphism 把新拟态设计规范变成一份可执行的工程指南，而不是一句「要柔和、要有层次感」的形容词要求。

它如何工作

规范先定义设计基座，再约束组件：

• 设计令牌：主色 #006666、次色 #F1F2F5、成功 #00A63D、警告 #FE9900、危险 #FF2157、表面 #E7E5E4、文本 #1E2938；字体使用 Space Mono（主/展示）与 JetBrains Mono（等宽），字重覆盖 100–900；紧凑密度间距。
• 组件规则：每个组件需定义 default、hover、focus-visible、active、disabled、loading、error 状态，明确键盘、指针、触摸的交互行为，并处理长标签、空状态、溢出等边界情况。
• 规则语言：强制项用 must，建议项用 should；每条 Do 必须配至少一个 Don't 示例；引入新样式时附带既有组件的迁移说明。
• 输出结构固定：上下文与目标 → 令牌与基座 → 组件级规则 → 可访问性验收标准 → 文案与语气规范 → 反模式 → QA 清单，可直接用于 code review。

质量门槛要求每条规则锚定到令牌、阈值或示例，禁止只依赖模糊形容词；可访问性声明必须可在实现中测试，美学与可访问性冲突时以可访问性优先。

适用边界

• 这是一份指南生成技能，输出规范文档与建议，不负责直接渲染代码；涉及发送、发布、付款、部署等外部写入操作前必须先确认。
• 安全边界：不自动安装依赖、不修改系统权限、不创建持久化任务；命令与代码默认仅作参考，仅在用户明确要求且目标范围清楚时才可执行。
• 视觉基座声明为 minimal、clean、高对比、矩阵式风格，若产品追求强拟物仿真或实验性动效，需要自行评估适配程度。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」