stitch-design-taste by leonxlnx/taste-skill
npx skills add https://github.com/leonxlnx/taste-skill --skill stitch-design-taste本技能生成专为 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将经过实战检验的反平庸前端工程指令,转化为 Stitch 原生的语义化设计语言——即描述性的、自然语言的规则,搭配精确的数值,以便 Stitch 的 AI 代理能够解读并生成优质的、非千篇一律的界面。
生成的 DESIGN.md 是唯一的事实来源,用于引导 Stitch 生成符合精心策划、高自主性设计语言的新屏幕。Stitch 通过**“视觉描述”**来解读设计,这些描述由特定的颜色值、排版规范和组件行为支持。
生成一个 DESIGN.md 文件,其中编码了:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
评估目标项目的意图。使用品味光谱中富有表现力的形容词:
默认基线:变化度 8,动效 6,密度 4。根据用户的氛围描述动态调整。
为每种颜色提供:描述性名称 + 十六进制代码 + 功能角色。
强制性约束:
#000000)——使用 Off-Black、Zinc-950 或 CharcoalInter。强制使用独特字体:Geist、Outfit、Cabinet Grotesk 或 Satoshi。Times New Roman、Georgia、Garamond、Palatino)。如果编辑/创意场景确实需要衬线体,仅使用独特的现代衬线体:Fraunces、Gambarino、Editorial New 或 Instrument Serif。仪表盘或软件 UI 中始终禁止使用衬线体。Geist + Geist Mono 或 Satoshi + JetBrains Mono)。Hero 区域是第一印象,必须具有创意、引人注目,绝不能平庸:
对于每种组件类型,描述其形状、颜色、阴影深度和交互行为:
calc() 百分比技巧。min-h-[100dvh]——绝不使用 h-screen(iOS Safari 灾难性跳转)。每个设计必须在所有视口下都能工作:
clamp() 缩放。正文文本最小 1rem/14px。44px。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: [项目标题]
## 1. 视觉主题与氛围
(对情绪、密度、变化度和动效强度的描述性说明。
示例:"一个克制的、如艺术画廊般通透的界面,带有自信的不对称布局和流畅的弹簧物理动效。氛围既专业又温暖——像一个光线充足的建筑工作室。")
## 2. 色彩调色板与角色
- **Canvas White** (#F9FAFB) — 主要背景表面
- **Pure Surface** (#FFFFFF) — 卡片和容器填充色
- **Charcoal Ink** (#18181B) — 主要文本,Zinc-950 深度
- **Muted Steel** (#71717A) — 次要文本、描述、元数据
- **Whisper Border** (rgba(226,232,240,0.5)) — 卡片边框,1px 结构线
- **[强调色名称]** (#XXXXXX) — 用于 CTA、激活状态、焦点环的单一强调色
(最多 1 种强调色。饱和度 < 80%。无紫色/霓虹色。)
## 3. 排版规则
- **Display:** [字体名称] — 字距紧凑,比例受控,通过字重建立层级
- **Body:** [字体名称] — 行高宽松,最大宽度 65ch,中性次要颜色
- **Mono:** [字体名称] — 用于代码、元数据、时间戳、高密度数字
- **Banned:** 在高端场景中禁止使用 Inter、通用系统字体。仪表盘中禁止使用衬线字体。
## 4. 组件样式
* **Buttons:** 扁平,无外发光。激活状态时有触觉 -1px 位移。主要按钮使用强调色填充,次要按钮使用幽灵/轮廓样式。
* **Cards:** 大圆角 (2.5rem)。柔和的微光阴影。仅当层级需要通过高度传达时才使用。高密度:用顶部边框分隔符替代。
* **Inputs:** 标签在上方,错误信息在下方。焦点环使用强调色。无浮动标签。
* **Loaders:** 骨架屏微光效果需精确匹配布局尺寸。无圆形旋转器。
* **Empty States:** 组合式、有插图的构图——不仅仅是 "No data" 文本。
## 5. 布局原则
(网格优先的响应式架构。Hero 区域使用不对称分割。
在 768px 以下严格折叠为单列。最大宽度限制。
不使用 flexbox 百分比计算。内部有充足的留白。)
## 6. 动效与交互
(所有交互元素使用弹簧物理。错开的级联显示效果。
活动仪表盘组件上的持续微循环。仅使用硬件加速变换。
CPU 密集型动画使用隔离的客户端组件。)
## 7. 反模式(禁止)
(明确列出禁止的模式:无表情符号、无 Inter 字体、无纯黑色、
无霓虹发光、无 3 列等宽网格、无 AI 文案陈词滥调、
无通用占位符名称、无损坏的图片链接。)
每周安装量
1.8K
代码仓库
GitHub Stars
5.7K
首次出现
5 天前
安全审计
安装于
codex1.7K
gemini-cli1.7K
opencode1.7K
github-copilot1.7K
kimi-cli1.7K
amp1.7K
This skill generates DESIGN.md files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.
The generated DESIGN.md serves as the single source of truth for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through "Visual Descriptions" supported by specific color values, typography specs, and component behaviors.
Generate a DESIGN.md file that encodes:
Evaluate the target project's intent. Use evocative adjectives from the taste spectrum:
Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.
For each color provide: Descriptive Name + Hex Code + Functional Role.
Mandatory constraints:
#000000) — use Off-Black, Zinc-950, or CharcoalInter is BANNED for premium/creative contexts. Force unique character: Geist, Outfit, Cabinet Grotesk, or SatoshiTimes New Roman, Georgia, Garamond, Palatino) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs: , , , or . Serif is always BANNED in dashboards or software UIsThe Hero is the first impression and must be creative, striking, and never generic:
For each component type, describe shape, color, shadow depth, and interaction behavior:
calc() percentage hacksmin-h-[100dvh] — never h-screen (iOS Safari catastrophic jump)Every design must work across all viewports:
clamp(). Body text minimum 1rem/14px44px tap targetclamp(3rem, 8vw, 6rem))stiffness: 100, damping: 20 — premium, weighty feel. No linear easingtransform and opacity. Never animate top, left, width, height. Grain/noise filters on fixed pseudo-elements onlyEncode these as explicit "NEVER DO" rules in the DESIGN.md:
Inter fontTimes New Roman, Georgia, Garamond) — distinctive modern serifs only if needed#000000)99.99%, 50%)picsum.photos or SVG avatars# 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.
* **Empty States:** Composed, illustrated compositions — not just "No data" text.
## 5. Layout Principles
(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.)
## 6. Motion & Interaction
(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.)
## 7. Anti-Patterns (Banned)
(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.)
Weekly Installs
1.8K
Repository
GitHub Stars
5.7K
First Seen
5 days ago
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex1.7K
gemini-cli1.7K
opencode1.7K
github-copilot1.7K
kimi-cli1.7K
amp1.7K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
FrauncesGambarinoEditorial NewInstrument SerifGeist + Geist Mono or Satoshi + JetBrains Mono)