锤子前端

Now vibe coding, so learning hammer FE ?

Search: #开源项目

  1. 锤子前端

    《Gr8r Studio：一款平静、结构化的项目管理工作台》

    《Gr8r Studio：一款平静、结构化的项目管理工作台》

    标签：
    #开源项目管理 #Web前端开发 #任务看板 #纯ES模块 #Vite构建

    总结：
    Gr8r Studio 是一个开源的项目管理应用，提供首页仪表盘、收件箱、我的任务和多视图项目管理（看板/列表/表格/日历/时间线/文件），以及成员、团队、动态和设置等完整功能；它完全用原生 JavaScript ES 模块和 CSS 构建，无任何 UI 框架和运行时依赖，仅由 Vite 打包。

    文章要点：
    1. 功能齐全：包含仪表盘、收件箱、我的任务，以及看板、列表、表格、日历、时间线、文件六种项目视图。
    2. 零框架零依赖：纯 JS ES 模块 + CSS 实现，不引入任何 UI 框架或运行时依赖。
    3. 结构清晰：src 目录按 styles、core（状态与主题）、ui、shell（路由与布局）、views、overlays、features、actions 分层组织。
    4. 工程化完善：内置 ESLint + Prettier 校验，CI 在每次推送和 PR 时跑 lint、格式检查和生产构建。
    5. 可直接预览：仓库附带演示数据（data/seed.js）和 README 截图，vercel.json 配置了一键构建部署到 Vercel。
    6. 上手门槛低：仅需 Node.js 18+（.nvmrc 固定 22），适合作为学习现代前端工程化的参考项目。

    URL：https://github.com/gr8rstudio/gr8r-studio
    GitHub
    GitHub - gr8rstudio/gr8r-studio: Gr8r Studio: a calm, structured project management workspace. Vite + plain ES modules.
    GitHub - gr8rstudio/gr8r-studio: Gr8r Studio: a calm, structured project management workspace. Vite + plain ES modules.
    Gr8r Studio: a calm, structured project management workspace. Vite + plain ES modules. - gr8rstudio/gr8r-studio

    开源项目管理Web前端开发任务看板纯ES模块Vite构建

  2. 锤子前端

    《Paperclip：用开源“公司”编排 AI 智能体团队》

    《Paperclip：用开源“公司”编排 AI 智能体团队》

    标签：
    #AI_Agent编排 #Agentic任务管理 #组织治理与成本控制 #多智能体协作 #开源自托管 #Nodejs与React #OrgChart #Heartbeat调度 #预算管控 #多组织隔离

    总结：

    Paperclip 是一个开源的自托管应用，用“经营公司”的方式管理 AI 智能体团队：它把目标、组织架构、任务、预算、审批、审计和运行环境整合进一个控制台。你可以接入 Claude Code、Codex、Cursor、OpenClaw 等任意 Agent，让它们像员工一样有角色、汇报线、预算与心跳调度，并在一个看板里追踪进度与成本。

    文章要点：
    1. 核心定位是“管公司，不是管聊天”：Paperclip 不造 Agent、不做拖拽式工作流，而是把多个 Agent 编排成有目标、有层级、有治理的组织。
    2. 使用路径很直接：先定义商业目标，再“招聘”不同职能的 Agent（CEO/CTO/工程/设计/营销等），最后审批策略、设置预算并启动运行。
    3. 四大支柱覆盖日常到平台层：Agentic 任务管理、Agent 组织架构、Agent 员工培训、Agentic OS（运行基础设施）。
    4. 任务系统强调可审计与防冲突：任务带公司/项目/目标链路，支持原子领取、执行锁、阻塞依赖、评论、附件与产出物。
    5. Heartbeat 让 Agent 按计划醒来干活：支持定时唤醒、事件触发、上下文续接、结构化日志与自动恢复，减少人工盯梢。
    6. 成本控制是硬约束：按公司/Agent/项目/目标/模型等维度追踪 token 与费用，预算到线会告警并硬停止，避免“跑飞”。
    7. 治理与回滚机制完整：审批流、执行策略、决策记录、暂停/终止 Agent、配置版本化与审计日志都在系统内完成。
    8. 支持多组织隔离与可移植性：一套部署可跑多家“公司”，数据完全隔离；还能导出/导入组织配置并做密钥清理。
    9. 运行环境面向真实开发流程：支持项目工作区、隔离执行工作区（如 git worktree）、开发服务/预览链接、密钥注入与技能加载。
    10. 它不是聊天机器人、不是 Agent 框架、不是代码评审工具，而是面向“多 Agent 团队”的编排控制平面。

    URL：
    https://github.com/paperclipai/paperclip
    GitHub
    GitHub - paperclipai/paperclip: The open-source app everyone uses to manage agents at work
    GitHub - paperclipai/paperclip: The open-source app everyone uses to manage agents at work
    The open-source app everyone uses to manage agents at work - paperclipai/paperclip

    AI_Agent编排Agentic任务管理组织治理与成本控制多智能体协作开源自托管Nodejs与ReactOrgChartHeartbeat调度预算管控多组织隔离

  3. 锤子前端

    《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

    《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

    标签：
    #前端开发 #AI框架 #TanStack #TypeScript #开源

    总结：

    TanStack AI 正式从早期原型迈入 RC（Release Candidate）阶段，标志着其从一个简单的 LLM 聊天方法，成长为覆盖聊天、媒体生成、MCP、沙箱、Agent 编排等全场景的 AI 开发框架。核心设计哲学是"不锁定用户"——在传输层、提供商、前后端技术栈上都保持中立，同时通过极致的类型安全和统一的 API 模式降低学习成本。项目由三人业余时间维护，完全开源，无商业路线图。

    文章要点：

    1. 从小 chat() 到大生态 — 最初只有 4 个提供商和一个自定义协议，如今已支持 24+ 提供商，采用 AG-UI 官方协议（被 20+ Agent 框架跨语言支持），并扩展到媒体生成、MCP、沙箱、Agent Harness 等领域。

    2. 中间件是架构的核心超能力 — 几乎所有高级功能（持久化、沙箱 Agent、内存、遥测）都以中间件形式接入 chat() 方法，Durability 则通过适配器插入流式响应。Lazy Tool Calling 用一个布尔标志就能降低 Token 成本。

    3. 传输层零锁定 — 提供 SSE、WebSocket、HTTP Stream、Cap'n Web 等原生传输原语，客户端通过自定义连接适配器消费流，让你对传输层有端到端的完全控制权。

    4. 一套 API 模式打遍所有模态 — 无论是文本生成、图像生成、视频生成、音频生成、转录还是实时音频，API 结构几乎完全相同。学一次模式，换适配器即可，不用学 20 套不同 API。

    5. 类型安全是 DNA 级别 — 不支持的模型选项、缺少必填属性、把某提供商专属工具传给不支持的模型……统统在编译期报错。目标是让你在再复杂的应用里也能自信上线。

    6. chat() 方法是全能核心 — 支持直接对话 LLM 和沙箱 Agent Harness；内置持久化与 Durability（刷新页面、切换对话后能从断点实时续流）；支持 Codex 等 Agent 在远程/本地沙箱中运行；还有 Code Mode（Agent 在 isolate 中写代码并执行，优化性能和成本）。

    7. 媒体生成是一等公民 — 实时音频、TTS、图像/视频/音频/音乐生成、转录等全部稳定可用，覆盖 100+ 模型。支持流式直传客户端或一次性生成，两者切换无缝。

    8. RAG 与记忆 — 通过 Cohere、OpenRouter 等提供商支持嵌入和重排序；支持所有主流厂商的 Agent 记忆，让 Agent 跨对话记住用户偏好和关键事实。

    9. 沙箱与 Agent Harness 不挑提供商 — 不强制你用 Daytona、E2B 或 Vercel Sandboxes，基础设施随你选。支持 Codex、Claude Code、Grok、OpenCode 等 20+ ACP 兼容 Agent，甚至能自建本地编码 Agent。

    10. MCP 支持带类型生成 — 不仅能连接外部 MCP 服务器，还能通过 CLI 为远程 MCP 暴露的工具生成类型，保持端到端类型安全。支持连接池和生命周期管理。

    11. 持久化与 Durability 是亮点 — 提供存储原语，你只需实现 Store 并通过一致性测试套件验证，接入持久化中间件后，用户一个月后回来也能从断点续聊。Durability 适配器可将流块持久化到内存、Durable Streams 等，用户重连后不会漏掉任何内容——全部配置约 20 行代码。

    12. 未来路线图 — 核心架构已锁定，接下来重点在 Agent 工作流与编排（并行运行、定时任务、复杂工作流协调），以及继续补齐提供商生态。完全开源，无商业 upsell，欢迎社区贡献。

    URL：
    https://tanstack.com/blog/tanstack-ai-rc
    TanStack
    TanStack AI Enters the RC Phase | TanStack Blog
    TanStack AI Enters the RC Phase | TanStack Blog
    TanStack AI enters the release candidate phase. The architecture is locked in, with 24 providers, AG-UI, media generation, MCP, sandboxes, and persistence.

    前端开发AI框架TanStackTypeScript开源

  4. 锤子前端

    《Color.js：认真对待颜色这件事》

    《Color.js：认真对待颜色这件事》

    标签：#前端 #Web开发 #ColorJS #CSS_Color_Level_4 #颜色空间转换 #色域映射 #DeltaE #TreeShakeable #NPM库 #开源项目 #Lea_Verou #颜色插值

    总结：
    由CSS颜色规范编辑者Lea_Verou和Chris_Lilley打造的专业颜色处理库，支持Lab/LCh、OKLab/OKLCh、Display_P3等海量颜色空间，完整兼容CSS_Color_Level_4。提供真正的色域映射、多种DeltaE色差算法和色度适应方法，API清晰易用且支持链式操作。模块化设计可tree-shake，零依赖，已被Sass、Open_Props、axe等知名项目采用，NPM累计下载超2.46亿次。

    文章要点：
    1. 出身"正规军"——两位作者正是CSS颜色规范的编辑者，对颜色科学的理解刻在DNA里，不是随便写写的玩具库
    2. 颜色空间全家桶——Lab/LCh、OKLab/OKLCh、sRGB家族、Display_P3、Jzazbz、REC.2100等统统支持，转换随心所欲
    3. 科学严谨不糊弄——真正的色域映射而非粗暴裁剪，多种DeltaE色差计算和色度适应算法，专业度拉满
    4. API好用又灵活——面向对象+静态函数双模式，链式操作丝滑流畅，还能按需引入模块做tree-shake，包体积可控
    5. 业界认可度超高——浏览器用它测试CSS_Color_4/5实现，Sass、Open_Props、axe都在用，NPM下载量突破2.46亿
    6. 生态还在扩张中——除了核心库，还在孵化Color_Elements网页组件、Color_Apps工具集和Color_Palettes配色研究项目

    URL：https://colorjs.io

    前端Web开发ColorJSCSS_Color_Level_4颜色空间转换色域映射DeltaETreeShakeableNPM库开源项目Lea_Verou颜色插值

  5. 锤子前端

    《cc-connect：本地AI编程助手连接消息平台桥梁》

    《cc-connect：本地AI编程助手连接消息平台桥梁》

    标签：#开发工具 #AI编程助手 #ClaudeCode #CursorAgent #GeminiCLI #Codex #Telegram #飞书 #钉钉 #Slack #Discord #WeChatWork #LINE #QQ #Weibo

    总结：
    cc-connect 是一个开源的本地AI编程代理桥接工具，让你可以在飞书、钉钉、Telegram、Slack、Discord、企业微信、LINE、QQ、微博甚至个人微信等11个平台上，随时随地"聊天式"操控 Claude Code、Cursor、Gemini CLI、Codex 等10+种AI编程助手。无需公网IP，手机发消息就能让AI写代码、改Bug、做数据分析，真正实现" anywhere, anytime "的AI开发体验。

    文章要点：
    • 超全平台覆盖：支持飞书、钉钉、Telegram、Slack、Discord、企业微信、LINE、QQ、微博、个人微信等11个主流聊天平台，大部分平台无需公网IP即可直连，手机/平板随时操控
    • 10+AI助手全家桶：完美桥接 Claude Code、Codex、Cursor Agent、Gemini CLI、Kimi CLI、Qoder CLI、OpenCode、iFlow CLI、Pi、Devin 等，还支持 ACP 协议兼容的任何新代理
    • 聊天里掌控一切：通过 /model 切换模型、/mode 调整权限模式、/dir 切换工作目录、/new 管理会话、/cron 设置定时任务，所有操作都在聊天窗口完成
    • 多Agent协同作战：支持在一个群聊里绑定多个AI机器人，让Claude和Gemini互相配合、接力完成任务，实现"AI团队"协作
    • 多模态与记忆：支持语音消息（STT/TTS）、图片截图、文件收发；Agent记忆持久化，/memory 指令随时读写，避免重复交代背景
    • Web管理后台：内置完整的Web Admin UI，支持项目CRUD、会话监控、定时任务编辑、Provider管理，5种语言界面，零配置上手
    • 安全隔离：支持 Linux/macOS 下的 OS-User 隔离运行，不同项目可用不同Unix用户启动Agent，配合 cc-connect doctor 做安全审计
    • 生命周期钩子：支持7种事件类型（消息收发、会话启停、定时触发、权限请求、错误）触发Shell命令或HTTP Webhook，方便集成CI/CD

    URL：https://github.com/chenhg5/cc-connect
    GitHub
    GitHub - chenhg5/cc-connect: Bridge local AI coding agents (Claude Code, Cursor, Gemini CLI, Codex) to messaging platforms (Feishu/Lark…
    GitHub - chenhg5/cc-connect: Bridge local AI coding agents (Claude Code, Cursor, Gemini CLI, Codex) to messaging platforms (Feishu/Lark…
    Bridge local AI coding agents (Claude Code, Cursor, Gemini CLI, Codex) to messaging platforms (Feishu/Lark, DingTalk, Slack, Telegram, Discord, LINE, WeChat Work). Chat with your AI dev assistant f...

    开发工具AI编程助手ClaudeCodeCursorAgentGeminiCLICodexTelegram飞书钉钉SlackDiscordWeChatWorkLINEQQWeibo

  6. 锤子前端

    《Pixelle-Video：AI全自动短视频引擎》

    《Pixelle-Video：AI全自动短视频引擎》

    标签：#AI工具 #视频生成 #ComfyUI #TTS #开源项目 #Streamlit #Python

    总结：
    Pixelle-Video 是一款开源的 AI 全自动短视频生成工具，通过 Streamlit 提供可视化 Web 界面，支持从文案创作、AI 配图、语音合成到视频拼接的完整工作流，用户只需输入主题即可一键生成带 BGM 的短视频，且支持完全本地免费运行。

    文章要点：
    - **全流程自动化**：输入主题后，AI 自动完成脚本撰写、分镜规划、图片生成、语音配音和视频合成，几分钟内输出成品短视频
    - **灵活的内容输入**：支持"AI 生成内容"模式（输入主题自动写稿）和"固定文案"模式（直接粘贴现成文案），满足不同创作需求
    - **丰富的语音与视觉配置**：TTS 支持 Edge-TTS、Index-TTS 等多种工作流，还可上传参考音频进行声音克隆；图像生成支持本地 ComfyUI 和云端 RunningHub，风格可通过提示词前缀自由定制
    - **可扩展的模板系统**：提供静态、图片、视频三类 HTML 模板，支持竖屏/横屏/方形多种尺寸，懂前端的同学还能自定义模板
    - **零成本运行方案**：本地部署 Ollama + ComfyUI 可实现完全免费使用；也支持通义千问、GPT、DeepSeek 等云端 API 作为备选
    - **开箱即用的部署方式**：Windows 用户有免配置一键整合包，macOS/Linux 用户通过 uv 即可快速启动，门槛非常友好

    文章URL：https://github.com/AIDC-AI/Pixelle-Video
    GitHub
    GitHub - ATH-MaaS/Pixelle-Video: 🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine
    🚀 AI 全自动短视频引擎 | AI Fully Automated Short Video Engine - ATH-MaaS/Pixelle-Video

    AI工具视频生成ComfyUITTS开源项目StreamlitPython

  7. 锤子前端

    《OpenWolf：Claude Code 的开源"第二大脑"》

    《OpenWolf：Claude Code 的开源"第二大脑"》

    标签：#AI辅助编程 #Claude_Code #Token优化 #开发工具

    总结：OpenWolf 是一款为 Claude Code CLI 设计的开源中间件，通过 6 个无感知的生命周期钩子脚本，为 AI 助手提供项目文件索引、学习记忆和 Token 追踪能力。实测在 20 个项目、132+ 会话中平均减少 65.8% 的 Token 消耗，最高可达 80%，同时拦截 71% 的重复文件读取，让 Claude Code 从"盲目工作"变成"有记忆地智能工作"。

    文章要点：
    - 解决 Claude Code 的"盲目"痛点：Claude 在读取文件前不知道文件内容，会重复读取同一文件、扫描整个目录找函数，导致 Token 消耗过快
    - 6 个钩子脚本实现无感知增强：基于 SessionStart、PreToolUse、PostToolUse、Stop 三个生命周期事件，自动执行文件索引、重复读取拦截、偏好记忆和 Token 估算，无需改变任何工作习惯
    - 核心文件系统构建"第二大脑"：anatomy.md 记录项目文件地图与 Token 估算，cerebrum.md 积累用户偏好与"不再重复"清单，buglog.json 归档历史 Bug 修复方案，token-ledger.json 追踪终身 Token 消耗
    - 显著的 Token 节省效果：大型项目实测从 250 万 Token 降至 42.5 万（节省约 80%），20 个项目平均节省 65.8%，拦截 71% 的重复读取，累计节省超 200 万 Token
    - 纯本地运行零额外成本：所有钩子均为纯 Node.js 文件 I/O，无网络请求、无外部 API 调用，仅依赖 Node.js 20+ 和 Claude Code CLI
    - 额外实用功能：内置 Design QC 自动截图供 Claude 评估 UI，Reframe 功能提供 12 个 UI 框架的迁移知识库，支持实时 Web 仪表盘查看统计数据
    - 诚实的局限性说明：Claude Code 钩子功能较新偶有可靠性问题，Token 追踪基于字符比例估算（误差约 15%），cerebrum.md 依赖 Claude 遵守指令更新（合规率 85-90%）

    文章URL：https://github.com/cytostack/openwolf
    GitHub
    GitHub - cytostack/openwolf: Portable project memory across Claude Code, Codex and OpenCode, plus token accounting measured from…
    GitHub - cytostack/openwolf: Portable project memory across Claude Code, Codex and OpenCode, plus token accounting measured from…
    Portable project memory across Claude Code, Codex and OpenCode, plus token accounting measured from harness transcripts. Local file I/O, no API calls, no telemetry. - cytostack/openwolf

    AI辅助编程Claude_CodeToken优化开发工具

  8. 锤子前端

    《Python 3.15的JIT编译器重回正轨》

    《Python 3.15的JIT编译器重回正轨》

    标签：#Python #JIT #CPython #性能优化 #Faster_CPython #编译器 #开源社区

    总结：

    Python 3.15的JIT编译器开发取得突破性进展，在失去主要赞助商后通过社区协作成功实现性能目标。目前macOS AArch64平台比解释器快11-12%，Linux x86_64快5-6%，提前完成预定目标。文章强调了团队建设、任务分解和幸运的技术决策（如追踪记录解释器和引用计数消除）对项目成功的关键作用。

    文章要点：

    - **性能目标提前达成**：Python 3.15的JIT在macOS AArch64上比尾调用解释器快11-12%，在Linux x86_64上比标准解释器快5-6%，提前一年多完成目标
    - **从困境中重生**：Faster CPython团队2025年失去主要赞助商后，通过社区托管模式维持开发，作者曾怀疑JIT项目能否成功
    - **降低"巴士因子"风险**：团队计划在JIT的前端（区域选择器）、中端（优化器）、后端（代码生成器）各配备2名活跃维护者，目前中端已有4名贡献者
    - **任务分解吸引新人**：将复杂优化问题拆分为简单任务（如"优化单条指令"），提供详细可操作的指导，让无JIT经验的C程序员也能参与，共11人参与核心重构
    - **关键技术决策**：Brandt建议改用追踪式前端，Mark建议双分派表机制，意外地将追踪解释器性能从慢6%提升到快1.x%，并将JIT代码覆盖率提升50%
    - **引用计数消除优化**：消除每条Python指令的分支操作，这一优化易于并行化且适合教学，是3.15版本的主要优化方向
    - **基础设施支撑**：Savannah Ostrowski一人搭建了等效于整个基础设施团队的CI系统，每日性能测试帮助快速发现回归问题

    文章URL：

    https://fidget-spinner.github.io/posts/jit-on-track.html
    Ken Jin’s Blog
    Python 3.15’s JIT is now back on track

    PythonJITCPython性能优化Faster_CPython编译器开源社区

  9. 锤子前端

    《Claude技能构建完整指南》

    《Claude技能构建完整指南》

    标签：#AI #Claude #MCP #Agent_Skills #Workflow_Automation #开发工具 #Anthropic

    总结：Anthropic官方发布的Claude技能构建指南，系统介绍了如何通过SKILL.md文件创建可复用的AI工作流。技能采用渐进式披露架构（YAML前置元数据+Markdown指令+引用资源），可与MCP工具集成实现多步骤自动化。文档涵盖规划、测试、分发全流程，提供5种设计模式（顺序工作流、多MCP协调、迭代优化等），并给出量化评估指标（90%触发准确率、零API失败率），目标帮助开发者在15-30分钟内构建生产级AI技能。

    文章要点：
    - 技能定义：包含SKILL.md（必需）、scripts/、references/、assets/的文件夹结构，采用kebab-case命名规范，支持Claude.ai、Claude Code和API三端通用
    - 渐进式披露设计：三级加载机制（YAML元数据→SKILL.md正文→链接资源），最小化token消耗同时保持专业性
    - 三大应用场景：文档/资源创建（如前端设计）、工作流自动化（如项目管理）、MCP增强（如Sentry代码审查），后者将工具访问转化为可靠工作流
    - 成功指标：技能应在90%相关查询中自动触发，单次工作流工具调用次数明确，零失败API调用，用户无需提示下一步操作
    - 核心设计模式：顺序工作流编排、多MCP协调（跨Figma/Linear/Slack等）、迭代优化循环、上下文感知工具选择、领域特定智能（如合规检查）
    - 测试策略：触发测试（ obvious/paraphrased/negative cases）、功能测试、性能对比（有无技能时的token消耗和交互轮次差异）
    - 分发方式：GitHub托管+Claude.ai设置上传，支持组织级部署和API程序化调用，定位为MCP的"知识层"（厨房类比：MCP是厨房设备，技能是食谱）
    - 常见陷阱：描述字段过于模糊导致触发失败、包含XML标签的安全限制、README.md与SKILL.md混淆、指令过于冗长导致模型"懒惰"

    https://resources.anthropic.com/hubfs/The-Complete-Guide-to-Building-Skill-for-Claude.pdf

    AIClaudeMCPAgent_SkillsWorkflow_Automation开发工具Anthropic

  10. 锤子前端

    #开源 一个有意思的项目，让你了解css不同颜色的名字

    #开源 一个有意思的项目，让你了解css不同颜色的名字。

    https://github.com/scriptype/sorted-colors
    GitHub
    GitHub - scriptype/sorted-colors: A tool to sort the named CSS colors in a way that it shows related colors together
    GitHub - scriptype/sorted-colors: A tool to sort the named CSS colors in a way that it shows related colors together
    A tool to sort the named CSS colors in a way that it shows related colors together - scriptype/sorted-colors

    开源