القائمة
创建拟物化的 Web UI 面板：分层渐变、叠加的内外阴影、反光渐变边框、微纹理，以及浮雕文字或图标细节。当被要求按下、雕刻、有质感、真实、软塑料、软金属或高级实体界面样式时使用。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/shushuitie2017/design-agent-skills --skill skeuomorphic-uiيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。
当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。
仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | skeuomorphic-ui |
| description | 创建拟物化的 Web UI 面板：分层渐变、叠加的内外阴影、反光渐变边框、微纹理，以及浮雕文字或图标细节。当被要求按下、雕刻、有质感、真实、软塑料、软金属或高级实体界面样式时使用。 |
160ms 到 240ms。按品牌和主题调节这些。
:root {
--sk-bg-top: #f8fafc;
--sk-bg-mid: #e9eef5;
--sk-bg-bottom: #cfd7e4;
--sk-edge-top: rgba(255, 255, 255, 0.82);
--sk-edge-bottom: rgba(79, 93, 122, 0.34);
--sk-shadow: rgba(31, 41, 55, 0.18);
--sk-shadow-deep: rgba(31, 41, 55, 0.28);
--sk-highlight: rgba(255, 255, 255, 0.72);
}
用于卡片、面板、主按钮、标签页和控件外壳。
.sk-surface {
position: relative;
border: 1px solid transparent;
border-radius: 22px;
background:
linear-gradient(180deg, var(--sk-bg-top), var(--sk-bg-mid) 48%, var(--sk-bg-bottom)) padding-box,
linear-gradient(180deg, var(--sk-edge-top), rgba(255, 255, 255, 0.22) 45%, var(--sk-edge-bottom)) border-box;
box-shadow:
0 18px 34px var(--sk-shadow),
0 5px 12px rgba(31, 41, 55, 0.12),
inset 0 1px 0 var(--sk-highlight),
inset 0 -1px 0 rgba(79, 93, 122, 0.24);
transition:
box-shadow 200ms ease,
transform 200ms ease,
background 200ms ease;
}
.sk-surface {
: ;
: absolute;
: auto;
: ;
: inherit;
: (, (, , , ), transparent);
: none;
}
用于激活的按钮、切换态控件、选中的标签页和内嵌凹槽。
.sk-surface.is-pressed {
transform: translateY(1px);
background:
linear-gradient(180deg, #d5dce8, #eef2f7 52%, #f8fafc) padding-box,
linear-gradient(180deg, rgba(72, 84, 112, 0.38), rgba(255, 255, 255, 0.62)) border-box;
box-shadow:
inset 0 4px 10px rgba(31, 41, 55, 0.22),
inset 0 -1px 0 rgba(255, 255, 255, 0.72),
0 4px 10px rgba(31, 41, 55, 0.10);
}
用于有质感控件内部的标签。保持微妙。
.sk-label {
color: #334155;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.78),
0 -1px 0 rgba(31, 41, 55, 0.12);
}
.sk-icon {
filter:
drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
drop-shadow(0 -1px 0 rgba(31, 41, 55, 0.14));
}
以低不透明度使用微纹理。它应被感受到，而不被注意到。
.sk-texture {
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.5px),
radial-gradient(circle at 70% 65%, rgba(31, 41, 55, 0.08) 0 1px, transparent 1.5px);
background-size: 18px 18px, 22px 22px;
}