设计系统

Stitch Design Taste

写一份 DESIGN.md,引导 Google Stitch 做出不落俗套的界面。

这是什么

生成一份为 Google Stitch 界面生成优化过的 DESIGN.md,把氛围、颜色、字体、组件、布局、动效和一份明确的禁用清单都写进去。

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,
来自上游 SKILL.md

它对设计意味着什么

  • Stitch 生成的界面统一继承一个饱和度低于 80% 的强调色,而不是霓虹紫渐变。
  • 居中首屏和三栏等宽卡片超过设定的多样性阈值就会被禁用。
  • 加载和空状态做成骨架屏式的排版,而不是千篇一律的转圈图标。

包含哪些内容

  • Overview
  • Prerequisites
  • Analysis and synthesis instructions
  • Output format
  • Best practices
  • Common pitfalls to avoid

如何安装

Stitch Design Taste

  1. 克隆这个仓库。

    git clone https://github.com/Leonxlnx/taste-skill
  2. 把 Codex 指向这个 Skill 文件。

    skills/stitch-skill/SKILL.md
  3. 然后描述你想要的界面,Codex 会照着这个 Skill 来做。

如何配合 Codex 使用

  1. 描述项目的调性,Skill 会设定密度、多样性和动效的评分。

  2. 它输出一份七个章节的 DESIGN.md,带具体色值和各颜色的功能角色。

  3. 把这份文件直接喂给 Stitch,或者通过 Stitch MCP server 传进去。

这里的每个插件都免费开源,并附上真实的上游源地址。

在 codex-design 清单上了解更多 ↗

下一步

用 Open Design 做设计,省掉那些配置

你可以自己装这个插件,也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key,产出归你所有。

Open Design 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS、Windows 与 Linux