stitch-design-taste作者 Leonxlnx

Stitch Design Taste Skill.

一个用于品牌和设计系统工作的 Claude Code 和 Codex skill：为 Google Stitch 编写 DESIGN.md，强调视觉独特性。

Brand & Design Systems
DESIGN.md

Leonxlnx/taste-skill · skills/stitch-skill/SKILL.mdSKILL.md

--- name: stitch-design-taste description: Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance. --- ## Prerequisites ## The Goal ## Analysis & Synthesis Instructions ## Output Format (DESIGN.md Structure) ## 1. Visual Theme & Atmosphere ## 2. Color Palette & Roles

从上游文件读取的前言和章节标题，时间 2026-09-14 · 完整内容 11,732 字符

01 功能说明

stitch-design-taste Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

此 skill 生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将反通用套路的前端工程指令翻译为 Stitch 原生的语义化设计语言——描述性的自然语言规则与 Stitch AI Agent 可解读的精确数值相配合。该文件是提示 Stitch 生成高品质、非通用界面的唯一真实来源。

它强制执行严格的排版规则、经过校准的调色板、非对称布局、持续的微动效，以及硬件加速的性能表现。该 skill 包含明确的反模式清单，禁止诸如 Inter 字体、霓虹光效、居中式主视觉区块以及通用占位内容等 AI 设计俗套。

它产出什么

一份包含七个结构化章节的 DESIGN.md 文件：视觉主题与氛围（Visual Theme & Atmosphere）、色彩体系与角色（Color Palette & Roles）、排版规则（Typography Rules）、组件样式（Component Stylings）、布局原则（Layout Principles）、动效与交互（Motion & Interaction），以及反模式（Anti-Patterns）

查看示例提示词 ↗

工作方式

01
定义氛围
从三个维度使用取自品味谱系的生动形容词评估目标项目的意图：密度（Density，1-10，从 Airy 到 Cockpit Dense）、变化度（Variance，1-10，从 Symmetric 到 Chaotic），以及动效（Motion，1-10，从 Static 到 Cinematic）。
02
绘制色彩体系
为每种颜色提供描述性名称、十六进制代码和功能角色。饱和度低于 80% 的强调色最多一种。
03
定义主视觉区块
使用内嵌图像排版（在文字之间嵌入与字高一致的小照片）营造引人注目的第一印象；当变化度超过 4 时采用非对称结构；主要 CTA 最多一个。
04
描述组件样式
为按钮、卡片、输入框、加载状态和错误状态指定形状、颜色、阴影深度和交互行为。
05
编码动效理念
定义弹簧物理默认值（刚度：100，阻尼：20）、活跃组件的持续微交互、列表呈现的错位编排，以及将动画限制为仅使用 transform 和 opacity 的性能约束。

02 找到适合场景

何时使用 stitch-design-taste Skill

当工作是此类品牌与设计系统任务时，在 Claude Code 或 Codex 中使用 stitch-design-taste skill。适用范围和限制来自该 skill 自身的文件。

适合场景

生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件，编码高品质、非通用的设计标准
需要严格执行反模式规则以避免霓虹光效、Inter 字体和通用占位内容等 AI 设计俗套的项目
需要等宽数字和紧凑可扫读性的高密度仪表盘或驾驶舱风格界面

了解边界

需要 Inter 字体或通用系统字体以营造高端语境的项目
当 variance 超过 4 时使用居中式英雄区布局，或使用三栏等宽卡片布局的界面
带有表情符号、霓虹外发光阴影、自定义鼠标光标，或使用 Elevate、Seamless、Unleash 等 AI 文案套话的设计

需要提供的信息

目标项目意图理解该项目属于艺术画廊、日常应用、驾驶舱界面还是其他类别，以评估合适的密度、variance 与 motion 谱段。

03 Skill 内部

stitch-design-taste Skill 赋予 Claude Code 与 Codex 的规则

SKILL.md 为 Agent 设定的 5 条具体指令、默认值与限制——文件中真正改变结果的那一部分。

默认氛围基线
新项目的默认基线为 Variance 8、Motion 6、Density 4。这些数值应根据用户的氛围描述动态调整。
Variance 超过 4 时禁止使用居中式英雄区
当 variance 超过 4 时，禁止使用居中式英雄区布局，转而强制使用分屏、左对齐或非对称留白布局。
移动端视口使用 min-h-[100dvh]
全高区块必须使用 min-h-[100dvh]，绝不使用 h-screen，以避免 iOS Safari 地址栏跳动带来的灾难性表现。
44px 最小触控目标
所有交互元素必须具备至少 44px 的点击目标，以确保移动设备上的可访问性与可用性。
元素不得重叠
文本绝不能与图片或其他文本重叠。每个元素都应占据自己干净的空间区域，并保持清晰的空间分隔。不允许使用绝对定位堆叠内容。

