Makereal Tldraw
<div class="ce-block" data-id="uPntyBoETW" ><div class="ce-block__content" style="">
<h3 class="ce-header ce-header--left">关于产品</h3>
</div>
</div><div class="ce-block ce-block--focused" data-id="cXWffxXTk2" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">一个想法诞生，画几笔，一个能跑的网站就出现了。Makereal Tldraw 干的就是这种事。它始于一个开源的数字白板项目 tldraw，一个偶然的机会，开发者们将它与强大的 AI 模型（比如 GPT-4V）结合，奇妙的化学反应发生了。现在，潦草的线框图、随手画的按钮、甚至是用文字描述的逻辑流程，都能在点击“Make Real”按钮后，变成活生生的、可交互的网页代码。它不是简单的图片生成，而是真正能看懂设计、写出代码的伙伴。</div>
</div>
</div><div class="ce-block" data-id="19AmHEwYbU" >
<div class="ce-block__content" style="">
<h3 class="ce-header ce-header--left">适合谁？</h3>
</div>
</div><div class="ce-block ce-block--focused" data-id="_0lTW7yDyz" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">设计师：快速将脑中的线框图和原型变为可交互的样本，告别静态图，让想法提前动起来。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="VlH9Kl6M88" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">开发者：告别从零手写 UI 的繁琐工作。无论是启动新项目还是制作小工具，都能闪电般生成前端基础代码，甚至是一个小游戏。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="TncaGnfyc0" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">产品经理与创意人士：无需编程，就能把点子做成看得见、摸得着的雏形，用来验证想法或进行团队脑暴，简直太方便了。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="B4pm4Eo2sU" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">技术爱好者与学生：一个绝佳的探索平台，用画画的方式感受 AI 创造的魅力，顺便还能直观地学习网页开发。</div>
</div>
</div><div class="ce-block" data-id="MMgKF6VuTp" >
<div class="ce-block__content" style="">
<h3 class="ce-header ce-header--left">产品特色</h3>
</div>
</div><div class="ce-block ce-block--focused" data-id="FYKrfyQZHq" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">所画即所得：这可能是从想法到现实最短的路径。脑海中的画面与可运行的应用之间，几乎没有了延迟。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="d22Lj5N8uF" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">自由无边界：它诞生于开源社区，骨子里就带着自由和探索精神。无限大的画布是个创意游乐场，UI 草图、逻辑图、文字笔记可以共存，一起为最终的作品服务。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="jrmSySA4IR" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">像玩一样创造：界面极其简单，没有复杂的菜单和设置。整个过程更像是玩一个有趣的绘画游戏，而不是在执行严肃的开发工作。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="dSv_ZGSNos" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">拥抱“意外之喜”：这个项目本身就是个“意外”的爆款。这种精神也延续到了产品体验中，鼓励各种天马行空的尝试。既可以只给一个“计时器”的文字让 AI 自由发挥，也可以画出精密的图表来获得精确结果。</div>
</div>
</div><style type="text/css">
.ce-block {
margin-top: 20px;
margin-bottom: 20px;
}
.ce-block__content,.ce-toolbar__content {
/* max-width:calc(100% - 50px) */
margin-left: auto;
margin-right: auto;
}
/**
* Plugin styles
*/
.ce-header {
position: relative;
padding: 1px 0px 1px 15px;
margin: 0;
line-height: 1.25em;
outline: none;
margin-bottom: 10px;
}
.ce-header p,
.ce-header div {
padding: 0 !important;
margin: 0 !important;
}
.ce-header::before {
content: "";
background-color: #3e8fe3;
width: 6px;
height: 100%;
position: absolute;
left: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/**
* Styles for Plugin icon in Toolbar
*/
.ce-header__icon {
}
.ce-header::before {
position: absolute;
content: attr(data-placeholder);
color: #707684;
font-weight: normal;
display: none;
cursor: text;
}
.ce-header:empty::before {
display: block;
}
.ce-header:empty:focus::before {
display: none;
}
/* FontSize */
h1.ce-header {
font-size: 2.0em;
}
h2.ce-header {
font-size: 1.7em;
}
h3.ce-header {
font-size: 1.4em;
}
h4.ce-header {
font-size: 1.15em;
}
h5.ce-header {
font-size: 0.95em;
}
h6.ce-header {
font-size: 0.8em;
}
/* Alignment*/
.ce-header--right {
text-align: right;
}
.ce-header--center {
text-align: center;
}
.ce-header--left {
text-align: left;
}
.ce-header--justify {
text-align: justify;
}
</style><style type="text/css">
.ce-block {
margin-bottom: 20px;
}
.ce-block__content,.ce-toolbar__content {
/* max-width:calc(100% - 50px) */
margin-left: auto;
margin-right: auto;
}
.ce-paragraph {
line-height: 1.6em;
outline: none;
text-indent: 2em;
font-size: 16px;
}
.ce-paragraph--right {
text-align: right;
}
.ce-paragraph--center {
text-align: center;
}
.ce-paragraph--left {
text-align: left;
}
.ce-paragraph--justify {
text-align: justify;
}
.ce-paragraph-text-indent {
text-align: justify;
}
.ce-paragraph:empty::before{
content: attr(data-placeholder);
color: #707684;
font-weight: normal;
opacity: 0;
}
/** Show placeholder at the first paragraph if Editor is empty */
.codex-editor--empty .ce-block:first-child .ce-paragraph:empty::before {
opacity: 1;
}
.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph:empty::before,
.codex-editor--empty .ce-block:first-child .ce-paragraph:empty:focus::before {
opacity: 0;
}
.ce-paragraph p:first-of-type{
margin-top: 0;
}
.ce-paragraph p:last-of-type{
margin-bottom: 0;
}
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
</style><style type="text/css">
.inline-code {
background: rgba(250, 239, 240, 0.78);
color: #b44437;
padding: 3px 4px;
border-radius: 5px;
margin: 0 1px;
font-family: inherit;
font-size: 0.86em;
font-weight: 500;
letter-spacing: 0.3px;
}
</style>
页:
[1]