Project Toothless 是一次大胆的开源实验,目标是让人工智能主导前端界面的实时生成与导航,从根本上改变传统的网页构建流程。在传统开发模式中,开发者需要预先设计页面结构、静态路由和交互逻辑,而Project Toothless 采用一种完全不同的思路:每一次用户点击都由AI决定下一步该生成什么样的HTML内容、布局和文案。这样的设计既富有想象力,也带来了技术与产品层面的全新问题与可能性。 Project Toothless 的核心愿景是将AI模型作为即时的"UI 设计师+前端工程师+内容创作者",通过理解用户操作的上下文来生成页面。系统以 Django 作为后端框架,辅以 HTMX 进行无缝的局部页面更新。HTMX 的优势在于可以在服务器端渲染HTML并在不依赖复杂前端框架的情况下实现动态导航,这与以服务端为主的思想高度契合。
AI部分则基于 Anthropic 的 Claude Sonnet 4.5,通过 Claude Agent SDK 调用模型,生成符合约定样式与长度的HTML片段,供前端插入并呈现给用户。 在交互设计上,Project Toothless 秉承"输入越少,创造越多"的原则。用户从一个简单的入口开始,例如输入城市名以查看天气信息,随后每一次点击页面上的任何元素,系统都会将当前页面的来源、点击目标和额外上下文(比如日期、地名等)一起传给Claude。AI会根据这些上下文与内部的系统提示(system prompt)生成下一页的完整HTML。为了保证视觉风格的一致性,项目使用了一个集中管理的系统提示,定义了类似Airbnb的极简设计风格、颜色方案和文本长度目标,从而减少生成内容的风格漂移。 技术实现上,Project Toothless强调高效与可控。
每次生成的页面被限制在一个较小的字符数目标内,以减少API调用成本并提高响应速度。生成流程中,前端通过HTMX发送包含hx-vals元数据的请求,这些元数据明确记录了导航上下文,方便后端将完整的信息传给Claude Agent SDK。服务器端对模型返回的HTML进行最小化的校验与包装,然后直接返回给浏览器,由HTMX完成替换与插入。这样的工作流避免了复杂的前端状态管理,让后端和AI承担更大的生成职责。 Project Toothless 的开放源码性质为研究者与开发者提供了探索AI生成UI的起点。开发者可以通过修改 core/system_prompt.md 来调整设计系统,包括配色、排版习惯、组件样式和每页输出的字符上限。
通过调整 core/api.py 中的提示词逻辑,可以改变AI对页面结构、语气与功能的理解,从而让整个应用展现差异化的行为。这种可配置性使得Project Toothless既适用于概念验证,也适合在受控环境中进行进一步实验。 尽管概念吸引人,Project Toothless 仍然处于早期实验阶段,存在不少限制与挑战。首先,生成内容的质量和一致性难以完全保证。AI有时会输出不完整或语义混乱的HTML,或者生成不符合预期的交互元素。其次,实时生成每个页面需要消耗API调用额度,成本随访问量增加而增加,通常每页生成的成本大约在0.01到0.05美元之间。
第三,生成速度存在波动,通常需要几秒钟到十几秒,用户体验需要结合加载动画与可感知反馈来优化。最后,安全性、数据持久化、错误恢复与多用户账户体系等生产级功能在当前实现中并未完备,无法直接部署到生产环境。 在用户体验层面,AI驱动的界面带来了有趣的使用模式。用户不再依赖预定义的菜单或导航路径,每一次点击都是一次探索行为。这样的体验更接近"对话式探索",但也可能增加认知负担,因为用户无法像在传统网站那样依靠熟悉的布局与导航层级。为了缓解这种不确定性,Project Toothless 引入了简洁的视觉风格和清晰的交互提示,试图在AI创造性与可用性之间找到平衡。
从工程实践角度看,Project Toothless 表示了一种新的分工方式。前端开发的职责部分向后端和AI转移,设计系统与提示词工程(prompt engineering)成为关键技能。系统提示需要精细化地描述视觉规范、语气和功能约束,以引导AI生成稳定且符合预期的UI。与此同时,后端要承担更多输入校验、上下文管理与生成结果的轻量化处理。HTMX 提供的简洁交互机制降低了前端开发门槛,使得团队可以将资源集中在提示词优化和用户体验调研上。 Project Toothless 的研究价值也体现在对AI可解释性与控制性的探索上。
通过将导航上下文以结构化元数据的形式传递,团队可以观察到哪些上下文信息对生成效果有显著影响,从而反向优化上下文传递策略。系统提示的调整可以显著影响生成HTML的复杂度与一致性,这提示了未来需要建立更系统化的提示词管理与版本控制机制,以便在团队协作中更可控地演进AI行为。 关于伦理与风险管理,Project Toothless 的开发者明确提醒用户项目仅用于实验目的,不适合生产。AI生成的内容可能包含错误、偏见或不可预见的行为,这在用户交互中尤其敏感。开发者需要在生产化之前引入过滤机制、内容审核和日志记录,以便追踪与回溯问题生成的根因。此外,隐私与数据处理也是关键问题,任何将用户上下文传给外部AI API的做法都需谨慎评估合规性与隐私风险。
在未来发展方向上,Project Toothless 展现出多种可能性。将AI生成与规则引擎结合可以在保证可控性的同时保留创造力,例如对关键UI区域采用模板化约束,对次要内容允许AI自由发挥。引入多模态模型可以让生成的页面包含自动生成的图像或图标,从而提升视觉吸引力。为了提高响应速度,可以采用缓存策略、分层生成或低延迟模型服务等方式。若要向产品级演进,需要补充用户账户体系、持久化存储、版本回滚与错误恢复机制。 Project Toothless 同时也为设计与开发流程带来了启示。
在传统流程中,设计稿、前端实现与内容编写是相对独立的环节,而AI生成UI模糊了这些界限。设计师需要学习如何用系统提示来描述设计规则,前端工程师需要关注如何将AI生成的HTML与工程架构融合,产品经理需要定义合适的探索边界与用户保护策略。团队协作将更多依赖于提示词版本、生成策略与自动化测试来保证体验的一致性。 对于想要上手Experiment的人,Project Toothless 的开源仓库提供了实际可运行的代码、演示视频与示例配置。搭建环境的门槛相对较低,主要需求包括Python 3.13、Django、HTMX以及Anthropic的API key。开发者可以在本地运行示例,通过修改系统提示与模板文件来观察AI行为的变化。
这样的实践非常有价值,因为只有在真实交互中才能直观感受AI生成UI在可用性、速度与一致性上的表现。 总结来看,Project Toothless 是一次关于AI如何参与并重塑用户界面的有趣实验。它展示了AI不仅能生成文本或图像,还能在实时交互中创建结构化的HTML页面,从而为未来的交互模型提供了新的想象空间。尽管目前仍存在质量控制、成本、安全与可用性等重大问题,但作为研究与原型验证,它为设计系统化的提示工程、服务端生成流程与AI驱动体验提供了宝贵的参考。对于那些愿意在前沿领域尝试新方法的开发者与研究者,Project Toothless 提供了一个开放的平台,用以探索AI生成界面的可能性与局限。 未来,随着更强的多模态模型、更多的成本优化手段和更完善的生成控制策略出现,AI即时生成用户界面可能从实验走向实践。
Project Toothless 代表了朝向那一目标迈出的早期步伐,让我们看到一种不同于传统开发流程的可能性,并促使人们反思当AI能自由创造交互时,设计、工程与产品如何协同演化以实现可靠又富有创意的用户体验。 。
