A Maintainer Built a Multi-Platform Issue Triage Tool Without Opening an Editor
Foreword: Results First
I maintain the youlai open-source ecosystem—a full-stack scaffold with a separated front-end and back-end, spread across over twenty repositories on Gitee, GitHub, and AtomGit. The more repositories, the harder it is to manage Issues: they are scattered across three platforms with no prioritization; the same question gets asked four times, and the answer sinks along with the closed Issue; identifying which repository is about to be abandoned requires a manual visual comparison.
This frustration isn't limited to maintainers. When you search for an error message, you have to guess which Issue on which platform contains the answer; when you want to know if a project is still alive, you can only flip through commit histories and count Star growth rates—again, no precise metrics.
So I had TRAE Work build an "Open Source Clinic" to handle all of this: open Issues from three platforms are pulled into one screen and prioritized to tell you what to fix first; answers from closed Issues are mined into an FAQ; a health score is calculated for each repository, making a project's vitality visible at a glance.
Online Experience (Hosted by TRAE Work, ready to use): https://share.traecontent.cn/artifact/F-1EQX0I6-26O-
| Capability | Description |
|---|---|
| Three-Platform Aggregation | Pulls open Issues into one screen, auto-triages and prioritizes |
| FAQ Mining | Clusters closed Issues, mines answers from comment sections into drafts |
| Repository Health Check | Health scores for 18 repositories + Star trends |
| Hot Keyword Insights | Tokenizes titles and bodies, visualizes high-frequency pain points at a glance |
From a single prompt to a 2,700-line tool, over a dozen rounds of conversation, without ever opening an editor. The following text unfolds as "Why build it → How to build it → What was built → Pitfalls encountered → How to make the interface look good." If you're in a hurry, jump directly to Section 5 to copy the prompts.
1. Why Build It: The Larger the Ecosystem, the Harder It Is to Manage Issues
First, some background. youlai is a full-stack scaffold with a separated front-end and back-end:
| End | Lineup | Count |
|---|---|---|
| Front-end | vue3-element-admin (primary) + JS version / Lite template / Naive UI version / UniApp / Electron | 6 |
| Back-end | youlai-boot (Java primary) + NestJS / Gin / Django / FastAPI / Laravel / ThinkPHP / ASP.NET / Axum | 9 |
| Derivatives | Multi-tenant SaaS, MyBatis-Flex, PostgreSQL, Multi-module, Spring Boot 3 branches | 6 |
Nine back-ends share the same RESTful API specification, and the front-end can switch seamlessly. Expanding the ecosystem is a good thing, but the repositories must follow the platforms: Gitee is the main repository, with GitHub and AtomGit as mirrors.
Then came four nightmares:
Issues scattered across three platforms. Processing a batch requires opening three sites and switching tabs back and forth.
No prioritization. An Issue frozen for six months looks just as "new" in the list as one submitted yesterday.
The same question asked four times. "Blank screen on older browsers" has been asked from 2023 to 2026: I7NJTY → IBJD2S → ID5UB1 → IIO1S5. I had long ago written the answer in the comments, but once the Issue was closed, the answer sank.
Answers sank into a goldmine. The main repository has 331 closed Issues, 261 with discussions, and 60 with three or more comments—a mine of answers I wrote myself, with no mechanism ever built to dig them out.
The "technology evaluator" from the opening three questions finds their pain point matched here: judging whether a project is alive requires manually comparing commit times, Star trends, and Issue backlogs across three platforms. Maintainers want efficiency, evaluators want confidence; one tool rescues both.
2. How to Build It: One Prompt, Boundaries Locked Down
The model chosen was TRAE Work's GLM-5.3—a multiplier of 0.4x, half the cost of its peers. For a task requiring over a dozen iterations, cost sensitivity is a must.
The first prompt:
Help me make a pure front-end, single-file HTML tool called "Open Source Clinic":
- Aggregate open Issues from specified repositories on Gitee, GitHub, and AtomGit into a single table.
- Auto-classify by title and body keywords (Bug/Deployment/Compatibility/Performance/Feature Request/Discussion/Ambiguous), prioritize by freeze days × type weight, with zero-reply Issues getting an extra ×1.5.
- Cluster closed Issues by topic, generate an FAQ Markdown draft, with answer clues sourced from comments.
- Modern SaaS-style interface, light and dark themes, zero external dependencies.
Default repository uses vue3-element-admin (three platform addresses: gitee.com/youlaiorg, github.com/youlaitech, atomgit.com/youlai)
Three deliberate design choices:
Explicitly state what NOT to do. "Pure front-end" and "no dependencies" blocked the AI from introducing webpack or a back-end—if you don't set boundaries, it will give you the whole kitchen sink.
Give business rules as formulas. "Freeze days × type weight × zero-reply 1.5" can be implemented precisely; "smart prioritization" can only be improvised, and the improvised algorithm is almost always unusable.
Paste real data. Providing the real repository addresses for three platforms lets the AI match endpoints and fields directly; giving it "some repository" forces it to rely on imagination.
The first version ran, but was far from usable. The correct expectation for conversational development: the first version gets a 60, the remaining 40 comes from polishing through feedback. My feedback method converged to: screenshot → circle in red → one sentence. For example, when the "5-dimension" metrics were squeezed into vertical bars, I circled them in red with the line "too ugly." TRAE Work would revise, then open a browser to verify on its own, and I would confirm with another screenshot—I never wrote a single line of CSS throughout the entire process.
3. What Was Built: Four Functions, One Screen Overview
Let's go through the four functions one by one; the screenshots all show real data run by the tool.
Triage Desk. The core is the priority formula: Bug/Deployment weight 3.0 (directly blocks users), Compatibility/Performance 2.5, Feature Request 1.0, Discussion 0.5, with zero-reply Issues getting ×1.5.
The logic is simple: a Bug frozen for 100 days but with replies suggests intervention has started; one frozen for 100 days with zero replies is a cold case. The "This Week's Hit List" automatically takes the top 5, ready to be copied into a weekly report with one click.
FAQ Mining. This targets that sunken goldmine of answers: cluster by title keywords, take the Issue with the most comments in each cluster as the representative, call the comments API to dig out the answers into Markdown.
A necessary detail: Gitee's "closed" status must distinguish between "completed" and "rejected"—rejected Issues are often usage misunderstandings, precisely the best material for an FAQ. Answers only take the original comment text; the AI only extracts and formats, never improvises.
The result, validated against the blank screen question asked four times in Section 1—five sunken Issues consolidated into one:
Q: Older browsers (Chrome 86/94, QQ Browser, old Safari) open to a blank screen or error Vue 3 only supports browsers that natively support ES2016; this project does not perform downward transpilation by default; if compatibility with older browsers is required, try
@vitejs/plugin-legacy. Source: #IIO1S5 Member reply · Related questions: #I7NJTY #IBJD2S #ID5UB1 #I6UPVL
Next time someone asks about a blank screen, throwing them this one entry is enough.
Repository Health Check. A five-dimensional health score: Star scale/growth rate, last push distance, Issue backlog, repository age. By default, it loads the ecosystem's 18 repositories; click a row to expand the Star trend—an evaluator can see a project's vitality at a glance.
When there's no Token, the trend line grows using local snapshots: each checkup records the day's Star count into localStorage, never fabricating history, only recording the days actually visited.
Hot Keyword Insights. After the tool took shape, I asked, "Any other feature suggestions?" and picked this one from the candidates—it answers "What are people repeatedly asking about?" Chinese text is tokenized using bigrams:
// Chinese has no natural delimiters; bigrams are the optimal zero-dependency solution:
// "点击顶部菜单" → "点击" "击顶" "顶部" "部菜" "菜单"
// High-frequency bigrams naturally surface; meaningless fragments are truncated due to low frequency
for (var i = 0; i < run.length - 1; i++) {
var bg = run.slice(i, i + 2);
if (HOT_CHAR_STOP.has(bg[0]) || HOT_CHAR_STOP.has(bg[1])) continue;
freq[bg] = (freq[bg] || 0) + 1;
}
The results showed "菜单" (menu) ×25, "路由" (routing) ×14, "登录" (login) ×10—pieced together, this paints a genuine portrait of pain points, much faster than flipping through twenty titles.
4. Pitfalls Encountered: Three Platforms, Three Temperaments
Many can show the happy path; few can explain when things break. This section covers the real pitfalls.
Gitee 403. The free API has an undocumented rate limit; multiple rounds of debugging easily trigger it, and the recovery time is uncertain. My approach was degradation, not a head-on fight: built-in offline "demo snapshots" (real Issue data embedded in the HTML), with the health check defaulting to the equivalent AtomGit repository. API quota is a resource, not a test of willpower.
AtomGit Endpoint. It looks like GitHub, but the paths differ:
// GitHub: v3 style
fetch('https://api.github.com/repos/youlaitech/vue3-element-admin')
// AtomGit: v5 style, host with /api prefix
fetch('https://api.atomgit.com/api/v5/repos/youlai/vue3-element-admin')
The first version had the AI analogize AtomGit's URL based on GitHub's style, resulting in a direct 404. The more two APIs look alike, the more you must verify endpoints character by character—the AI will confidently analogize a wrong answer.
The Boundaries of Pure Front-end. The repository APIs for all three platforms happen to allow CORS; this is luck, not the norm. GitHub's unauthenticated limit is 60 requests per hour, so deep comment mining is made a manual trigger. Tokens are only kept in memory and clearly marked as optional. Building a tool is like writing an article: the user's environment is always worse than you imagine.
5. How to Make It Look Good: Six Details to Avoid the "AI Generic Look"
Functionality is 60 points; the interface determines whether people are willing to use it. An AI-generated page looks fake at a glance, and it's not an illusion—it has a few fixed habits. After a dozen rounds of "screenshot → circle in red → one sentence," I've gathered six lessons. First, a quick reference table; if you're in a hurry, take the table and go:
| # | Symptom of the Fake Look | One-Sentence Prescription |
|---|---|---|
| 1 | Blue-purple gradient covering the entire page | Low saturation for 90%, keep only one accent color |
| 2 | Frosted glass smeared across the whole page | backdrop-filter only for the top bar |
| 3 | Block widths twisted and uneven | Card-based layout + 8px grid governing everything |
| 4 | Multiple layers of stacked shadows | Borders and whitespace for layering, shadows only for hover states |
| 5 | Page as still as a screenshot | Animate core numbers, no more than 3 types of animation on the entire page |
| 6 | Font sizes crammed together | Monospaced numbers, adjacent levels differ by 1.5x |
The table gives the conclusions; the paragraphs give the reasons—none of the six are long.
1. Color Palette: Low Saturation Base, One Accent Point. The root of the generic look is a gradient smeared everywhere. Do the opposite: beige or graphite gray covering 90% of the area, one highly saturated accent color as a visual anchor, semantic colors used sparingly (green = healthy, red = danger). Gradients can be used, but only in one place—a ring, a keyword in a title. Smearing it over a large area is guaranteed to fail.
2. Frosted Glass: One Place Is Enough. Full-page backdrop-filter is a disaster; only place it on the sticky top bar: content hazily shows through the navigation when scrolling. A sense of premium quality comes from restraint, not piling on effects. Try scrolling the top bar of the online tool at the beginning of the article, then imagine the same effect smeared across the entire page.
3. Modularity: Cards + 8px Grid. For pages where you can't pinpoint what's wrong but just feel uncomfortable, nine times out of ten it's because block widths aren't aligned. Title areas, content areas, and card areas share the same grid; spacing and border radii all follow an 8px rhythm, governed by a single line.
4. Flatness: Shadows Only for Hover States. Using borders and whitespace is enough to distinguish layers; multiple layers of stacked shadows are a skeuomorphic relic from a previous era.
5. Micro-interactions: Make Numbers "Alive." Refresh the homepage of the tool at the beginning of the article: the health score ring grows from 0 to 92, the trend line scans, cards lift on hover—motion is a signal that "someone cares about this tool." But don't exceed three types of animation on the entire page, or it becomes a disco.
6. Font Hierarchy: Space Them Out, Then Space Them Out More. All data should use tabular-nums for monospacing, otherwise numbers jitter when they change; tighten letter-spacing for titles (starting from -0.02em), and adjacent font-size levels should differ by at least 1.5 times. The visual payoff of spacing out font-size levels is greater than any decoration.
Six rules combined into a prompt, just one paragraph:
Interface requirements:
- Low-saturation background + single accent color, light and dark dual themes; gradients only for one accent point, strictly no large-area smearing.
- Frosted glass only for the sticky top bar; the rest flat: borders + whitespace for layering, shadows only for hover states.
- Content card-based, spacing/border radii follow an 8px grid, title/content/card area widths strictly aligned.
- Data uses monospaced numbers, titles tighten letter-spacing, adjacent font-size levels ≥1.5x difference.
- Core metrics have entrance animations (grow/scan/scroll), hover micro-lifts, total page animations ≤3 types.
Final Words: TRAE Work Is Worth a Try
This time, from idea to a usable tool, I never opened an editor or started a local server. The entire process was completed in TRAE Work: the AI made changes, opened a browser to verify on its own, I reviewed screenshots and gave feedback, and the product was deployed as a shareable link with one click—that's how the online experience address at the beginning of the article was created.
Looking back at the three opening questions: Where should I search for Issues? Is the project still alive? Where can I find the answer to this error?—one tool handles them all. For programmers who want to automate repetitive work but don't want to launch a formal project for a small tool, this workflow is worth trying once.
Finally, a perk: I'm using the TraeWork AI office platform to handle various tasks. Register and log in to the desktop client through my sharing link, and new users get 5,000 points at once. After a successful invitation, you and I each get another 500 points, all usable for conversations, tasks, and other AI capabilities:
👉 https://www.trae.cn/work-fission/TKULJCCTJKPV?utm_source=copy_link&utm_medium=friends_invite