Building an AI‑Powered Frontend Development Workflow with Bili‑FE

Background

AI has progressed from simple code completion to assisting at every stage of software development, including requirement creation, analysis, design, coding, debugging, testing, and performance optimization. However, developers still need to manually select AI tools for each isolated task, leading to fragmented workflows.

Why a Project Knowledge Base?

AI lacks a holistic view of a project’s stack, directory structure, coding standards, and reusable components. The .workflow knowledge base solves this by providing structured project metadata that enables AI to quickly understand the tech stack, follow existing conventions, reuse components, and generate API calls consistent with project practices.

Knowledge Base Architecture

The knowledge base consists of markdown files such as knowledge/business.md, knowledge/components.md, rules/tech-stack.md, and rules/code-style.md. These files are read by various commands to produce structured PRDs, technical feasibility analyses, and code that adheres to project standards.

Key Commands

workflow-init : Initializes the .workflow knowledge base by deeply analyzing the project and generating all required metadata.

knowledge-update : Incrementally updates specific knowledge files (e.g., API docs, component docs) after code changes.

prd-preprocess : Converts raw product requirement documents (PRD, design drafts, technical specs) into a structured, executable PRD for downstream AI processing.

dev-workflow-plan : Generates development‑ready code by reading the knowledge base (API definitions, components, style rules, naming conventions) and optional templates.

archive : Collects all technical solutions for a feature into the archive directory, making them searchable via RAG for future tasks.

Command Usage Examples

# Initialize knowledge base (force overwrite)
mcp__bgent__bili-fe-workflow-init forceOverwrite=true

# Update API documentation
mcp__bgent__bfw-knowledge-update knowledgeFile=".workflow/knowledge/api.md"

# Basic PRD preprocessing
/prd-preprocess prd/20251217-new-feature/

Workflow Phases

Resource Acquisition : Collect PRD, design drafts, and technical specs; ask the user for the source directory.

Demand Analysis : Extract front‑end related functional points (UI changes, feature changes, interaction flows, data changes) and compare them with existing code using mcp tool rag-knowledge-search and Explore Glob Grep.

Clarification : Compare the PRD with current code from three angles—completeness, consistency, and clarity—to surface ambiguities and missing details.

Decomposition : Split clarified requirements into sub‑PRDs, generate clarification.md, and produce a dependency graph for each module.

Intelligent Development Workflow

The top‑level scheduler orchestrates two skill families:

D2C (Design‑to‑Code): Transforms Figma designs into high‑fidelity UI code, generating a logic-hints.md that lists completed UI skeletons and pending items such as API calls and event handlers.

Dev (Demand‑Driven Code): Dynamically plans and executes a sequence of skills based on PRD complexity, extracting technical points, learning required knowledge, and verifying coverage before generating runnable code.

Key Design Points

Parallel MCP calls to Figma APIs reduce latency.

Single‑task batch processing avoids per‑component agent overhead.

Pre‑computed style mapping ( tw-to-css.json) eliminates repeated Tailwind parsing.

Sub‑agent context isolation prevents cross‑contamination of prompts.

Testing Workflow

The testing workflow follows seven steps: generate a detailed test plan, run the plan, produce a test report, generate Playwright scripts, debug scripts, execute them in a UI automation platform, and finally configure CI pipelines. Commands such as /bili-fe-test-workflow and /bili-fe-test-workflow-setup automate these steps.

AI Mock Workflow

Mock generation is handled by /bili-fe-mock-workflow and related setup commands. Three modes are offered: dynamic MCP injection, custom handlers stored in .gitignore, and Swagger‑based mock generation. This enables developers to test UI without real back‑ends.

Conclusion

One year of practice shows that a standardized, AI‑augmented workflow can shift frontend engineering from isolated coding to systematic problem abstraction, rule definition, and quality verification. By embedding knowledge assets and collaborative AI processes into the team’s engineering culture, efficiency gains become repeatable organizational capabilities rather than one‑off boosts.