getdesign

getdesign是一款能够从任意公共网站提取设计系统的工具。它的重要性在于极大地提高了设计师和开发者的工作效率。主要优点包括能够准确提取网站的颜色、字体、间距和组件等信息,并将其整理成易于阅读的Markdown文档(design.md)。产品背景是为了满足设计和开发过程中对快速获取设计规范的需求。目前V1版本无getdesign运行计费,用户需支付Daytona的浏览器捕获费用和OpenAI的模型使用费用。其定位是为设计和开发工作提供便捷的设计系统提取服务。

需求人群:

["设计师:getdesign可以帮助设计师快速获取其他网站的设计灵感和规范,节省了手动分析和记录的时间。设计师可以将提取的设计系统作为参考,应用到自己的设计项目中,同时也方便与开发团队进行沟通和协作。", "开发者:对于开发者来说,getdesign提供的design.md文档和页面截图可以为开发工作提供详细的设计上下文。开发者可以根据文档中的信息,快速搭建出与原网站风格一致的界面,提高开发效率。", "编码代理使用者:该工具允许将生成的设计文档和截图提供给编码代理,使编码代理能够更好地理解设计需求,生成更符合设计风格的代码。同时,通过安装getdesign Skill,编码代理可以直接使用其工具提取设计上下文,进一步提升工作效率。"]

使用场景示例:

设计师在进行新的网页设计时,使用getdesign提取Cursor网站的设计系统,从中获取颜色、字体和组件样式等灵感,并将其应用到新的设计项目中。

开发者需要开发一个与Linear网站风格相似的管理系统,通过getdesign提取Linear网站的设计信息,将生成的design.md文档作为开发的参考,快速搭建出具有相似风格的界面。

编码代理在编写代码时,获取getdesign为Stripe网站生成的设计文档和截图,根据文档中的设计规范生成符合Stripe风格的代码,提高代码的质量和一致性。

产品特色:

提取网站的颜色信息:getdesign可以深入解析网站的CSS代码,精准提取出网站所采用的各种颜色,包括主文本颜色、页面背景颜色、品牌强调色等,并清晰地整理在生成的design.md文件中,方便设计师和开发者参考使用。

提取网站的字体信息:该工具能够识别网站所使用的字体,不仅包括显示字体,还涵盖代码字体等。同时,它会记录字体的大小、字母间距等详细信息,确保在后续设计或开发中能够精准复刻网站的排版风格。

提取网站的间距信息:getdesign可以分析网站元素之间的间距设置,如组件之间的边距、按钮的内边距等。这些间距信息对于保持设计的一致性和美观性至关重要,在生成的文档中会有明确的记录。

提取网站的组件信息:它能够识别网站中的各种组件,如按钮、输入框等,并详细记录组件的样式,包括圆角半径、边框样式、阴影效果等。这有助于开发者在后续开发中快速搭建出具有相似风格的界面。

生成设计文档:getdesign会将提取到的所有设计信息整理成一个设计文档(design.md),这个文档可以作为样式指南,方便团队成员之间的沟通和协作,也可以提供给编码代理,为开发工作提供详细的设计上下文。

提供多平台支持:支持通过网页(Web)、API、命令行界面(CLI)、软件开发工具包(SDK)和技能(Skill)等多种方式使用,满足不同用户在不同场景下的使用需求。

进行页面截图:在提取设计系统的过程中,getdesign会对网站页面进行截图,这些截图可以作为视觉参考,帮助用户更直观地了解网站的整体设计风格和布局。

使用教程:

第一步:在账户中保存Daytona和OpenAI密钥,可通过网站仪表盘(dashboard.getdesign.app)进行登录并保存。

第二步:复制要提取设计系统的公共网站URL。

第三步:将URL粘贴到网站仪表盘(Agent)中,或根据需求使用API(api.getdesign.app)、CLI(bunx getdesign cli)、SDK(bun add getdesign sdk)或Skill(skills add MohtashamMurshid getdesign)等方式调用getdesign工具。

第四步:等待工具运行,getdesign会打开网站,读取CSS代码,捕获页面,并提取颜色、字体、间距和组件等信息。

第五步:工具运行完成后,会生成一个设计文档(design.md),可以将其下载下来作为样式指南或提供给编码代理使用。同时,如果需要,还可以获取网站页面的截图。

浏览量:2

打开站点

类似产品

© 2026     AIbase    备案号:闽ICP备08105208号-14

隐私政策

用户协议

意见反馈 网站地图