Skip to content

【外滩大会2026】 #49

Closed
Closed
【外滩大会2026】#49
Labels
showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

Description

@freemank1224
freemank1224
opened on Jul 28, 2026

参赛项目名称

单词萌兽 | VOCAB-MONSTER

团队 / 作者

戴森方程式

我做了什么

我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：

  • 后端数据库系统，基于Supabase；
  • 用户注册、登陆以及第三方登录入口的接入；
  • 个人成就系统、积分分、排行系统；
  • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
  • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
  • 符合人类遗忘规律的选词策略；
  • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
  • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
  • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
  • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；

使用的工具

  • OpenWork / Claude Code / OpenCode
  • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
  • Skill 名称：前端设计美化，UI/UX 设计
  • 其他：

效果展示

这里只展示三个典型界面，剩余的功能欢迎亲自体验！

基本界面：
Image

九宫格字谜游戏模式
Image

完全AI驱动的情景默写模式效果图：
Image

百炼模型使用截图：
Image

项目链接（可选）

https://vocab-monster.xyz

踩坑记录（可选）

最大的坑就是，我个人能力的短板。
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！

Metadata

Metadata

Assignees

No one assigned

    Labels

    showcased已收录上线外滩大会2026外滩大会 2026 参赛作品

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

      , 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
       blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
      Skip to content
      【外滩大会2026】 #49
      Closed
      Closed
      【外滩大会2026】#49
      Labels
      showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
      Description
      @freemank1224
      freemank1224
      opened on Jul 28, 2026
      参赛项目名称
      单词萌兽 | VOCAB-MONSTER
      团队 / 作者
      戴森方程式
      我做了什么
      我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
      • 后端数据库系统，基于Supabase；
      • 用户注册、登陆以及第三方登录入口的接入；
      • 个人成就系统、积分分、排行系统；
      • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
      • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
      • 符合人类遗忘规律的选词策略；
      • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
      • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
      • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
      • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
      使用的工具
      • OpenWork / Claude Code / OpenCode
      • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
      • Skill 名称：前端设计美化，UI/UX 设计
      • 其他：
      效果展示
      这里只展示三个典型界面，剩余的功能欢迎亲自体验！
      基本界面：
      Image
      九宫格字谜游戏模式
      Image
      完全AI驱动的情景默写模式效果图：
      Image
      百炼模型使用截图：
      Image
      项目链接（可选）
      https://vocab-monster.xyz
      踩坑记录（可选）
      最大的坑就是，我个人能力的短板。
      
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
      Metadata
      Metadata
      Assignees
      No one assigned
        Labels
        showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
        Type
        No type
        Projects
        No projects
          Milestone
          No milestone
          Relationships
          None yet
          Development
          No branches or pull requests
          Issue actions
          
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
          Skip to content
          【外滩大会2026】 #49
          Closed
          Closed
          【外滩大会2026】#49
          Labels
          showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
          Description
          @freemank1224
          freemank1224
          opened on Jul 28, 2026
          参赛项目名称
          单词萌兽 | VOCAB-MONSTER
          团队 / 作者
          戴森方程式
          我做了什么
          我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
          • 后端数据库系统，基于Supabase；
          • 用户注册、登陆以及第三方登录入口的接入；
          • 个人成就系统、积分分、排行系统；
          • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
          • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
          • 符合人类遗忘规律的选词策略；
          • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
          • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
          • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
          • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
          使用的工具
          • OpenWork / Claude Code / OpenCode
          • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
          • Skill 名称：前端设计美化，UI/UX 设计
          • 其他：
          效果展示
          这里只展示三个典型界面，剩余的功能欢迎亲自体验！
          基本界面：
          Image
          九宫格字谜游戏模式
          Image
          完全AI驱动的情景默写模式效果图：
          Image
          百炼模型使用截图：
          Image
          项目链接（可选）
          https://vocab-monster.xyz
          踩坑记录（可选）
          最大的坑就是，我个人能力的短板。
          
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
          Metadata
          Metadata
          Assignees
          No one assigned
            Labels
            showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
            Type
            No type
            Projects
            No projects
              Milestone
              No milestone
              Relationships
              None yet
              Development
              No branches or pull requests
              Issue actions
              
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
              Skip to content
              【外滩大会2026】 #49
              Closed
              Closed
              【外滩大会2026】#49
              Labels
              showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
              Description
              @freemank1224
              freemank1224
              opened on Jul 28, 2026
              参赛项目名称
              单词萌兽 | VOCAB-MONSTER
              团队 / 作者
              戴森方程式
              我做了什么
              我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
              • 后端数据库系统，基于Supabase；
              • 用户注册、登陆以及第三方登录入口的接入；
              • 个人成就系统、积分分、排行系统；
              • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
              • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
              • 符合人类遗忘规律的选词策略；
              • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
              • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
              • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
              • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
              使用的工具
              • OpenWork / Claude Code / OpenCode
              • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
              • Skill 名称：前端设计美化，UI/UX 设计
              • 其他：
              效果展示
              这里只展示三个典型界面，剩余的功能欢迎亲自体验！
              基本界面：
              Image
              九宫格字谜游戏模式
              Image
              完全AI驱动的情景默写模式效果图：
              Image
              百炼模型使用截图：
              Image
              项目链接（可选）
              https://vocab-monster.xyz
              踩坑记录（可选）
              最大的坑就是，我个人能力的短板。
              
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
              Metadata
              Metadata
              Assignees
              No one assigned
                Labels
                showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                Type
                No type
                Projects
                No projects
                  Milestone
                  No milestone
                  Relationships
                  None yet
                  Development
                  No branches or pull requests
                  Issue actions
                  
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
                  Skip to content
                  【外滩大会2026】 #49
                  Closed
                  Closed
                  【外滩大会2026】#49
                  Labels
                  showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                  Description
                  @freemank1224
                  freemank1224
                  opened on Jul 28, 2026
                  参赛项目名称
                  单词萌兽 | VOCAB-MONSTER
                  团队 / 作者
                  戴森方程式
                  我做了什么
                  我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
                  • 后端数据库系统，基于Supabase；
                  • 用户注册、登陆以及第三方登录入口的接入；
                  • 个人成就系统、积分分、排行系统；
                  • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
                  • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
                  • 符合人类遗忘规律的选词策略；
                  • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
                  • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
                  • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
                  • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
                  使用的工具
                  • OpenWork / Claude Code / OpenCode
                  • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
                  • Skill 名称：前端设计美化，UI/UX 设计
                  • 其他：
                  效果展示
                  这里只展示三个典型界面，剩余的功能欢迎亲自体验！
                  基本界面：
                  Image
                  九宫格字谜游戏模式
                  Image
                  完全AI驱动的情景默写模式效果图：
                  Image
                  百炼模型使用截图：
                  Image
                  项目链接（可选）
                  https://vocab-monster.xyz
                  踩坑记录（可选）
                  最大的坑就是，我个人能力的短板。
                  
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
                  Metadata
                  Metadata
                  Assignees
                  No one assigned
                    Labels
                    showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                    Type
                    No type
                    Projects
                    No projects
                      Milestone
                      No milestone
                      Relationships
                      None yet
                      Development
                      No branches or pull requests
                      Issue actions
                      
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
                      Skip to content
                      【外滩大会2026】 #49
                      Closed
                      Closed
                      【外滩大会2026】#49
                      Labels
                      showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                      Description
                      @freemank1224
                      freemank1224
                      opened on Jul 28, 2026
                      参赛项目名称
                      单词萌兽 | VOCAB-MONSTER
                      团队 / 作者
                      戴森方程式
                      我做了什么
                      我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
                      • 后端数据库系统，基于Supabase；
                      • 用户注册、登陆以及第三方登录入口的接入；
                      • 个人成就系统、积分分、排行系统；
                      • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
                      • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
                      • 符合人类遗忘规律的选词策略；
                      • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
                      • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
                      • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
                      • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
                      使用的工具
                      • OpenWork / Claude Code / OpenCode
                      • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
                      • Skill 名称：前端设计美化，UI/UX 设计
                      • 其他：
                      效果展示
                      这里只展示三个典型界面，剩余的功能欢迎亲自体验！
                      基本界面：
                      Image
                      九宫格字谜游戏模式
                      Image
                      完全AI驱动的情景默写模式效果图：
                      Image
                      百炼模型使用截图：
                      Image
                      项目链接（可选）
                      https://vocab-monster.xyz
                      踩坑记录（可选）
                      最大的坑就是，我个人能力的短板。
                      
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
                      Metadata
                      Metadata
                      Assignees
                      No one assigned
                        Labels
                        showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                        Type
                        No type
                        Projects
                        No projects
                          Milestone
                          No milestone
                          Relationships
                          None yet
                          Development
                          No branches or pull requests
                          Issue actions
                          
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
                          Skip to content
                          【外滩大会2026】 #49
                          Closed
                          Closed
                          【外滩大会2026】#49
                          Labels
                          showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                          Description
                          @freemank1224
                          freemank1224
                          opened on Jul 28, 2026
                          参赛项目名称
                          单词萌兽 | VOCAB-MONSTER
                          团队 / 作者
                          戴森方程式
                          我做了什么
                          我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
                          • 后端数据库系统，基于Supabase；
                          • 用户注册、登陆以及第三方登录入口的接入；
                          • 个人成就系统、积分分、排行系统；
                          • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
                          • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
                          • 符合人类遗忘规律的选词策略；
                          • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
                          • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
                          • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
                          • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
                          使用的工具
                          • OpenWork / Claude Code / OpenCode
                          • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
                          • Skill 名称：前端设计美化，UI/UX 设计
                          • 其他：
                          效果展示
                          这里只展示三个典型界面，剩余的功能欢迎亲自体验！
                          基本界面：
                          Image
                          九宫格字谜游戏模式
                          Image
                          完全AI驱动的情景默写模式效果图：
                          Image
                          百炼模型使用截图：
                          Image
                          项目链接（可选）
                          https://vocab-monster.xyz
                          踩坑记录（可选）
                          最大的坑就是，我个人能力的短板。
                          
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
                          Metadata
                          Metadata
                          Assignees
                          No one assigned
                            Labels
                            showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                            Type
                            No type
                            Projects
                            No projects
                              Milestone
                              No milestone
                              Relationships
                              None yet
                              Development
                              No branches or pull requests
                              Issue actions
                              
, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
【外滩大会2026】 · Issue #49 · modelstudioai/modelstudioai.github.io · GitHub
                              Skip to content
                              【外滩大会2026】 #49
                              Closed
                              Closed
                              【外滩大会2026】#49
                              Labels
                              showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                              Description
                              @freemank1224
                              freemank1224
                              opened on Jul 28, 2026
                              参赛项目名称
                              单词萌兽 | VOCAB-MONSTER
                              团队 / 作者
                              戴森方程式
                              我做了什么
                              我主要使用的是前端设计美化类Skill，以及数据库操作能力，因为我本人完全不懂前端和数据库，但这个网站是完全通过前端技术构建起来的。AI Coding 工具帮我实现了以下主要架构/功能的构建：
                              • 后端数据库系统，基于Supabase；
                              • 用户注册、登陆以及第三方登录入口的接入；
                              • 个人成就系统、积分分、排行系统；
                              • 英文单词自助添加与听写，这是本项目的基本功能的基本理念，及用键盘输入代替书写，磨练真正有用的技能；
                              • 单词翻译服务的自动调用，为用户添加的单词自动查找中文释义并让用户选择当前最佳释义；
                              • 符合人类遗忘规律的选词策略；
                              • 九宫格限时听写功能，提供具有竞争属性的单词看图听写；
                              • AI驱动的单词图片（GPT-image-2模型）生成、优化与存储；
                              • AI驱动的TTS读音生成（MiniMax模型）与存储，以实现听写功能；
                              • AI驱动的即兴场景设计与图像生成功能，为学习者提供新鲜有趣的游戏化看图写词和听写体验；
                              使用的工具
                              • OpenWork / Claude Code / OpenCode
                              • 百炼能力 / 模型：模型选择了Qwen3-max，通过Edge Function 完成API调用，见最后一张图
                              • Skill 名称：前端设计美化，UI/UX 设计
                              • 其他：
                              效果展示
                              这里只展示三个典型界面，剩余的功能欢迎亲自体验！
                              基本界面：
                              Image
                              九宫格字谜游戏模式
                              Image
                              完全AI驱动的情景默写模式效果图：
                              Image
                              百炼模型使用截图：
                              Image
                              项目链接（可选）
                              https://vocab-monster.xyz
                              踩坑记录（可选）
                              最大的坑就是，我个人能力的短板。
                              
这个项目真正带给我的，并不是完成了一个我心想事成的APP，而是我自己的能力缺陷，真正的被AI填补了。我完全不懂数据库和前端设计，而我所构想的效果恰恰要通过前端技术才能得到最好的呈现，因此几乎所有的功能内容都是AI Coding工具帮我一点点做的，最终也得到了很好的呈现和较为稳定的使用效果！
                              Metadata
                              Metadata
                              Assignees
                              No one assigned
                                Labels
                                showcased已收录上线外滩大会2026外滩大会 2026 参赛作品
                                Type
                                No type
                                Projects
                                No projects
                                  Milestone
                                  No milestone
                                  Relationships
                                  None yet
                                  Development
                                  No branches or pull requests
                                  Issue actions