首页
/
工具详情
RicoUI‑Design 使用指南
平台介绍
开源的 DESIGN.md设计系统工作台，由独立开发者 Rico 出品。本项目旨在将 UI 设计规范以 Markdown 格式文档 呈现，用于为 AI（Cursor、Claude Code等） 提供网页前端生成的约束。该工具成功打通了 设计规范 与 代码输出 的链路，支持用户浏览、编辑并导出设计规范文档。
主要功能
- 浏览现成品牌 DESIGN.md规范模板（包含 Apple、Linear、Vercel 等）。
- 提供 可视化编辑 面板，可修改颜色、字体、间距、组件、布局及响应式规则。
- 导出完整 DESIGN.md 文本，直接复制给 AI 编码工具使用。
- 支持导入已有 DESIGN.md文件 进行二次修改。
- 预览规范效果，输出参考文档给前端开发使用。
适用人群
适合群体
- UI/UX设计师 与 前端开发者。
- 使用 AI 写网页（Cursor、Windsurf、Claude Code） 的开发人员。
- 需要将设计规范转成 AI 可识别提示文档的 团队。
不适合场景
- 普通作图 或 PS 类图形设计需求。
免费付费情况
- 完全免费 且 开源，无订阅套餐，无付费版本，无定价页面。
- 部分配套素材模板在作者 Gumroad商店 单独售卖，不属于本网站功能。
如何使用
- 打开
design.ricoui.com。 - 选择内置模板，或导入本地 DESIGN.md文件。
- 在可视化面板修改色彩、字体、组件、布局规则。
- 预览规范效果，导出完整 DESIGN.md文本。
- 将导出内容粘贴到 AI编码工具，约束网页 UI 输出。
注意事项
- 仅输出 规范文档文本，不直接生成前端代码，需要搭配 AI 编码工具使用。
- 浏览器 本地运行，云端不保存项目，修改后务必手动导出备份。
- 面向 网页UI场景，不支持 APP、小程序完整规范。
- 开源项目，无官方客服，稳定性随作者迭代变动。
- 国内访问偶有加载慢，建议浏览器直接导出文件留存副本。
暂无评论