HOPE DESIGN
0 %
Loading

DAILY BRIEF

先给动作再抽 Token

日榜仍是技能全家桶,新进可装的是先给下一步的输出纪律、HTML 幻灯、React 上 GPUI、从站点抽出 token,以及 Codex 官方 Figma 插件。

4 min

设计 AI GitHub

来源GitHub Trending + GitHub Search API + 仓库 README + Figma Release Notes + X

本周趋势

9 月 8 日官方日榜仍由近七日已写过的 diagram-design、HyperFrames、ECC、Marketing Skills、MarkItDown 与 Context Mode 占满;本期把主推荐让给 i-have-adhd、Frontend Slides、GPUIX、Dembrandt、openai/plugins 与 Superpowers。Astra 在 Figma 上出可编辑画板的讨论起于 9 月 7 日,观察栏回溯约 1 天。

核心推荐

06 picks

  1. 给编码 Agent 的输出纪律 Skill,逼它先给下一步动作,再写编号步骤,禁止 Hope this helps 和铺垫。痛点是走查、改间距、修组件时,模型先复述半页背景,真正要改的文件和命令埋在最后;它用 10 条规则压住跑题,每轮重述当前状态,列表不超过 5 条,错误也只讲事实。差异化是可 fork SKILL.md 换自己的口吻,装完用 /i-have-adhd 重新触发。设计师把走查结论丢给 Agent 时先开这条,界面改动会先落到具体文件行,而不是又一篇分析。

    /plugin marketplace add ayghri/i-have-adhd

  2. 给编码 Agent 的 HTML 幻灯 Skill,从零写或把 PPTX 转成单文件 16:9 网页,不装 npm、不走构建。痛点是 Agent 一做演示就是紫渐变白底和居中标题,品牌站对不上,PPT 转网页又丢图;它先出 3 套可视化预览让你点选,再生成带注释的完整页,另有 34 套 bold-template-pack,只在选定后才加载完整 design.md。差异化是 STYLE_PRESETS 与 viewport-base.css 把安全预设和大胆模板分开,还带 extract-pptx.py 与导出 PDF 脚本。发布会和内部评审可先 /frontend-slides 选一版纸感或网格系统,再让 Agent 填内容。

    /plugin marketplace add https://github.com/zarazhangrui/frontend-slides

  3. Zed GPUI 的 React 绑定,组件经 Metal / DirectX / Vulkan 画到 GPU,不走 Electron 也不嵌 WebView。痛点是桌面工具台一上 React 就要背一整颗浏览器,虚拟列表和原生文本又对不齐;它用 mutation batch 把 React 提交写进 Rust 保留树,每帧再生成 GPUI 元素,热重载只换组件树不关窗。差异化是原生 markdown、code、virtual-list,例子里有邮件三栏、时间线拖拽裁切和毛玻璃窗,bun build --compile 能打出带渲染器的单文件。桌面产品设计师可先 bunx gpuix CLI 看控件手感,再决定要不要离开 Web 视觉层。

    主页: gpuix.dev

  4. 一条命令把站点算成设计 token。Logo、色、字、间距、圆角、阴影、动效和组件,可出 W3C DTCG、DESIGN.md 或 Tailwind v4 theme。痛点是竞品审计和自有站回归只能截图目测,Agent 也拿不到可对比的基线;它用 Playwright 读计算样式,多页合并提高置信,比较模式在 CI 里对基线漂移直接失败。差异化是 MCP 工具按任务编号取色板、字体、组件和对比问题,并可配 dembrandt-skills 做层级与无障碍流水线。只分析自己有权限的站点。设计系统团队可先抽出预览环境,把 baseline.json 钉进仓库。

    主页: dembrandt.com

  5. OpenAI 给 Codex 的官方插件目录,接替已废弃的 openai/skills,每条插件带 .codex-plugin 清单,可附技能、MCP、命令和钩子。痛点是 Figma MCP 只给上下文,Agent 仍会自造控件、不写 Code Connect;这里的 plugins/figma 打包 figma-implement-design、figma-code-connect、figma-create-design-system-rules、figma-generate-library 等,从帧出代码、给已发布组件写无解析器模板、把设计系统规则写进项目。差异化还有 Notion、Remotion、Google Slides 和 Expo 包。设计系统维护者应在 Codex 里装 Figma 插件,而不是继续引用已废弃的 skills 仓。

    Figma 插件: plugins/figma

  6. Jesse Vincent 的跨客户端技能方法论,强制 Agent 先脑暴出可分段审的规格,再写小步计划,最后用子 Agent 按任务推进并做两段评审。痛点是界面需求一进窗口就开始改文件,没有共同语言也没有红绿测试;它把 brainstorming、writing-plans、subagent-driven-development、TDD 和收尾分支收成自动触发的工作流,覆盖 Claude Code、Codex、Cursor、OpenCode、Gemini CLI 等。差异化是计划要写到连判断力差的执行者也能跟,并强调先失败测试再写最小实现。适合已经稳定用一家 Agent、想把设计讨论钉成可审文档的团队,不适合当第一包特效技能来装。

    /plugin install superpowers@claude-plugins-official

