这份 taste.md 实际上是一份极其优质的结构化提示词(Structured Prompt)。虽然它是为 Command Code 这类特定的 AI Agent 设计的,但由于它的规则清晰、约束明确,你可以非常完美地将其无缝迁移到 Claude、Codex(或者基于 Codex/GPT 的 Cursor、Copilot 等工具)中使用。
核心思路是:将这份文档作为 AI 的“系统级上下文(System Context)”或“前置约束条件”。
以下是具体的实操方法:
1. 在 Cursor 或 Windsurf 等 AI IDE 中使用 (推荐)
如果你使用 Cursor 这类 AI 代码编辑器,这是最高效的方式:
- 作为全局规则:在你的项目根目录下创建一个名为
.cursorrules(或.windsurfrules)的文件,将taste.md的全部内容复制进去。 - 效果:当你使用
Cmd+K生成代码或在 Chat 面板中提问时,AI 会自动读取这些规则。它生成的 Tailwind CSS 类名、组件间距和颜色变量都会自动符合 Linear 的这套暗黑风格,无需你每次重复强调。
2. 在 Claude (网页版/桌面版) 中使用
Claude 对长文本和系统规则的遵循能力极强,非常适合处理这类设计规范。
- 利用 Claude Projects (推荐):如果你有 Claude Pro,创建一个新的 Project。在 "Project Knowledge" (项目知识库) 中,新建一个文档并将
taste.md贴入。然后在这个项目里生成的所有 UI 组件都会自带这种风格。 - 直接对话注入:在普通对话中,先将内容作为附件上传,或者直接粘贴在提示词最上方:
“这是一份核心 UI/UX 设计规范。请仔细阅读并在接下来的所有代码生成中严格遵循其中的字体、颜色(Pitch Black, Neon Lime)、圆角和 Tailwind 编写规则。确认理解后请回复‘已掌握设计规范’。”
3. 编写强约束的 Prompt 模板
当有了这个规范后,你可以极大简化日常开发时的提示词。你只需要描述业务逻辑,视觉层面交给规范来兜底。
比如,在开发具体的 SaaS 页面时,你可以这样向 Claude 或 Codex 提问:
"请参考我提供的设计规范(taste.md),编写一个用于产品展示的交互式功能卡片(Feature Card)组件。 技术栈要求:
- 框架:Vue 3 (Composition API) + Nuxt 3
- 样式:Tailwind CSS
功能要求:
- 包含一个标题、一段描述和一个 CTA 按钮。
- 当鼠标悬浮时,请应用规范中提到的『深度与层级』规则,使用指定的深色渐变和内阴影效果。
- 严格遵守 4px 网格系统和文本对比度要求。"
4. 作为 Code Review (代码审查) 工具
除了生成代码,你还可以用它来约束和重构现有代码:
- 将你现有的组件代码和
taste.md一起发给 Claude。 - 提问:“请根据这份设计规范审查这段代码。重点检查我的 Tailwind 间距(padding/margin)、颜色变量和阴影设置是否偏离了规范,并给出重构后的代码。”
这份文档里那些带有置信度(如 Confidence: 0.95)和绝对否定(如 Never use harsh white backgrounds)的句式,恰恰是 LLM 最容易理解的“负面提示词(Negative Prompts)”,能极大地减少 AI 乱编样式的情况。
你目前打算先从哪个具体的 UI 组件(比如导航栏、数据面板,还是落地页)开始应用这套风格?