1从现有网站快速提取设计规范,用于团队协作和文档沉淀
- 1打开 DesignDNA 官网,输入目标网站的 URL,点击生成
- 2等待工具自动爬取页面并提取颜色、字体、间距、阴影等视觉属性
- 3编译完成后,获取生成的 design.md 和 tokens.json 文件
- 4将文件集成到团队的知识库或代码仓库,作为前端开发的统一设计依据
2将竞品网站的设计系统转换成可执行的 Tailwind v4 配置,直接接入前端工程
- 1输入竞品或参考网站的 URL,执行一键编译
- 2在导出结果中选择 Tailwind v4 格式
- 3将导出的 CSS 变量或 Tailwind 主题配置文件替换到项目的基础样式文件中
- 4调整命名冲突或自定义变量前缀后提交,项目即可复用目标网站的设计风格
3为 AI 编码助手提供定制的设计上下文,提升生成代码的视觉一致性
- 1用 DesignDNA 编译目标网站,生成包含完整设计规范的 design.md 和 tokens.json
- 2打开你的 AI 编码工具(如 Cursor、Copilot),将这两个文件作为上下文或附加文档导入
- 3在 AI 生成新页面或组件时,引用这些文件中的设计令牌和规范
- 4AI 生成的代码将自动遵循该网站的色彩、字体和间距体系,减少人工调校
