ui-neumorphic-design

Apply soft neumorphism (拟态风格) UI design guidelines. Use when designing UI screens/components or when the user mentions neumorphism/拟态风格/soft UI.

20 stars

Best use case

ui-neumorphic-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Apply soft neumorphism (拟态风格) UI design guidelines. Use when designing UI screens/components or when the user mentions neumorphism/拟态风格/soft UI.

Teams using ui-neumorphic-design should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-neumorphic-design/SKILL.md --create-dirs "https://raw.githubusercontent.com/tylerwind/LabVIEW-WPF-UI-Generator/main/.agent/skills/ui-neumorphic-design/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ui-neumorphic-design/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ui-neumorphic-design Compares

Feature / Agentui-neumorphic-designStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Apply soft neumorphism (拟态风格) UI design guidelines. Use when designing UI screens/components or when the user mentions neumorphism/拟态风格/soft UI.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 轻拟物(拟态风格)UI 设计

## 适用场景

- 当需要进行 UI 设计或优化
- 当用户明确要求拟态风格/轻拟物/soft UI

## 设计步骤

1. **背景与元素关系**
   - 背景色与元素色接近,避免强烈对比
   - 例:背景 `#F0F0F0`,按钮 `#F5F5F5`
   - 通过阴影与高光让元素“浮”在背景上

2. **双阴影(凸起/凹陷)**
   - 浅色高光:向上偏移,`#FFFFFF`,透明度 20%
   - 深色阴影:向下偏移,`#D9D9D9`,透明度 20%
   - 用于营造凸起或凹陷的立体效果

3. **按钮与卡片**
   - 凸起按钮:双阴影模拟光照
   - 按下时:切换为凹陷效果(内阴影)
   - 卡片:柔和阴影 + 大圆角,增强层次感

4. **图标与文字**
   - 图标保持简洁,适度立体感
   - 文字使用无衬线字体
   - 文字颜色与背景形成轻微对比,确保可读性

## 输出要求

- 输出 UI 方案时,明确说明:背景色、元素色、阴影参数、圆角与字体建议
- 保持整体低对比、柔和、轻盈的视觉风格

Related Skills

writing-wechat-tech-posts

20
from tylerwind/LabVIEW-WPF-UI-Generator

Writes complete WeChat tech posts (hook, TOC, body, checklists, image placement, layout notes, summaries). Use when the user asks to draft a WeChat tech article, generate reusable prompts for writing, or turn a topic/outline into a publish-ready post.

writing-skills

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when creating new skills, editing existing skills, or verifying skills work before deployment

writing-plans

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when you have a spec or requirements for a multi-step task, before touching code

verification-before-completion

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always

using-superpowers

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions

using-git-worktrees

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification

titling-wechat-tech-posts

20
from tylerwind/LabVIEW-WPF-UI-Generator

Crafts and rewrites WeChat tech post titles across multiple patterns (list, contrast, outcome, scenario, anti-myth, template). Use when the user needs headline brainstorming or “restrained but clickable” title rewrites for tech/engineering WeChat公众号.

test-driven-development

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when implementing any feature or bugfix, before writing implementation code

systematic-debugging

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

subagent-driven-development

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when executing implementation plans with independent tasks in the current session

requesting-code-review

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when completing tasks, implementing major features, or before merging to verify work meets requirements

receiving-code-review

20
from tylerwind/LabVIEW-WPF-UI-Generator

Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation