How I Built a Project Management Dashboard in One Day Using AI Agent with Zero Coding Experience

Work Gets Messier the Busier You Are? The Problem Is Scattered Tools

How many windows can a typical office worker have open at the same time? Group chats with last-minute revisions, emails with project files, spreadsheets with timeline schedules, documents with meeting action items. Just as you're about to tackle the most important task, a new requirement pops up from another thread. This is the daily reality for anyone juggling multiple workstreams.

We already have PPT, Excel, documents, calendars, and various project management tools—so why does work keep getting more chaotic? The answer often lies in the fact that every task is scattered across different tools, lacking a unified execution entry point and context. In cognitive science, this is known as "Context Switching Cost"—every time you switch from one tool to another, your brain needs to reload task background information. Research shows that this kind of switching takes an average of 23 minutes to fully regain focus. The more scattered your tools, the more frequent the switching, and the more severe the efficiency loss.

The solution proposed by this Bilibili creator is: use an AI Agent to execute all work within the same software. Her first experiment was building a personal "Project Management Dashboard" in just one day—with absolutely zero programming experience.

From PPT to HTML Tools: A New Approach to Project Management

Recently, the idea of "using HTML instead of PPT" went viral online. But the creator raised a more valuable point: if HTML is only used to make a smoother presentation, that's a bit of a waste.

HTML (HyperText Markup Language), combined with CSS and JavaScript, forms the three foundational technologies of modern web applications. Unlike traditional desktop software, HTML applications are inherently cross-platform—any device with a browser can run them without installation. In recent years, with the maturity of frontend frameworks (React, Vue, etc.) and browser APIs, HTML applications can now deliver interactive experiences approaching native software, including drag-and-drop operations, offline storage, and animations. This is why "using HTML instead of PPT" caught on—it's not just static pages, but can host complex interactive logic and data management features.

PPT Solves "What's Done"; A Dashboard Solves "What's Happening Now"

PPT is essentially about describing completed work better and presenting it to others. What she wanted to solve this time was how to manage work that's actively in progress. This distinction is crucial—the former is the presentation layer, the latter is the execution layer.

So she used ByteDance's AI Agent product "Chairwork" (referred to as Trae/Chairwork in the video) to build a content project dashboard. AI Agent (intelligent agent) represents a significant paradigm shift in artificial intelligence. Traditional AI chat tools are essentially stateless Q&A systems—users ask questions, the model answers, and after the conversation ends, it won't proactively execute any operations. AI Agents, however, possess four core capabilities: goal decomposition, environment awareness, tool invocation, and autonomous decision-making. They can receive a high-level objective, automatically break it down into multiple subtasks, execute them sequentially or in parallel, and adjust strategies based on intermediate results. This architecture draws from the "automated pipeline" concept in software engineering, but uses natural language as the programming interface, dramatically lowering the barrier to entry.

This dashboard displays all projects being executed simultaneously, labels each project's current phase (topic selection, scripting, filming, editing), allows clicking to view details, and supports switching between day/week/month/year timeline views.

Core Feature Design of the Dashboard

The interface is divided into several functional areas:

• Right panel "Today's Tasks": Based on the Gantt chart on the timeline, it automatically displays work that needs to be handled today—no more manually creating daily to-do lists. The Gantt Chart was invented by American mechanical engineer Henry Gantt in the 1910s and is one of the most classic visualization tools in project management. It uses time as the horizontal axis and tasks as the vertical axis, representing each task's start time, end time, and duration with horizontal bars, intuitively displaying temporal relationships and resource conflicts between tasks. The creator's dashboard automatically links the Gantt chart with daily tasks, essentially achieving seamless connection from "macro planning" to "micro execution."
• Left panel project list: Automatically prioritizes projects based on execution time and deadlines, alerting you to task urgency.
• Center timeline: Each project card can be dragged left or right to change execution time, and edges can be dragged to extend or shorten the duration. Clicking a card allows editing start date, duration days, priority, and assignee.

Building a Dashboard in One Day: AI Agent's Iterative Development Process

It's worth emphasizing that AI Agents are fundamentally different from regular AI chat tools. Regular chat tools work in a "question-and-answer" fashion, while AI Agents receive a work objective—they autonomously break down steps, read project materials, invoke tools, create or modify files, and then hand the results back to you for review.

Three-Step Iteration from "To-Do List" to "Professional Tool"

The creator initially gave just one extremely simple request: "Help me make an HTML project dashboard." The first version came out quickly—functional but more like an ordinary to-do list. Once projects piled up, it was still unclear which was more urgent, where bottlenecks were, or how to plan the next few days.

The key was that she didn't rewrite the entire prompt, but continued the conversation within the same project:

1. Adding identity and requirements: "I'm a content creator, not building enterprise software. Please keep the project list on the left, make a timeline on the right, and add priority, phase, deadline, and today's tasks."
2. Injecting real data: She input several video projects she was currently working on, letting the AI sort by priority and map time, phases, and tasks together.
3. Invoking frontend design Skill for visual refinement: Explicitly requesting "only refine visuals, don't touch functionality," the AI unified color schemes, typography, hierarchy, buttons, and card layouts.

This iterative approach essentially simulates the "Agile Development" methodology in software development—not pursuing a perfect product in one delivery, but progressively approaching the ideal result through rapid prototyping, user feedback, and continuous improvement cycles. The difference is that traditional agile development requires a professional development team, while AI Agents allow individuals to independently complete this loop.

Using Natural Language for "Regression Testing"

As features multiplied, problems emerged: project bars misaligned after zooming, occasionally disappearing during dragging, and new projects not linking with today's tasks. The creator simply described these issues in natural language, having the AI check date calculations, drag coordinates, and task associations item by item, then perform regression testing.

Regression Testing is a core concept in software engineering, referring to re-running existing test cases after code modifications to ensure new changes haven't introduced new bugs or broken existing functionality. Traditional regression testing requires writing dedicated test scripts or manual verification, while in the AI Agent workflow, users only need to describe "what's wrong" in natural language, and the Agent can understand the problem, locate the error in the code, fix it, and check whether the fix affected other features. This compresses what originally required a test engineer into a regular user's chat window.

In the end, projects automatically arranged by priority, could be dragged as whole bars to change dates or edge-stretched to adjust duration; newly added high-priority projects automatically appeared in today's tasks; completed tasks synced progress and top-panel statistics; data was saved in browser local storage, persisting through refreshes. Browser local storage APIs (including localStorage and IndexedDB) allow web applications to persist data on user devices, accessible without internet connection, also avoiding data privacy leak risks. However, limitations include data being tied to a specific browser, loss when browser data is cleared, and no cross-device sync support.

She also uploaded the HTML file to a GitHub repository, transforming it from "an idea in her head" into "a real tool that can be opened, shared, and continuously updated." GitHub is not only the world's largest code hosting platform—through its GitHub Pages feature, users can deploy HTML files as publicly accessible web pages for free, without purchasing servers or domain names. GitHub also provides version control, with every modification tracked and traceable, truly converting AI-generated tools from one-time artifacts into long-term usable assets.

Real-World Validation: How Much Can AI Agent Actually Do?

After the dashboard was built, the creator applied it to her actual video production workflow, validating the collaborative capabilities of AI Agent's three modes (Work / Code / Design) within a single project.

Scenario 1: Research for Complex Topics

Taking the topic "Why Did Memory Prices Suddenly Spike" as an example, the source materials were extremely diverse: news articles, company earnings reports, English PPTs, PDF research reports, bilingual news, and multi-institution industry data. Previously, this required opening each file individually, translating, copying, note-taking, and assembling timelines.

Now she puts all materials into the same project in Chairwork, having the AI first summarize what each document covers, then analyze potential angles for the topic. More critically, her follow-up approach was: "Which conclusions are supported by earnings data, which are just media speculation? List key figures, dates, and original sources separately, and directly flag contradictions between different materials." This produces not a "seemingly complete" answer, but a verifiable research workpaper that can be further fact-checked.

This usage pattern reflects an important AI collaboration principle: don't treat AI's output as a final conclusion, but as an intermediate product that accelerates the research process. In information verification, this is called "Source Verification"—every conclusion must be traceable to reliable original data sources. AI excels at rapidly processing and synthesizing large volumes of information, but assessing information credibility, rigor of logical reasoning, and contradiction analysis between different sources still requires human critical thinking.

Scenario 2: One-Sentence Automatic Vlog Editing

The creator installed an automatic editing Skill in Chairwork that can check the runtime environment, analyze footage, select shots, generate storyboards, and complete compositing via FFmpeg. She only needs to select a footage folder and send simple requirements about duration, style, and pacing.

