Stitch:一款基于生成式AI的UI设计与前端代码生成工具

Stitch是谷歌实验室（Google Labs）在2025年I/O大会上推出的一款基于生成式AI的UI设计与前端代码生成工具，旨在简化从设计构思到代码实现的流程，提升开发效率。已于今天正式上线，可通过其官方网站体验，目前仅支持英文输入。

从AI生成前端代码的工具来说，先前体验过Bolt.new，适合开发者使用，而谷歌Stitch可能更适合设计师/产品经理，比如生成原型。两者的区别简单概括如下：

登录官网
https://stitch.withgoogle.com/体验下。以下是聊天过程：

• alex lee
• English Language Practice App
• Stitch
• Could you please describe the specific screens you have in mind for the English Language Practice App? This will help me tailor the design to your exact needs.
• alex lee
• Core Features: Conversational practice with AI-powered chat partners Vocabulary building with contextual learning Pronunciation exercises with audio feedback Progress tracking and personalized learning paths Different difficulty levels for learners at various stages Daily practice streaks and gamification elements Quick language tips and cultural notes Offline practice capabilities for key exercises Design Elements: Clean, minimalist interface with ample white space and clear typography Color system with primary blue (#0A84FF), subtle accent colors, and neutral tones Subtle animations for transitions, achievements, and feedback Responsive layout optimized for both portrait and landscape orientations Consistent 8px spacing system with proper visual hierarchy Accessibility-focused design with high contrast ratios and clear touch targets Frosted glass effects for cards and modal overlays Intuitive iconography with consistent visual language
• Stitch
• Thank you for the detailed description of the core features and design elements for the English Language Practice App. Based on this, I recommend the following screens:
• Main Dashboard: This screen will be the central hub, providing an overview of the user's progress, current learning path, and daily practice streak. It should offer easy access to key features like conversational practice, vocabulary exercises, and pronunciation training.
• Conversational Practice: This screen will facilitate AI-powered conversations. Users should be able to easily start a conversation, view chat history, and receive real-time feedback on their language use.
• Vocabulary Builder: This section will present vocabulary exercises with contextual learning. It should allow users to learn new words, see them used in context, and practice using them in sentences.
• Pronunciation Exercise: This screen will focus on pronunciation training with audio feedback. Users should be able to listen to correct pronunciations, record their attempts, and receive constructive feedback.
• Progress and Personalization: This area will display detailed progress tracking, including scores, time spent, and areas for improvement. It will also manage personalized learning paths and difficulty levels.
• Settings: This screen will allow users to manage their profiles, adjust app settings (like notifications and display preferences), and access help or support.
• Would you like to proceed with designing these screens for your English Language Practice App?
• alex lee
• yes

生成的图片如下，看起来还是蛮不错的：

本来有6张的，两张没有刷出来，让其重新生成，跟上面结合起来，一个APP的原型已经基本呈现出来了。

至于如何生成前端代码，看起来是只能导出为Figma，再用Figma Make UI工具来生成了，这点不像Bolt.new直接可以生成整个前端代码工程及相关页面（基于React + Tailwind CSS）。

#普通人如何借AI创业#