教程 · 4步

四步实现
一致的界面。

把两个文件放进项目，运行一段提示词，让你的 AI 编程助手从同一套设计系统生成每一个新界面。

浏览设计系统什么是 DESIGN.md?

下载设计系统资源包。

购买后，你可以在账号下载页获得 ZIP 资源包，里面包含接入所需的全部文件。免费系统会在详情页直接暴露同样的文件。

design-system.zip

package

DESIGN.md

agent guidance

css/system.css

tokens + styles

html/preview.html

reference

真正接入只需要两个文件：DESIGN.md 是规则， system.css 是 token 和样式。

把 DESIGN.md 和样式表放进项目。

把 DESIGN.md 保留在项目根目录，让 AI 编程助手能把它当作项目上下文读取。把生成的 system.css 放到项目中任意合适的位置，下一步会让 AI 自动完成引入。

your-app/

▸your-app/

·DESIGN.md

·package.json

▸src/

·App.tsx

·index.css

▸styles/

·system.css

文件夹位置不重要。AI 会找到样式表，并按你的框架把它正确引入一次。

在你的编程助手里运行接入提示词。

打开你常用的 AI 编程助手，比如 Cursor、Claude Code、Codex 或其他工具，然后粘贴这段提示词。它会要求 AI 以 DESIGN.md 为唯一视觉来源，帮你接入样式表并重构界面，不需要手动处理 CSS 引入。

PROMPT.md

markdown

Read DESIGN.md in the project root before changing UI.

1. Find the design system stylesheet (css/system.css) and wire it up for me. Detect my framework (Vite, Next.js, Remix/React Router, plain HTML, or whatever this project uses) and import the stylesheet exactly once from the app's main/global CSS, or add a <link> in the HTML head for plain HTML. Move the file somewhere sensible if needed.
2. Use the tokens, utilities, component anatomy, spacing, typography, and states described in DESIGN.md.
3. Refactor the requested UI to match the system instead of inventing a new visual style.
4. If existing components conflict with DESIGN.md, explain the conflict and choose the option that keeps the interface most consistent.
5. If html/preview.html exists, read it as a visual reference and match the structure, spacing, and component styling shown there.

每次新增 UI 时，都让 DESIGN.md 保持在工作流里。

为了长期保持一致，把 DESIGN.md 写进全局规则。不能写入全局规则时，就在每次具体需求后附上一句简短提醒。

Option A · Global instructions

Cursor: add a rule in .cursor/rules or AGENTS.md

Claude Code: add to CLAUDE.md

Codex: add to AGENTS.md

告诉 AI：Always read DESIGN.md before UI work.

PROMPT.md

markdown

Build the requested UI using DESIGN.md as the visual source of truth. Follow its color tokens, typography, spacing scale, component patterns, interaction states, and accessibility guidance. Reuse styles from the imported primary stylesheet before writing new CSS.