发布 HN：魔法图案（YC W23）– 面向产品团队的 AI 设计与原型制作
大家好，我们是 Alex 和 Teddy。我们正在推出 Magic Patterns（<a href="https://www.magicpatterns.com">https://www.magicpatterns.com</a>），这是一款 AI 原型设计工具，旨在帮助产品经理和设计师创建功能齐全、互动性强的设计和网站。您可以在这里观看演示视频：<a href="https://www.youtube.com/watch?v=SK8C_tQBwIU" rel="nofollow">https://www.youtube.com/watch?v=SK8C_tQBwIU</a>，以及具体示例的视频教程：<a href="https://www.magicpatterns.com/docs/documentation/tutorials/video-tutorials">https://www.magicpatterns.com/docs/documentation/tutorials/video-tutorials</a>。
虽然其他工具主要帮助进行“AI 辅助编码”，但我们一直专注于“AI 辅助设计”。使用 Magic Patterns，您可以直观地传达您的想法，获得客户的反馈，并测试新功能。
Teddy 和我是一对好朋友，曾是前端工程师，现在是创始人。在经历了几次转型后，我们最终来到了 Magic Patterns——始终专注于设计工具领域，但之前的不同产品都未能获得良好的使用反馈。我们是在一次内部黑客马拉松后开始开发 Magic Patterns 的。Teddy 创建了一个 UI 库目录，而我则在玩弄 GPT 3.5。我们认为将两者结合起来会很有趣：一个 AI 组件生成器。您只需描述您想要的内容，就能得到一个 React 组件！
这个想法开始逐渐受到欢迎，我们也获得了用户，但使用该工具的并不是开发者，而是产品经理、设计师和领导层，他们终于能够有效地沟通自己的想法。他们用它快速测试新想法，获取客户反馈，并改善与内部团队的沟通。此外，业余爱好者（以及那些不是设计师的程序员）也使用我们的工具来创建他们本来无法完成的设计和 UI。
我们使用 Sonnet 3.5 和 3.7，并利用经过微调的模型快速应用编辑。最具挑战性的部分是确定最相关的上下文以输入到大语言模型中。我们尝试通过“点击更新”功能和让用户定义品牌预设或默认提示来解决这个问题。
与该领域的其他工具不同，我们特别关注（1）产品团队——我们是实时协作的；（2）仅限前端——我们不启动数据库或后端，因为我们并不是在解决“从想法到全栈应用”的问题。
一个常见的工作流程是产品经理构建一个互动原型，然后将其交给设计师进行进一步打磨，或直接交给工程师。许多团队甚至现在完全跳过 Figma，告诉我们这感觉像是一个不必要的中介。团队们现在直接生成可点击的原型，与利益相关者直接合作，并将其用作模型。
使用 Magic Patterns，您可以：- 在我们的无限画布上与团队协作；- 通过直接创建可重用组件来匹配现有设计；- 进行功能和流程的头脑风暴。（后者是我们内部使用的方式。）
我们最初是为了构建小型自定义组件，但现在人们可以一次性构建整个网站并与我们一起托管，或者构建他们内部共享或在客户演示中使用的仪表板。有人使用 Magic Patterns 的设计签下了每月 1 万美元的合同！
小企业主——从渔民到驾驶教练再到酒店经理——都在使用我们的工具来构建他们的网站，然后与我们一起托管。通过 Magic Patterns 构建的示例网站包括 <a href="https://getdealflow.ai/" rel="nofollow">https://getdealflow.ai/</a> 和 <a href="https://joinringo.com/" rel="nofollow">https://joinringo.com/</a>。令人惊讶的是，以前无法做到这些的人现在能够做到，这让我们感到非常欣慰，因为我们以这种方式赋能了人们。
您可以在这里开始使用我们的文档：<a href="https://www.magicpatterns.com/docs/documentation/get-started/introduction">https://www.magicpatterns.com/docs/documentation/get-started/introduction</a>，并可以尝试实际产品。只需访问 <a href="https://www.magicpatterns.com">https://www.magicpatterns.com</a>，并提示您想要的任何 UI。
今天无需登录，只需点击“来自 Hackernews？”您就可以免费获得 5 条消息进行试用。一旦达到限制，系统会提示您登录。计划从每月 19 美元起，您可以获得额外的每月 100 条消息（<a href="https://www.magicpatterns.com/pricing">https://www.magicpatterns.com/pricing</a>）。
我们很高兴今天能与 HN 分享，并欢迎所有反馈！
查看原文
Alex and Teddy here. We’re launching Magic Patterns (<a href="https://www.magicpatterns.com">https://www.magicpatterns.com</a>), an AI prototyping tool that helps PMs and designers create functional, interactive designs and websites. There’s a demo video at <a href="https://www.youtube.com/watch?v=SK8C_tQBwIU" rel="nofollow">https://www.youtube.com/watch?v=SK8C_tQBwIU</a>, as well as video walkthroughs of specific examples at <a href="https://www.magicpatterns.com/docs/documentation/tutorials/video-tutorials">https://www.magicpatterns.com/docs/documentation/tutorials/v...</a><p>While other tools help with “AI-assisted coding,” we have been quietly focused on “AI-assisted designing.” With Magic Patterns you can visually communicate your idea, get hands on feedback from customers, and test new features.<p>Teddy and I are best friends and former frontend engineers turned founders. We arrived at Magic Patterns after several pivots—always in the design tooling space, but different products that all struggled to get usage. We started working on Magic Patterns after an internal hackathon. Teddy built a UI library catalog and I messed around with GPT 3.5. We thought it’d be fun to combine the two: an AI component generator. Describe whatever you want, and get back a React component!<p>That started to take off and we gained users, but it wasn’t developers using the tool. Instead, it was PMs, designers, and leadership who could finally communicate their ideas. They use it to test new ideas quickly, get feedback from customers, and improve communication with internal teams. Also, hobbyists (and programmers who aren’t designers) use us to create designs and UIs that they wouldn’t be able to otherwise.<p>We use Sonnet 3.5 and 3.7, and leverage a fine-tuned model for fast-applying edits. The most challenging part is determining the most relevant context to feed to the LLM. We attempt to solve this with our click to update feature and by letting users define a brand preset, or default prompt.<p>Unlike other tools in this space, we’re specifically focused on (1) product teams—we're realtime and collaborative; and (2) frontend only—we don't spin up a database or backend because we aren't solving "idea to fullstack app."<p>A common workflow is a product manager building an interactive prototype and then passing it off to a designer for more polish or directly to engineers. Many teams are even skipping Figma entirely now, telling us that it feels like an unnecessary middleman. Teams are instead generating clickable prototypes, collaborating directly with stakeholders, and using that as the mockup.<p>With Magic Patterns, you can: - Collaborate with your team on our infinite canvas; - Match your existing designs by creating reusable components directly; - Brainstorm features and flows. (The latter is what we use it for internally.)<p>We started as a way to build small, custom components, but now people are one-shotting entire
websites and hosting them with us, or building dashboards that they share internally or in customer demos. People have sold $10k/mo contracts with Magic Patterns designs!<p>Small business owners—everyone from fishermen to driving instructors to hotel managers—are using us to build their websites and then hosting them with us. Example sites built by Magic Patterns include <a href="https://getdealflow.ai/" rel="nofollow">https://getdealflow.ai/</a> and <a href="https://joinringo.com/" rel="nofollow">https://joinringo.com/</a>. It’s amazing how people who couldn’t have done that before are now able to, and super gratifying to us to be empowering people in this way.<p>You can get started with our docs here: <a href="https://www.magicpatterns.com/docs/documentation/get-started/introduction">https://www.magicpatterns.com/docs/documentation/get-started...</a>, and you can try the actual product. Simply go to <a href="https://www.magicpatterns.com">https://www.magicpatterns.com</a> and prompt for any UI you want.<p>Today no login is required, just click “Coming from Hackernews?” and you’ll get 5 messages free to try. Once you hit the limit, you’ll then be prompted to login. Plans start at $19/mo for another 100 messages a month (<a href="https://www.magicpatterns.com/pricing">https://www.magicpatterns.com/pricing</a>).<p>We’re stoked to be sharing with HN today and are open to all feedback!