其他值得关注

06 items

  • cathrynlavery/diagram-design 近七日已写过,今日仍居官方日榜前列,编辑图 Skill 现 ★ 34.1k,日增约 1.1k。
  • heygen-com/hyperframes 近七日已写过,今日重回日榜前排,HTML 成片现 ★ 47.5k,日增约 2.6k。
  • microsoft/markitdown 昨日主推荐,今日仍在官方日榜,文档转 Markdown 现 ★ 181.4k。
  • openai/skills 今日仍在官方日榜,现 ★ 26.4k,仓库已标注废弃,新技能改走 openai/plugins。
  • GPT-6 Astra × Figma 9 月 7 日起社区用 Astra / Codex 经 Figma 插件 API 出可编辑画板和动效;官方 Codex 与 Figma MCP 往来仍是正路,组件应走 Code Connect。观察栏回溯约 1 天。
  • Figma 透明度变量 9 月 3 日可在 Variables 里批量改透明度且不拆色;插件 API 同日支持可变字体轴。本期回溯约 5 天,仅作设计系统维护备忘。

热议精选

@ozwxy

Astraすごい。これ実装するの大変そうで諦めてたUIを、GPT-6 Astraで30種類つくった。金属の反射、ガラス、ホログラム、カードのめくれ。押す・引く・回す。全部Web上で動く。Figma用の編集データも出せる。

@BreejeAnadkat

Turns out you don’t always need Figma to design something beautiful. These bottom sheets were made entirely with Claude Code. Of course, with good references and a few tries.

@barlydesign

Exploring Figma motion with ChatGPT Astra 6. The design + flow were already done, then I used a few prompts in Codex to bring it into Figma and explore the motion. Feels like a nice alternative to Jitter, just needs a bit of motion designer magic.

总结建议

今天热榜看起来还是技能全家桶,但没写过、又能改设计和交付工作流的,是先把下一步说清楚,再把站点 token 和幻灯收成 Agent 可读文件。

  1. i-have-adhd 把走查回复压成动作和编号步骤;Superpowers 则把规格、计划和子 Agent 评审写成强制流程。
  2. Frontend Slides 用预览点选对抗紫渐变幻灯;Dembrandt 从有权限的站点抽出 token,并可在 CI 里抓漂移。
  3. GPUIX 让 React 直接画到 GPUI;openai/plugins 的 Figma 包把 Code Connect 和设计系统规则交给 Codex。Astra 能出可编辑画板,但仍应走组件而不是自造控件。

走查先装 i-have-adhd。要演示就 /plugin marketplace add zarazhangrui/frontend-slides 并先点三套预览。桌面工具 bunx @gpuix/cli new 看手感。自有预览站用 dembrandt --design-md --compare。Codex 用户改走官方 plugins 里的 Figma 包,不要再装已废弃的 openai/skills。已经写过的 diagram-design / HyperFrames 继续看日增即可。