Onlook
<div class="ce-block" data-id="5wzCzeVAfT" ><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="tzRl7KT5K4" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">Onlook是一款面向设计师和产品经理的下一代可视化代码编辑器，融合了强大的AI能力。它致力于让非专业开发者也能高效地“构建”而不仅仅是“设计”网页体验。核心在于提供一个可视化操作界面（类似设计工具），但所有操作都直接生成真实、可运行的代码（特别是React/Next.js/TailwindCSS栈）。它实现了设计与开发的融合，让最终的网页产品本身就是设计稿的来源，消除了设计与实现之间的鸿沟。</div>
</div>
</div><div class="ce-block" data-id="Htp6soZfm5" >
<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="zdyADyiZuZ" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">UI/UX设计师：希望直接参与前端构建过程，不再局限于产出静态设计稿，能将设计快速转化为可工作的代码原型或产品。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="slybsL6aVz" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">产品经理：需要快速创建、迭代和验证产品原型或功能界面，无需深入编码细节，通过自然语言或直观操作就能生成可交互的MVP。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="UY0rWRaiT3" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">前端开发者(React生态)：寻求加速界面开发流程，减少还原设计稿的时间，利用AI辅助生成代码片段或组件，更快地进行调试和样式调整。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="S3fKRlEA1-" >
<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="5GQQQ_TS_V" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">对AI辅助创作感兴趣的建设者：希望通过直观的方式探索利用AI构建网页应用的可能性，并愿意参与开源社区。</div>
</div>
</div><div class="ce-block" data-id="wqn0ayS_N9" >
<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="QMloAZKiVw" >
<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="hKjQ7zTuPW" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">双模式切换：既可像Figma一样纯视觉操作，也能像VS Code一样直接改代码，随时切换。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="tA6MVf6G43" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">AI设计伴侣：不仅能生成代码，还会给出排版、配色、无障碍等设计建议。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="PfuhGXeMwa" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">真开源友好：生成的代码干净、可读，完全基于Next.js与Tailwind，方便二次开发。</div>
</div>
</div><div class="ce-block ce-block--focused" data-id="8r0oDMiMOp" >
<div class="ce-block__content">
<div class="ce-paragraph cdx-block ce-paragraph--left">设计师友好：界面、快捷键、组件命名都沿用设计软件习惯，几乎零学习成本。</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]