本文作者：Leon，TRAE 产品经理
传统的婚礼请柬总是千篇一律？渴望拥有一个独具个性的在线请柬？是时候换一种方式发出你的爱情邀请了。现在，无需设计经验，不用编写代码，只需开启 TRAE SOLO 模式，输入你的想法，几分钟后一个专属于你们的婚礼网站即刻绽放。
TRAE SOLO 是行业首个 Context Engineer，不止协助编码，更能基于精准上下文理解和工具调用，从构思、规划、开发到上线，端到端交付完整功能。
第一步：打开 TRAE
打开 TRAE 国际版 IDE，进入 SOLO 模式。
第二步：输入需求
在对话框中输入需求，设计一个单页婚礼网站，视觉风格严格遵循 www.nga.gov/，并给出详细的风格、布…
Design a one-page wedding website in the exact visual spirit of https: // www.nga.gov /
1. Look & Feel
Color palette: #FFFFFF (pure white) background,#0C0C0C deep charcoal for text, #53565A medium gray for secondary text, accent link color #2361FF (subtle royal blue).
Typography: Primary font "Libre Franklin" (clean grotesque sans) for navigation/body; section headings in "Miller Display" or similar modern serif. Preserve generous line-height and letter-spacing, emulating NGA's airy reading pace.
Use massive white space; blocks should "float" with ≥ 120 px margins on desktop, 56 px on mobile.
2. Layout (mobile-first, fluid breakpoints)
a) Sticky header (transparent → solid white after scroll 60 px)
Left: minimalist word-mark logo (couple's initialsin Miller Display, 24 px).
Right: compact hamburger icon; on click, slide-in menu with smooth cubic-bezier easing (same dark theme as NGA mobile menu).
b) Hero banner
Full-bleed high-res photograph (fine-art style portrait of the couple).
Center-left overlay title stack:
<h1>Couple Names</h1>
<p class="hero-sub">Wedding, Month DD, YYYY</p>
Fade-in on load(opacity 0 → 1 over 800 ms).
c) About section
Two-column on ≥ 768 px; single-column stacked on phones.
Portraits align left; narrative text right, max-width 560 px.
Sub-section headings use small-caps serif in #53565A.
d) Time & Place
Large numeric date "06.18.2025" in Miller Display 64 px; beneath, venue address in Libre Franklin 18 px;subtle horizontal rule (#E7E7E7) above and below block.
Insert minimalist SVG line-map (monochrome, 1 px strokes).
e) RSVP Call - to - Action
Full-width strip in #F5F5F5.
Centered button 48 px tall, 240 px wide, text "RSVP" in uppercase; default border 2 px #0C0C0C, background transparent → on hover invert to filled #0C0C0C with white text.
f) Footer
Ivory background ( #FAFAFA), 14 px small-caps links: "Instagram | Weibo | Email".
Tiny copyright line in #53565A.
3. Micro - interactions & Motion
All scroll-reveals mimic nga.gov: translate-Y 30 px, opacity 0 → 1, duration 600 ms, staggered.
Focus states: 2 px outline #2361FF for accessibility.
Respect prefers-reduced-motion to disable animations.
4. Assets & Accessibility
Serve images as WebP ≤ 200 KB.
Use SVG icons (menu, arrow) with aria-labels.
WCAG AA color contrast; heading/body ratio ≥ 3:1.
5. Deliverables
Responsive mockups: mobile (390×844), tablet (834×1112), desktop (1440x1024).
Provide style guide (colors, type scale, spacing tokens) matching NGA aesthetic.
Chinese copy examples（可替换）：
hero-sub："我们诚挚邀请您见证爱情"
about-section titles："她 /他"
输入需求后，SOLO Builder 开始自动分析需求，并生成详细的需求文档（PRD）。在 Flow 模式下，你可以实时看到 PRD 的输出过程，跟随 SOLO 的思考与输出，看着 PRD 一步步成型。
PRD 生成完毕，浏览 PRD，确认无误后，点击**「Ready to build」**开始开发，SOLO Builder 将按照需求文档完成开发任务。
第三步：稍等片刻，网站马上生成
完成代码编辑后，SOLO 会自动运行项目，检查代码是否能正常工作。
现在，NGA 风格的婚礼网站已完美构建完成，TRAE 成功创建了一个基于美国国家美术馆（NGA.gov）视觉风格的优雅婚礼网站，网站核心功能模块完整呈现，包括全屏新人照片、个人肖像和介绍文字、时间地点等信息。
第四步：随心调整，持续优化
如果对页面元素有调整需求，可使用**「选择元素」**功能，选中页面里需修改的部分，用自然语言描述变更内容。
例如，想要将组件中的新人姓名从 “Jessica & Michael”改为 “Leon & Bingo” ，选中名字组件，添加至对话框中，并输入“改成 Leon & Bingo”。发送指令后，SOLO 快速定位并完成调整，灵活便捷。
此外，在测试过程中发现页面最后的 RSVP 按钮点击没有反应，选择按钮，并输入反馈： “点击没有反应，功能没有实现。” SOLO 随即开始检查并修复处理。
SOLO 模式**「选择元素」**功能，支持用户在浏览器中选择元素，并用自然语言指示修改需求，让 AI 更精准地优化页面。发送指令后，SOLO 快速定位并完成调整，灵活便捷。
第五步：一键部署，正式上线
完成开发任务和调试后，最后一步就是上线部署，点击左侧部署卡片，或右上角的部署按钮，即可开始部署。
你的爱情故事独一无二，你的婚礼请柬也应如此，现在专属于你的婚礼请柬网站就上线啦。你可以分享给亲朋好友，邀请他们见证你的幸福。
