AI 默认生成
Nocturne · Edition 24
SOUND, AFTER DARK.
A sculpted speaker tuned for quiet rooms. Matte graphite. Brushed alloy. One deliberate object.
Export DESIGN.md
Matte graphite · brushed alloy
Limited studio run · ships in 48 hours
AI Coding × Design System
AI 写出来的界面，不应该都长一个样。
Give your Agent a design system.
把品牌写成 DESIGN.md，让 AI 也能做出好看的界面。
22 套风格 · 遵循 Google DESIGN.md 规范 · 免登录
Nocturne · Edition 24
SOUND, AFTER DARK.
A sculpted speaker tuned for quiet rooms. Matte graphite. Brushed alloy. One deliberate object.
Export DESIGN.md
Matte graphite · brushed alloy
Limited studio run · ships in 48 hours
使用设计系统
Nocturne · Edition 24
SOUND, AFTER DARK.
A sculpted speaker tuned for quiet rooms. Matte graphite. Brushed alloy. One deliberate object.
Export DESIGN.md
Matte graphite · brushed alloy
Limited studio run · ships in 48 hours
Four directions
先认方向，再选风格
按你在做的产品认一组。每组两套，点进去就能改，也能导出。
01
选择风格
从 22 套官方风格中选择一个方向，先看它在真实场景里的表现。
02
预览与微调
在 Web 与 iOS 画布里调整颜色、字体、圆角和组件，实时确认结果。
03
导出设计系统
导出 DESIGN.md、tokens.json 或代码包，把视觉规则变成机器可读的约束。
04
交给 AI Agent
把规范放进项目，让 Cursor、Claude Code 或 Codex 按同一套视觉语言继续生成。
Built for your agent
不仅是设计图，更是可执行的规范
颜色、字体、间距、组件和取舍都写进同一个文件。下一次生成，不再从默认灰重新开始。
CursorClaude CodeCodex
查看更多支持的工具 →--- name: Nocturne tone: [cinematic, restrained, product-led] --- ## Design System ### Colors - Primary: #F4F2ED - Text: #F4F2ED - Background: #090A0B ### Typography - Heading: Geist / 56px / 400 - Body: Geist / 16px / 400 ### Rules - One hero product, one primary action - Prefer space and contrast over card grids
One style. One design system. Endless possibilities.