القائمة
为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/shushuitie2017/design-agent-skills --skill stitch-design-tasteيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | stitch-design-taste |
| description | 为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。 |
本技能生成为 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它把久经实战的反垃圾前端工程指令翻译成 Stitch 的原生语义设计语言——描述性的自然语言规则，搭配 Stitch 的 AI 代理能解读的精确数值，以产出高端、非通用的界面。
生成的 DESIGN.md 充当单一事实来源，用于提示 Stitch 生成与精心策划的高能动性设计语言相符的新屏幕。Stitch 通过**「视觉描述」**结合具体颜色值、字体规格与组件行为来解读设计。
生成一个编码了以下内容的 DESIGN.md 文件：
评估目标项目的意图。用品味谱系上有画面感的形容词：
默认基线：Variance 8、Motion 6、Density 4。根据用户的氛围描述动态调整。
每种颜色提供：描述性名称 + 十六进制码 + 功能角色。
强制约束：
#000000）——用近黑、Zinc-950 或 CharcoalInter 为禁用。强制独特性格：Geist、Outfit、Cabinet Grotesk 或 SatoshiTimes New Roman、Georgia、Garamond、Palatino）为禁用。若编辑部/创意语境需要衬线，只用有辨识度的现代衬线：Fraunces、Gambarino、Editorial New 或 Instrument Serif。仪表盘或软件 UI 中衬线始终禁用Geist + Geist Mono 或 Satoshi + JetBrains Mono）Hero 是第一印象，必须有创意、醒目、绝不通用：
对每种组件类型，描述形状、颜色、阴影深度与交互行为：
calc() 百分比 hackmin-h-[100dvh]——绝不用 h-screen（iOS Safari 灾难性跳动）每个设计必须跨所有视口工作：
clamp() 缩放。正文最低 1rem/14px44px 点击目标clamp(3rem, 8vw, 6rem)）stiffness: 100, damping: 20——高端、有重量的感觉。无线性缓动transform 与 opacity 做动画。绝不动画 top、left、width、height。颗粒/噪点滤镜只用于固定伪元素在 DESIGN.md 中把这些编码为明确的「绝不做」规则：
Inter 字体Times New Roman、Georgia、Garamond）——如需只用有辨识度的现代衬线#000000）99.99%、50%）picsum.photos 或 SVG 头像# Design System: [Project Title]
## 1. Visual Theme & Atmosphere
(Evocative description of the mood, density, variance, and motion intensity.
Example: "A restrained, gallery-airy interface with confident asymmetric layouts
and fluid spring-physics motion. The atmosphere is clinical yet warm — like a
well-lit architecture studio.")
## 2. Color Palette & Roles
- **Canvas White** (#F9FAFB) — Primary background surface
- **Pure Surface** (#FFFFFF) — Card and container fill
- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata
- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
(Max 1 accent. Saturation < 80%. No purple/neon.)
## 3. Typography Rules
- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers
- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.
## 4. Component Stylings
* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.
* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.
Composed, illustrated compositions — not just "No data" text.
(Grid-first responsive architecture. Asymmetric splits for Hero sections.
Strict single-column collapse below 768px. Max-width containment.
No flexbox percentage math. Generous internal padding.)
(Spring physics for all interactive elements. Staggered cascade reveals.
Perpetual micro-loops on active dashboard components. Hardware-accelerated
transforms only. Isolated Client Components for CPU-heavy animations.)
(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,
no neon glows, no 3-column equal grids, no AI copywriting clichés,
no generic placeholder names, no broken image links.)