SHARE/深研手记 INDEX ↗

Stress Test · 2026-08-20→21 · Index 013

grok vs agy
30 case 网页生成能力压测

同一组 30 个不同网页场景的 prompt 分别喂给 grok 1.0.5（xAI 官方 Build TUI）和 agy 1.1.13（Claude Code fork），共 60 个产物。覆盖审美 / 视觉·高级 / 技术 / 动画 / 前端理解 / 真实业务 / 大尺度工程 / 高级可视化 / 交互工程 / 状态·综合·性能 10 大能力维度。点击下方任意「grok → / agy →」按钮即可打开对应 HTML 产物并排对比。

产物总数6030 case × 2 CLI
agy 平均快3.2×182s vs 57s/任务均值
agy 产物平均大+67%27 KB vs 18 KB 清洗后均值
grok 需切片清洗14/20L3/L4 阶段思考文本混入
01 / 09 审美 L1–L3 · 6 case
CASE 01 · AESTHETICS · L1
美术馆请柬风名片
独立字体设计师个人名片，冷调象牙白底 + 暗金强调。
GROK56s · 3.4 KB
AGY36s · 10.8 KB
grok →agy →
CASE 02 · AESTHETICS · L1
包豪斯+日式平面海报
「看不见的城市」文学沙龙海报，几何构图+大字版式。
GROK104s · 7.9 KB
AGY39s · 13.6 KB
grok →agy →
CASE 03 · AESTHETICS · L1
摄影师作品集 masonry
12 张作品瀑布流，三档响应式断点。
GROK74s · 11.9 KB
AGY35s · 16.8 KB
grok →agy →
CASE 11 · AESTHETICS · L3
杂志感长文阅读页
三栏正文+pull quote+图注+注脚+drop cap。
GROK334s · 16.8 KB
AGY62s · 31.4 KB
grok →agy →
CASE 12 · VISUAL · L3
年度活动主视觉多层叠加
噪点底+几何叠加+文字绕排+真跳动倒计时。
GROK251s · 12.6 KB
AGY58s · 28.2 KB
grok →agy →
CASE 13 · THEME · L3
暗色主题落地页
CSS 变量双主题+预+系统偏好。
GROK286s · 18.8 KB
AGY46s · 28.0 KB
grok →agy →
02 / 09技术L2 · 3 case
CASE 04 · DATA-VIZ · L2
产品数据看板 + SVG 三件套
KPI+折线+环形+热力图，全手写 SVG 无外部库。
GROK278s · 35.7 KB
AGY97s · 38.3 KB
grok →agy →
CASE 05 · LANDING · L2
SaaS 营销页（多区块）
hero+特色+案例+价格+FAQ，类 Linear/Notion 风。
GROK113s · 18.1 KB
AGY67s · 34.3 KB
grok →agy →
CASE 06 · FORM · L2
三态表单 CSS-only tab
登录/注册/找回，0 JS + 完整视觉状态机。
GROK202s · 17.3 KB
AGY47s · 21.6 KB
grok →agy →
03 / 09动画L2 · 3 case
CASE 07 · LOADER · L2
5 种加载动画
三点波浪/环形/进度扫光/方块折叠/环形进度。
GROK165s · 10.8 KB
AGY47s · 18.9 KB
grok →agy →
CASE 08 · SCROLL · L2
滚动触发动画长页
「一本书的一生」6 阶段，IO+进度条+章节锚点。
GROK292s · 18.5 KB
AGY46s · 20.7 KB
grok →agy →
CASE 09 · INTERACTION · L2
8 种微交互 demo
涟漪/悬浮/toggle/勾选/浮动 label/心形撒花等。
GROK173s · 13.4 KB
AGY48s · 24.1 KB
grok →agy →
04 / 09前端理解L2–L3 · 2 case
CASE 10 · DESIGN SYSTEM v1 · L2
设计系统文档站（精选）
token + 5 类组件 + 锚点导航 + scrollspy。
GROK358s · 36.7 KB
AGY103s · 67.4 KB
grok →agy →
CASE 20 · DESIGN SYSTEM v2 · L3
设计系统 v2（30+ 组件）
token×6 + 30+ 组件 + dark mode + scrollspy。
GROK478s · 59.2 KB
AGY196s · 91.2 KB
grok →agy →
05 / 09真实业务L3–L4 · 5 case
CASE 14 · E-COMMERCE · L3
电商商品详情页
多角度切换+规格选择+评价+推荐+购买。
GROK116s · 18.1 KB
AGY76s · 44.1 KB
grok →agy →
CASE 15 · COURSE · L3
在线教育课程详情
大纲+讲师+试听+学员评价+FAQ。
GROK289s · 27.3 KB
AGY103s · 52.8 KB
grok →agy →
CASE 16 · PUBLISHING · L3
出版业图书详情页
3D 封面+目录+试读+编辑推荐+相关推荐。
GROK207s · 22.1 KB
AGY74s · 48.6 KB
grok →agy →
CASE 17 · LIVE · L3
直播预告/观看页
互动消息流+商品列表+倒计时+开播状态切换。
GROK154s · 25.8 KB
AGY85s · 50.0 KB
grok →agy →
CASE 21 · FULL LANDING · L4
超完整产品落地页
8 section 综合：hero+案例+定价+FAQ+团队。
GROK590s · 56.3 KB
AGY144s · 77.4 KB
grok →agy →
06 / 09大尺度工程L3 · 2 case
CASE 18 · ADMIN · L3
后台管理系统 dashboard
侧栏+订单表+排序+批量+分页+筛选。
GROK185s · 32.3 KB
AGY105s · 55.4 KB
grok →agy →
CASE 19 · MULTIPAGE · L3
多页站点（首页+2 二级页）
跨页风格一致：导航/字体/配色/留白一致。
GROK0s · FAILED
AGY147s · 69.5 KB
grok →agy →
07 / 09高级可视化L4 · 3 case
CASE 22 · STOCK · L4
股票 K 线图
蜡烛图+成交量柱+MA5/10/20，hover OHLC。
GROK325s · 22.6 KB
AGY88s · 32.3 KB
grok →agy →
CASE 23 · TIMELINE-GRAPH · L4
时间线+人物关系图
26 年纵向时间线+15+节点关系图联动。
GROK564s · 45.9 KB
AGY159s · 68.6 KB
grok →agy →
CASE 24 · CHINA-MAP · L4
中国地图可视化
34 省 SVG+多维数据切换+hover 高亮。
GROK1263s · 65.8 KB
AGY183s · 46.7 KB
grok →agy →
08 / 09交互工程L4 · 3 case
CASE 25 · MULTI-STEP FORM · L4
4 步多步骤表单
账户→地址→支付→确认，跨步校验+localStorage。
GROK212s · 22.9 KB
AGY68s · 46.6 KB
grok →agy →
CASE 26 · KANBAN · L4
拖拽看板
4 列拖拽+编辑+筛选+modal 创建。
GROK211s · 18.0 KB
AGY59s · 31.3 KB
grok →agy →
CASE 27 · MARKDOWN EDITOR · L4
Markdown 富文本编辑器
工具栏+实时预览+快捷输入+撤销重做+localStorage。
GROK280s · 27.5 KB
AGY70s · 30.1 KB
grok →agy →
09 / 09状态·综合·性能L4 · 3 case
CASE 28 · STATE GALLERY · L4
全状态组件库
9 种状态：loading/spinner/skeleton/empty/error/404/500/offline/maintenance。
GROK183s · 28.7 KB
AGY90s · 47.2 KB
grok →agy →
CASE 29 · A11Y · L4
a11y+i18n+双主题综合
无障碍完整+国际化+主题切换，键盘可全操作。
GROK307s · 49.7 KB
AGY93s · 48.1 KB
grok →agy →
CASE 30 · PERF · L4
性能优化版数据看板
lazy load+骨架屏+RAF 分批+contain+prefers-reduced-motion。
GROK328s · 24.1 KB
AGY95s · 45.8 KB
grok →agy →