FFmpeg is an open-source, cross-platform audio/video processing framework. Virtually all major video platforms and editing software rely on it under the hood for encoding and decoding. It supports nearly every known audio/video format and can perform trimming, concatenation, transcoding, filtering, subtitle embedding, and more through command line. In the AI Agent context, FFmpeg serves as the "executor"—the Agent analyzes footage content to determine editing strategy, then generates corresponding FFmpeg command sequences to complete the actual video compositing. This "AI decision-making + FFmpeg execution" combination allows ordinary users who don't understand video encoding principles to achieve automated editing.

The first version looked more like a beginner editor's work: repetitive shots, flat pacing. But the advantage was that revisions were straightforward—through several rounds of natural language conversation, the AI gradually learned to find edit points, arrange rhythm, add music, do basic color grading, and even directly process Sony S-Log3 flat footage without needing to open DaVinci Resolve.

S-Log3 is a logarithmic gamma curve color profile (Log Profile) provided by Sony cameras. It compresses the image's contrast and saturation during shooting to preserve more dynamic range information (typically 14+ stops), giving post-production colorists greater latitude to recover highlight and shadow detail. The tradeoff is that directly exported footage appears "flat" and must undergo color restoration (typically using LUT lookup tables or manual grading) to achieve normal appearance. In traditional workflows, this step requires professional color grading software like DaVinci Resolve, but the AI Agent can automatically identify Log footage and apply appropriate color transformations, significantly simplifying a process that previously required specialized knowledge.

For ordinary people without professional editing experience, this workflow is quite user-friendly.

Scenario 3: Multi-Device Collaborative Cover Design

When it came time to prepare covers after finishing a script, she switched to Design mode and had the AI create three versions with different design directions. The creator emphasized that what she valued most in this step was trial-and-error efficiency—previously, she only had vague ideas in her head and had to manually assemble them to know if they worked; now the Agent can quickly turn directions into visible visuals.

Even more practical was multi-device relay: before heading out to film, she opened the same project on her phone to send revision notes, while the desktop continued processing; on the road she checked progress, and when results came in, she reviewed and added direction from her phone. For digital nomads, "tasks don't stop when you leave your desk" is an extremely valuable work mode. This asynchronous collaboration model breaks the traditional work constraint of "people must be present to push tasks forward." It essentially decouples human decision-making from AI execution in both time and space—you can issue commands or review results at any time, from any location, while the AI continues running in the background.

The Human-AI Division of Labor: AI Executes, Humans Judge

After one month of use, the creator's core conclusion is: AI Agent consolidates execution processes that were previously scattered across web pages, documents, folders, design software, and chat tools into the same project context. Materials can be queried further, files can be organized, web pages can be continuously modified, and tasks can be repeated days later when you remember them.

But she also clearly drew boundaries: whether to trust the materials, which content angle to choose, whether file operations carry risk, whether designs match aesthetic standards—these ultimately still require human judgment and review. AI primarily replaces repetitive execution steps like searching, translating, summarizing, and cross-referencing. It saves time, but the decision-maker is still human.

This boundary aligns closely with the "Human-in-the-Loop" design philosophy in artificial intelligence. This concept holds that at current technology levels, the most efficient work mode isn't full automation, but letting AI handle standardizable, repeatable execution-layer work while preserving human judgment authority at critical decision points. This both avoids error risks from AI hallucination and fully leverages AI's advantages in information processing speed and scale.

The Future of Work: One Person Managing Multiple AI Agents

The creator predicts that future work will become "one person simultaneously operating and managing numerous AI Agents"—one researching materials, one organizing files, one building pages, one checking for problems—while the human is responsible for task decomposition, setting standards, and making decisions. The earlier you learn to collaborate with AI Agents, the more you can reserve your time for things that truly require experience, judgment, and creativity.

This work paradigm is technically called a "Multi-Agent System"—multiple AI Agents with different specializations collaborating under unified coordination to complete complex tasks. Each Agent focuses on its area of expertise (such as information retrieval, code generation, visual design), while humans play the role of "project manager"—defining objectives, assigning tasks, coordinating conflicts, and reviewing deliverables. This is strikingly similar to traditional team management models, except the "team members" being managed have changed from humans to AI.

For users in China, these tools can be downloaded and used directly without additional network configurations, can switch between different large models for writing, analysis, code, and design based on the task, and combined with an expanding plugin marketplace and Skill library, they truly lower the barrier for "developing without knowing code." This is perhaps the most tangible signal of the AI Agent era: the threshold of technical capability is being redefined. In the past, "knowing how to code" was the entry barrier for productivity tools; in the Agent era, "knowing how to define requirements, review deliverables, and iterate" is becoming the new core competency. This isn't the death of technology, but a fundamental transformation in how technology is used.