04 投入使用

在 Claude Code 或 Codex 中安装 stitch-design-taste

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 stitch-design-taste 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste

针对 skills/stitch-skill/SKILL.md 的通用 skills CLI 形式；仓库可能会记录其自身路径。

为 Skill 分配第一个品牌和 design-system 工作任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Generate a DESIGN.md for [project name], a high-density financial dashboard targeting professional traders. The atmosphere should feel like a cockpit interface — variance 8, motion 6, density 9. Use a single cool accent (cyan or sky blue) and ban all generic patterns. All numbers must be monospace, and the hero section should use asymmetric layout with inline image typography showing [trading floor photos] between headline words.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

确认所有颜色条目均包含描述性名称、十六进制代码和功能角色，且饱和度低于 80% 的强调色最多只有一种
确认反模式清单明确禁止 Inter 字体、通用衬线字体、纯黑色、霓虹发光、表情符号和 AI 文案套话
确保移动端响应式规则强制在 768px 以下折叠为单列、设置 44px 最小触控目标，并对全高区块使用 min-h-[100dvh]

在 OpenDesign 中通过其 SKILL.md 链接导入 stitch-design-taste：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill 分支 main
Skill 文件: skills/stitch-skill/SKILL.md 验证时记录的内容校验和；提交 ccbc156
License: MIT 来自 LICENSE。与 Google Stitch 的 taste-design 几乎重复；Google 版本未单独计算。
仓库星标数: 86,946 GitHub 快照于 2026-09-14 为整个 Leonxlnx/taste-skill 仓库拍摄，该仓库在此目录中包含 11 个 skills。不是 stitch-design-taste 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

概述定义该 skill 的用途：使用语义化设计语言与反通用化标准，为 Stitch 生成 DESIGN.md 文件。
前提条件列出访问要求：通过 labs.google/stitch 使用 Google Stitch，并可选使用 Stitch MCP Server 以实现程序化集成。
目标概述七项编码目标：视觉氛围、色彩校准、字体架构、组件行为、布局原则、动效哲学、反模式。
1. 定义氛围在 density、variance 与 motion 谱段上使用富有表现力的形容词，默认基线为 Variance 8、Motion 6、Density 4。
2. 规划色彩方案提供描述性名称、十六进制色值和功能角色，强调色最多一种且饱和度低于 80%，禁止霓虹风格。
3. 建立字体排版规则在高端场景中禁用 Inter 和通用衬线字体，通过字重和色彩而非字号来建立层级。
4. 定义主视觉区使用行内图文排版、方差大于 4 的非对称结构，并最多保留一个 CTA，营造强烈的第一印象。
5. 描述组件样式说明形状、色彩、阴影深度和交互行为，仅在层级需要用高度体现时使用卡片。
6. 定义布局原则禁止元素重叠，方差大于 4 时禁用居中主视觉，优先使用 CSS Grid 而非 Flexbox，限制最大宽度，使用 min-h-[100dvh] 实现全高布局。
7. 定义响应式规则768px 以下移动端优先折叠为单列，触控目标 44px，使用 clamp 进行字体缩放，行内图片在移动端堆叠显示。
8. 编码动效理念默认使用弹簧物理效果（刚度 100，阻尼 20），持续微交互，错落编排，仅使用硬件加速变换。
9. 列出反模式（AI 痕迹）明确的“绝不使用”规则：不用表情符号、Inter、通用衬线字体、纯黑色、霓虹光晕、元素重叠、AI 式套话和填充文字。

Skill 自身的描述

"适用于 Google Stitch 的语义设计系统 Skill。生成 agent 友好的 DESIGN.md 文件，强制执行高级、反通用的 UI 标准 — 严格的字体排印、校准的色彩、非对称布局、持续微动效和硬件加速性能。"

来自 SKILL.md 的前言描述。完整文件约 11,732 个字符。在 GitHub 上阅读完整文件。

Stitch Design Taste

在真实的品牌与设计系统工作任务中运行 stitch-design-taste。

下载 OpenDesign，从 SKILL.md 链接导入 stitch-design-taste，粘贴上面的提示，在查看结果之前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/Leonxlnx/taste-skill --skill stitch-design-taste