skill-gallery

Claude Code + frontend-design · 数据看板

下载 HTML run.json

沙箱预览:页面的脚本会运行,但页面无法访问本站、cookie 或存储,所以依赖 localStorage 的功能可能表现不同。

滚动录屏

页面在桌面宽度下滚动的录屏,用来展示截图看不到的动效。点了播放才会加载视频。

▶ 播放滚动录屏 8 秒 · 839 KB · 720 px

无障碍扫描

对原始页面做的自动化扫描。自动化工具只能发现一部分无障碍问题,扫描结果干净并不代表页面就是无障碍的。

工具
axe-core 4.14.0
严重
0 条规则
较严重
0 条规则
中等
0 条规则
轻微
0 条规则
触发的规则
无

投票

觉得这个结果更好?在下面点 👍。投票需要登录 GitHub。票数以 reaction 的形式存在本仓库的 GitHub Discussions 里,每格一个讨论帖,所有语言共用。

👍 0 截至上次构建,每几个小时更新一次

运行详情

状态
成功
Agent
claude-code 2.1.308
模型
claude-opus-5-5
Effort
high
题目
dashboard v1
Skill 附加句
Use the frontend-design skill.
Skill 来源
https://github.com/anthropics/skills skills/frontend-design
Skill commit
dbd4588f9e
Skill 获取方式
git, 2026-10-25
安装位置
.claude/skills/frontend-design
Skill 是否触发
是
证据
skill_tool_calls: 1, skill_content_loaded: 1, skill_md_reads: 0
用到的内置 skill
dataviz
开始时间
2026-10-26 03:04:13Z
耗时
6m 08s
退出状态
退出码 0
尝试次数
1
Token
input_tokens: 26, cache_creation_input_tokens: 57,879, cache_read_input_tokens: 570,501, output_tokens: 38,731
轮数
20
费用
$1.35
活动
Skill 2, Bash 6, Write 1, Read 6
隔离
全部检查通过
  • ✓ init_event_present
  • ✓ only_builtin_plugins
  • ✓ no_synced_plugins
  • ✓ no_mcp_servers
  • ✓ no_plugin_skills
  • ✓ config_dir_was_empty
  • ✓ home_had_only_throwaway_keychain
  • ✓ real_keychain_unchanged
  • ✓ auto_memory_disabled
  • ✓ skill_listed
外部引用
  • https://fonts.googleapis.com link[rel=preconnect]
  • https://fonts.gstatic.com link[rel=preconnect]
  • https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap link[rel=stylesheet]
  • https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700;800&display=swap link[rel=stylesheet]
对 index.html 的静态扫描结果,来自 run.json。
违反规则
无
输出
index.html, 52.0 KB
截图(桌面)
1440×900, 页面高 2022 px, 4 个远程请求
截图(手机)
390×844, 页面高 3861 px, 4 个远程请求
主机
Darwin 25.6.0, arm64, node v22.18.0