在Antigravity中对比体验Claude Sonnet 4.5模型

之前使用了Antigravity的gemini pro 3模型，发现它似乎对语义理解有点跑偏，正好再来对比下我们的常胜将军 Claude Sonnet 4.5 模型
我们还是用的同样的简短prompt

1 2	帮我生成一个todo应用，基于react实现，需要具有非常精美的UI，媲美Instagram那样的网站

可以看到规划的plan也比较长

代码跟样式也是独立分开的

主体代码

import React from 'react';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import TodoFilter from './components/TodoFilter';
import './App.css';

function App() {
    const [todos, setTodos] = React.useState(() => {
        const saved = localStorage.getItem('todogram-todos');
        return saved ? JSON.parse(saved) : [];
    });
    const [filter, setFilter] = React.useState('all');

    
    React.useEffect(() => {
        localStorage.setItem('todogram-todos', JSON.stringify(todos));
    }, [todos]);

    const addTodo = (text) => {
        const newTodo = {
            id: Date.now(),
            text,
            completed: false,
            createdAt: new Date().toISOString()
        };
        setTodos([newTodo, ...todos]);
    };

    const toggleTodo = (id) => {
        setTodos(todos.map(todo =>
            todo.id === id ? { ...todo, completed: !todo.completed } : todo
        ));
    };

    const deleteTodo = (id) => {
        setTodos(todos.filter(todo => todo.id !== id));
    };

    const editTodo = (id, newText) => {
        setTodos(todos.map(todo =>
            todo.id === id ? { ...todo, text: newText } : todo
        ));
    };

    const clearCompleted = () => {
        setTodos(todos.filter(todo => !todo.completed));
    };

    const getFilteredTodos = () => {
        switch (filter) {
            case 'active':
                return todos.filter(todo => !todo.completed);
            case 'completed':
                return todos.filter(todo => todo.completed);
            default:
                return todos;
        }
    };

    const filteredTodos = getFilteredTodos();

    return (
        <div className="app">
            {/* Animated Background */}
            <div className="background-gradient"></div>

            {/* Main Container */}
            <div className="container glass scale-in">
                <header className="app-header">
                    <h1 className="app-title gradient-text">TodoGram</h1>
                    <p className="app-subtitle">Instagram-Style Todo App</p>
                </header>

                <TodoInput onAdd={addTodo} />

                <TodoList
                    todos={filteredTodos}
                    onToggle={toggleTodo}
                    onDelete={deleteTodo}
                    onEdit={editTodo}
                />

                {todos.length > 0 && (
                    <TodoFilter
                        todos={todos}
                        filter={filter}
                        onFilterChange={setFilter}
                        onClearCompleted={clearCompleted}
                    />
                )}
            </div>
        </div>
    );
}

export default App;

我这个前端外行看起来也比较清晰
好像样式也是这几个比较正常的

我个人感觉代码能力来讲好像还是Claude的稍强一点，gemini可能在一些评分上更强，是不是应该再试试更有难度的任务对比了

推荐订阅源

Nicksxs's Blog