Loading...
The story behind using Cursor + Claude to build the Enterprise 360 QC-QA Dashboard with 208 checklists, 25 free tools, Health Score, and Quality Gate — all in a single HTML file, built in under 2 hours
เราเล่าจากการทดลองจริงในแล็บ ไม่ใช่ทฤษฎี — และให้หลักฐานพูดแทน
จุดเจ็บ: ระบบมักพังตอนที่ไม่มีใครดู กว่าจะรู้ตัวก็เสียหายไปแล้ว
เดิมพัน: ระบบล่มเงียบ ๆ คือฝันร้ายของทุกทีม เพราะความเสียหายโตขึ้นทุกนาทีที่ไม่รู้
สิ่งที่เราทำในแล็บ: The story behind using Cursor + Claude to build the Enterprise 360 QC-QA Dashboard with 208 checklists, 25 free tools, Health Score, and Quality Gate — all in a single HTML file, built in under 2 hours
After 3 years of building websites — there've been countless times a deploy went to production only to break the login page, forget to test responsive, or have an API return 500 at 3 AM without anyone noticing until morning.
Every time a bug slipped into production, the same thought: "Why didn't anyone test this first?" And the answer was always the same — no time.
So on March 5, 2026, the decision was made to build a QC-QA system that covers every angle — from UI, API, Security, Performance all the way to SEO — entirely with AI, in under 2 hours.
A lot of people think QC = clicking around the website a couple of times, and if nothing breaks, ship it.
That was the mindset too — until the day Lighthouse score dropped from 92 to 34 because images weren't optimized, Google Search Console flagged high CLS, and a user in Japan reported the pricing page wouldn't load on Safari.
That's when it clicked: good QC needs to be thorough — not just "check if it looks broken."
สร้างระบบ QC-QA ครบ 208 หัวข้อด้วย AI — ใช้เวลาไม่ถึง 2 ชั่วโมง
The system is designed around 5 testing phases that follow the actual software lifecycle:
Review requirements, wireframes, and tech stack before writing a single line of code — catching bugs at the source. Covers 38 items
Code quality, unit tests, linting, type safety — catching bugs while coding, not while deploying. Includes 52 items
Integration tests, E2E tests, cross-browser, responsive — testing everything before going live. Covers 48 items
OWASP Top 10, SSL, CORS, CSP, data protection — security is not a "later" thing. Checks 35 items
Uptime monitoring, error tracking, performance budgets, user feedback — the job doesn't end at deploy. Tracks 35 items
Nobody sat down and typed out 208 checklist items by hand, or manually researched 25 tools — the whole thing was built with Cursor + Claude using just 3 prompt rounds.
Design an enterprise-grade QC-QA system for web applications Divide into phases following the software lifecycle Each phase should have a checklist + severity level + recommended free tools Must cover: UI/UX, API, Security, Performance, SEO, Accessibility Format as JSON that can be imported into a dashboard
Claude returned a 5-phase structure within 30 seconds — complete with severity levels (Critical/High/Medium/Low) for every single item.
For this QC checklist, find actually usable free tools Criteria: Free (not trial), easy to use, CI/CD compatible Group by phase and include the quota limit for each tool
Back came 25 tools like Lighthouse, WAVE, Security Headers, GTmetrix — each with their quota limits listed.
Build a QC Dashboard as a single HTML file Features: Overview + Health Score, Prompts tab, Checklist tab (with filters), Tools tab (with links + quotas), Settings tab Support i18n TH/EN, dark theme, responsive Import/export JSON, localStorage save
Claude built the entire dashboard in one file — HTML + CSS + JavaScript all together, ready to use without installing anything.
ส่วนที่ยากที่สุดไม่ใช่การสร้าง — แต่คือการรู้ว่าต้องทดสอบอะไร
Gauge chart showing project health score + Radar chart for per-phase coverage + Quality Gate telling whether the project is ready to deploy
Ready-made prompts for AI-assisted testing on each item. Just copy and paste into Cursor. Organized by phase + severity
Filter by phase, severity, status (Pass/Fail/Skip). Check items off with auto-save, plus progress bars for each phase
Actually free tools with direct links to their websites + quota limits for each one + grouped by phase
Configure project name and URL, manage multiple projects, Import/Export JSON for backup or sharing with the team
A lot of people ask "Why not build it as a React app?" — the reasons are pretty simple:
1. Instant access — double-click and it works. No npm install, no build step
2. Easy to share — send one file to the team, everyone can use it immediately
3. Works offline — no internet needed, data stored in localStorage
4. Customizable — open and edit with any text editor, no React knowledge required
File size? Under 100KB — compare that to a React app where node_modules alone is at least 200MB.
AI ไม่ได้ทำแทนการคิด — แต่ช่วยให้ทำได้เร็วขึ้น
It wasn't all smooth sailing — AI doesn't always get it right on the first try. There were 3 bugs that needed fixing:
Bug 1: Tailwind CDN wouldn't load — the first version used the Tailwind CDN, but some networks block CDNs, breaking all the CSS. One prompt to AI and it converted everything to inline CSS. Fixed in 1 prompt.
Bug 2: Radar Chart rendering wrong — Canvas doesn't render when the tab is inactive (display: none). Had to add a re-render on tab switch.
Bug 3: i18n switch didn't update UI — needed to rebuild every component on language change, not just swap the text.
All 3 bugs were fixed in 8 minutes — just describe the problem to AI and it handles the fix.
No need to be a developer — anyone involved in a web project can use it:
Developer — use the checklist before every deploy. No more guessing what to test
QA Tester — 208 items with severity levels for systematic testing
Project Manager — check Health Score + Quality Gate to decide if it's ready to release
Freelancer — deliver work with a QC report that makes the deliverable look professional
Business Owner — verify the quality of outsourced websites without knowing any code
ไม่ต้องเลย Dashboard เปิดขึ้นมาใช้ได้ทันที checklist เขียนเป็นภาษาคนอ่าน ไม่ใช่ code ส่วน prompts แค่ copy-paste เข้า AI tool ได้เลย
มี filter แยกตาม severity — ถ้ารีบ แค่ทำ Critical + High ก็ครอบคลุม bug ประมาณ 80% แล้ว ซึ่งมีราว 45 ข้อ
ได้หมด ระบบทดสอบ output (web pages, API responses, security headers) ไม่ใช่ตัว code — จะเป็น Next.js, Vue, PHP หรือ WordPress ก็ใช้ได้
Dashboard ฟรี 100% และ tools ทั้ง 25 ตัวก็ฟรีเช่นกัน (บางตัวมี quota limit แต่เพียงพอสำหรับ solo dev และทีมเล็ก)
ได้ กด Export แล้วได้ JSON file มาเลย จะ Import เข้า project อื่นหรือแชร์ให้ทีมก็ง่าย
อัปเดตล่าสุด: มีนาคม 2026
Open the Dashboard instantly — no login, no install required
Open QC Dashboard →สิ่งที่ได้ และหลักคิด
ของจริงที่เอาไปใช้ต่อได้ ไม่ใช่แค่ไอเดีย หลักคิดของเราคือทำให้เป็นระบบที่ทำซ้ำได้และไม่พึ่งความจำคน
อยากเห็นระบบแบบนี้ทำงานกับงานของคุณ — ดู ViberQC และลงชื่อรอรอบทดลองที่ hilogiclabs.com
Join Hi Logic Labs for premium Content, Templates and a quality Community
Sign Up
Three months running OpenClaw AI Trading — found 4 hidden bottlenecks. AI helped analyze, optimize multi-model routing, and cut costs while improving quality.
Woke up to alerts flooding 3 channels — server overload, 5 broken workflows, 20 containers fighting for resources. AI diagnosed, analyzed, and fixed everything in 8 minutes without writing a single line of code.
Built an AI Trading Agent pulling real-time stock data from 4 markets. At 80% completion, discovered Node.js couldn't handle 1,000+ concurrent users — because the AI prompt didn't mention scale requirements. AI proposed Hybrid Architecture (Node.js + Python) completed in 30 minutes.