القائمة
教 AI 像高端设计工作室那样做设计。精确定义让网站显得昂贵的字体、间距、阴影、卡片结构与动画，并封堵所有让 AI 设计显得廉价或平庸的常见默认做法。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/shushuitie2017/design-agent-skills --skill high-end-visual-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى 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 | high-end-visual-design |
| description | 教 AI 像高端设计工作室那样做设计。精确定义让网站显得昂贵的字体、间距、阴影、卡片结构与动画，并封堵所有让 AI 设计显得廉价或平庸的常见默认做法。 |
Vanguard_UI_Architect只要你生成的代码包含以下任何一项，设计立即判定失败：
Geist、Clash Display、PP Editorial New、Plus Jakarta Sans 等高端字体可用。）shadow-md、rgba(0,0,0,0.3)）。linear 或 ease-in-out 过渡。没有插值的瞬间状态切换。写代码前，先默默「掷骰子」，根据提示词语境从下列原型中各选一项组合，确保产出既独一无二地贴合需求，又始终高端：
#050505），背景放射状网格渐变（如淡淡发光的紫色/翠绿光球）。绝黑卡片配重度 backdrop-blur-2xl 与纯白/10 的发丝细线。宽体几何 Grotesk 字体。#FDFBF7）、柔和鼠尾草绿或深浓咖色。大标题用高对比度可变衬线字体。淡淡的 CSS 噪点/胶片颗粒叠层（opacity-[0.03]），营造实体纸张质感。col-span-8 row-span-2 挨着堆叠的 col-span-4 卡片），打破视觉单调。
grid-cols-1），配宽松的纵向间距（gap-6）。所有 col-span 覆写重置为 col-span-1。-2deg 或 3deg 旋转，打破数字栅格感。
768px 以下移除所有旋转与负边距重叠。以标准间距纵向堆叠。重叠元素在移动端会造成触控目标冲突。w-1/2）放巨大字体，右侧放可横向滚动的交互图片胶囊或错落的交互卡片。
w-full）。字体块置顶，交互内容在下方铺开，必要时保留横向滚动。移动端覆写（通用）： 上述任何 md: 之上的非对称布局，在 768px 以下视口都必须强制回退为 w-full、px-4、py-8。绝不对全高区块用 h-screen——始终用 min-h-[100dvh]，以防 iOS Safari 视口跳动。
绝不把高端卡片、图片或容器平铺在背景上。它们必须像实体的、机加工的硬件（像一块玻璃板嵌在铝制托盘里），用嵌套外壳实现。
div，带细微背景（bg-black/5 或 bg-white/5）、发丝级外边框（ring-1 ring-black/5 或 border border-white/10）、特定内边距（如 p-1.5 或 p-2），以及大圆角（rounded-[2rem]）。shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]），以及经数学计算得出的更小圆角（如 rounded-[calc(2rem-0.375rem)]），形成同心曲线。rounded-full），配宽松内边距（px-6 py-3）。↗），它绝不裸露地挨在文字旁。它必须嵌进自己独立的圆形容器（如 w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center），完全贴齐主按钮的右内边距。py-24 到 py-40。让设计尽情呼吸。rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium）。绝不使用默认过渡。所有动效必须模拟真实世界的质量与弹簧物理。使用自定义 cubic-bezier（如 transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]）。
mt-6、mx-auto、w-max、rounded-full）。rotate-45 与 -rotate-45 配绝对定位），而非直接消失。backdrop-blur-3xl bg-black/80 或 bg-white/80）。translate-y-12 opacity-0 到 translate-y-0 opacity-100），每项带交错延迟（delay-100、delay-150、delay-200）。group 工具类。悬停时不要只改背景色。active:scale-[0.98]），模拟实体按压。group-hover:translate-x-1 group-hover:-translate-y-[1px]）并轻微放大（scale-105），制造内部动能张力。translate-y-16 blur-md opacity-0 在 800ms 以上时长内解算到 translate-y-0 blur-0 opacity-100）。IntersectionObserver 或 Framer Motion 的 whileInView。绝不使用 window.addEventListener('scroll')——它会引发持续重排，拖垮移动端性能。top、left、width 或 height。只通过 transform 与 opacity 做动画。will-change: transform 要节制使用，只用在正在活跃动画的元素上。backdrop-blur 只用于固定或吸附元素（导航栏、遮罩）。绝不对滚动容器或大块内容区应用模糊滤镜——那会引发持续的 GPU 重绘和严重的移动端掉帧。pointer-events-none 的伪元素上（position: fixed; inset: 0; z-index: 50）。绝不附加到滚动容器上。z-50 或 z-[9999]。z-index 严格保留给系统性层级：吸附导航、模态、遮罩、提示框。生成 UI 代码时，严格遵循以下顺序：
rounded-[2rem]）。cubic-bezier 过渡、交错导航显现，以及按钮中的按钮悬停物理。交付前对照下表评估你的代码。这是最后一道过滤。
py-24——布局充分呼吸linear 或 ease-in-out768px 以下优雅塌缩为单列，配 w-full 与 px-4transform 与 opacity——不含触发布局的属性backdrop-blur 只应用于固定/吸附元素，绝不用于滚动内容