Với Prompt Thứ Ba thứ 15 này, ý tưởng là thử nghiệm một loại giao diện mới vừa hữu ích vừa có sức mạnh thị giác: một dashboard tiến độ cá nhân để theo dõi mục tiêu trong những lĩnh vực quan trọng nhất của cuộc sống.
Tại Linkeum, các Prompt Thứ Ba không chỉ được dùng để tạo ra những bản demo đẹp mắt, mà còn để thử nghiệm những giao diện có thể một ngày nào đó trở thành các phần thực sự của sản phẩm. Ở lần thứ 15 này, ý tưởng là tạo ra một dashboard tiến độ cá nhân có khả năng hiển thị rõ ràng mức độ tiến bộ của người dùng trong nhiều chiều cạnh của cuộc sống.
Mục tiêu là vượt ra ngoài một danh sách mục tiêu đơn giản và hình dung một thành phần dashboard thực sự: dễ đọc, hiện đại và đủ mạnh về mặt hình ảnh để đáng được khám phá sâu hơn.
Prompt đã sử dụng
Lần này, prompt được viết ở chế độ code only để nhận trực tiếp một tệp HTML độc lập, dễ thử nghiệm, dễ chụp màn hình và có khả năng được tái sử dụng sau này trong Linkeum.
Prompt được gửi cho Qwen là như sau:
Generate code only.
Create a single self-contained HTML file with embedded CSS and JavaScript that builds a premium “Life Progress Dashboard” for Linkeum.
GOAL
The dashboard must help a user track progress across the major areas of life based on personal goals.
This is not a landing page.
This is not a marketing page.
This is a real product dashboard section designed for daily use.MAIN VISUAL
Build a large multi-ring radial progress chart as the main hero visualization.
Use a free JavaScript charting library suitable for radial / circular progress visualization.
Prefer Apache ECharts.The chart must represent 8 life categories:
- Wealth
- Career
- Learning
- Health
- Network
- Personal Projects
- Discipline
- Well-being
Each category must have:
- a progress percentage,
- a target marker or target logic,
- a label,
- a distinct but refined visual treatment.
Use realistic sample values such as:
- Wealth: 78
- Career: 64
- Learning: 82
- Health: 71
- Network: 58
- Personal Projects: 69
- Discipline: 75
- Well-being: 67
At the center of the radial visualization, display:
- “Overall Progress”
- and a combined percentage, for example 71%
The radial chart should look elegant, structured, readable, and premium.
Do not make it look playful or gimmicky.
Do not create a chaotic radar chart.
Do not use a generic fitness-app aesthetic.LAYOUT
Create a full dashboard section around the chart with:
- A left or center main chart area.
- A right-side details panel with category cards.
- Small KPI cards above or below for:
- Current streak
- Goals completed this week
- Best momentum
- Needs attention
- A “Focus Areas” card listing:
- Top 2 categories falling behind
- Top 2 categories improving fastest
- Small trend indicators or mini progress bars in the detail cards.
DESIGN STYLE
The design must match a premium Linkeum-like style:
- deep navy background or navy-tinted surfaces
- lighter blue highlights
- subtle amber/gold accents
- clean white or off-white text
- modern, professional, executive-grade UI
- modern fintech + personal intelligence dashboard
Avoid:
- neon colors
- rainbow palettes
- glassmorphism overload
- generic startup hero sections
- excessive gradients
- cartoonish visuals
Use a refined design system with:
- modern spacing
- subtle borders
- soft shadows
- polished cards
- clean typography
- a strong visual hierarchy
TECHNICAL REQUIREMENTS
- Output only one HTML file
- Include all CSS and JavaScript inside the HTML
- Use CDN imports only if needed
- Prefer Apache ECharts via CDN
- The result must run immediately when saved as an .html file and opened in a browser
- No external assets except the chart library CDN and web fonts if needed
- No frameworks like React, Vue, or Tailwind
- Pure HTML, CSS, and JavaScript only
- Code must be clean, readable, and well-structured
RESPONSIVENESS
The dashboard must be responsive.
- On desktop: chart + side panel layout
- On mobile: stacked layout with excellent readability
- Maintain strong visual hierarchy on smaller screens
INTERACTION
Even if this is a static HTML demo, make the UI feel interactive:
- hover states on cards
- hover emphasis on chart areas if possible
- subtle animated loading for the chart
- filter tabs such as 7D / 30D / 90D / 1Y
- active state styling
CONTENT
Use realistic product-like copy, for example:
- “Your life goals at a glance”
- “Focus on what moves the needle”
- “2 categories need attention this week”
- “Momentum is strongest in Learning and Wealth”
QUALITY BAR
The result should look like a real product dashboard mockup that could be screenshotted for an article and potentially reused later in a real product.Do not explain anything.
Do not output markdown.
Do not wrap the code in triple backticks.
Output raw HTML only.
Kết quả
Kết quả do Qwen tạo ra là một nền tảng rất thuyết phục. Giao diện được xây dựng quanh một biểu đồ radial nhiều vòng lớn ở trung tâm, đi kèm với các thẻ KPI, một bảng focus và các khối chi tiết cho từng hạng mục.
Điều khiến thử nghiệm này trở nên thú vị không chỉ là hiệu ứng hình ảnh. Quan trọng hơn, AI đã tạo ra một cấu trúc dashboard đáng tin cậy, có thể tái sử dụng và đã đủ gọn gàng để làm nền tảng cho một mô-đun Linkeum trong tương lai.
Vì sao thử nghiệm này quan trọng
Prompt Thứ Ba này cho thấy một prompt tốt có thể tạo ra nhiều hơn một bản demo ấn tượng. Nó cũng có thể giúp tạo nguyên mẫu nhanh cho một giao diện sản phẩm thực sự, với logic rõ ràng, hệ phân cấp nhất quán và giá trị tiềm năng trong trung hạn.
Sau quả địa cầu tương tác đã được tích hợp vào mục Events, dashboard radial này tiếp tục rất tốt cùng một logic đó: thử nghiệm nhanh, hình dung một cách cụ thể, rồi quyết định xem ý tưởng đó có xứng đáng được phát triển sâu hơn trong Linkeum hay không.
