stitch-design-taste
为 Google Stitch 生成高级 UI 设计系统
Claude 代理通常会产生千篇一律、带有 AI 感的界面。此技能通过严格的设计标准来生成高级、反套路化的 UI 规范，避免常见陷阱，如 Inter 字体、霓虹光晕和居中英雄区等设计手法。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“stitch-design-taste”。 Generate a design spec for a fintech dashboard
预期结果:
一份包含以下内容的 DESIGN.md 文件：Canvas White (#F9FAFB) 背景色，Charcoal Ink (#18181B) 文字色，Emerald Signal (#10B981) 作为增长指标的强调色，Geist 字体 weight 700-900 用于标题，所有数字使用等宽字体，弹性物理动画规格（stiffness: 100, damping: 20），以及明确禁止使用 Inter 字体、霓虹光晕和通用占位符数据。
正在使用“stitch-design-taste”。 Create a design spec for an editorial magazine site
预期结果:
一份包含以下内容的 DESIGN.md 文件：高创意度 (9)，高变化度 (8)，带内联图片排版的非对称英雄区布局，独特的现代衬线字体（Fraunces、Instrument Serif）用于展示，主体文字严格限制在 65ch 最大宽度，以及带有交错出现效果的动效编排。
安全审计
安全Static analysis flagged 205 potential issues, all evaluated as false positives. The skill contains only markdown documentation files describing design system specifications. No executable code, shell commands, or cryptographic operations exist. All detected patterns are design terminology being misinterpreted by the scanner (e.g., CSS hash notation, font weight values, design system references). Safe for publication.
质量评分
你能构建什么
创建高级着陆页
为高端着陆页生成设计规范，避免通用 AI 美学。非常适合希望获得专业、独特网络形象的初创公司。
构建一致的设计系统
通过在单一真相源中记录排版、颜色、间距和组件行为，为整个产品套件建立一致的视觉语言。
在设计约束下进行原型设计
使用反模式列表作为快速原型设计的护栏。明确的禁止规则可在设计错误发生之前预防它们。
试试这些提示
使用 stitch-design-taste 技能为 [描述您的项目类型，例如 'SaaS 仪表板'] 生成 DESIGN.md，[创意程度 1-10] 创意设置和 [密度程度 1-10] 密度。
使用 stitch-design-taste 技能为 [描述您的项目] 创建 DESIGN.md。风格是 [描述风格，例如 '社论杂志风格搭配粗体排版']。将变化度设为 8，动效设为 6。
使用 stitch-design-taste 技能为数据密集型仪表板生成 DESIGN.md。将密度设为 9，变化度设为 7，并为所有数值启用等宽字体。为状态指示器包含持续动画。
使用 stitch-design-taste 技能为极简风格作品集创建 DESIGN.md。将创意设为 3，密度设为 2，变化度设为 2。使用 Electric Blue 作为唯一的强调色。不使用衬线字体。
最佳实践
- 从氛围描述开始 — 在详细说明令牌之前理解风格，以确保一致的设计语言
- 选择恰好一种强调色并在整份规范中坚持使用 — 多种强调色会削弱高级感
- 包含明确的反模式 — 禁用列表是使输出非套路化和独特的关键
避免
- 使用 Inter 字体 — 它会产生通用 AI 感的界面；应改用 Geist、Satoshi、Cabinet Grotesk 或 Outfit
- 添加紫色或霓虹渐变效果 — 这会明显显得'AI 生成'，在高级场景中严格禁止
- 居中英雄区布局 — 这是通用且被禁止的；应改用非对称分屏或左对齐结构