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

发表于 分类于 阅读次数： 阅读次数： Disqus：

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

1
2

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

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


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

主体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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');

    // Save to localStorage whenever todos change
    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可能在一些评分上更强，是不是应该再试试更有难度的任务对比了