Why You Shouldn't Ask AI to Build a Website with a Single Sentence
Learn a practical, verifiable approach to use AI assistance for building a website dashboard: extract UI text and components from a screenshot, plan front-end components and data interfaces, create stepwise prompts, and prepare a verification checklist (including copyright checks for referenced test content).
Image Analysis
Image 1 — Facts and readable content (recorded top-to-bottom, left-to-right)
Facts (only record text, interface elements, chart data and visible phenomena that can be read with reasonable certainty)
- Large overlay headline (top of image, white and yellow large text)
- White: 当你用AI (When you use AI)
- Yellow: 搭工作台 (Set up a workbench)
- “AI” appears as uppercase Latin letters (“AI”)
- Top-left / sidebar
- Small green tag at top-left: “V2”
- Sidebar top text: IELTS 工作台 (IELTS Workbench)
- Sidebar menu items (vertical, with icons): Home; Listening; Reading; Mistakes; Progress
- Main area, upper center
- Small/page title: IELTS V2 学习工作台 (IELTS V2 Learning Workbench)
- Large title: 夜深了 (It’s late)
- Small line: 今日已练习 0 组题目 (Practiced 0 sets today)
- Four statistic cards (horizontal row, values are 0 or 0.0)
- Card 1
- Title: 听力均分 (Listening average)
- Value: 0.0 / 7.5
- Note: 0 次练习 (0 practices)
- Card 2
- Title: 阅读均分 (Reading average)
- Value: 0.0 / 7.5
- Note: 0 次练习
- Card 3 (small card)
- Title: 待复习错题 (Questions to review)
- Value: 0 / 0
- Note: 0 已掌握 (0 mastered) — visible “0 / 0” and an adjacent small phrase like “已掌握”
- Card 4 (small card)
- Title: 总练习量 (Total practice)
- Value: 0
- Note: 0 今日 (0 today) or similar phrasing
- Two large function buttons (side-by-side)
- Left (teal/dark green block)
- Title: 听力训练 (Listening training)
- Icon: headphones
- Subtitle: 剑桥真题听力练习,支持精听和判分 (Cambridge real-test listening practice; supports close listening and scoring) — readable
- Right (yellow/golden block)
- Title: 阅读训练 (Reading training)
- Icon: book
- Subtitle: 剑桥真题阅读练习,计时作答,即时反馈 (Cambridge real-test reading practice; timed answers, instant feedback) — readable
- Large blank area in middle-lower region (dashed box) with large plus button in center
- Text: 开始第一次练习 (Start the first practice)
- Helper small text: 选择听力或阅读练习,从剑桥真题开始训练 (Choose listening or reading practice; start with Cambridge real tests) — approximate reading
- Bottom-left small text
- Target: 7.0
- Listening 7.5; Reading 7.5 (two items side-by-side)
- Overall style and phenomena
- Page shown with a slight rotation/skew effect
- Main layout uses light card design; left sidebar light gray/white, main area white background
- Accent colors: deep teal and gold/yellow for function blocks
- Bottom-right has a small circular watermark or badge that is not easy to read
Unreadable / uncertain parts (marked as illegible or blurred)
- Exact wording to the right of “0 已掌握” on the third stat card (the word “已掌握” is visible but surrounding small text is blurred)
- Exact second-line wording on the fourth card (appears “0 今日” or similar; details of punctuation/spacing uncertain)
- Helper small text below the dashed box in middle-lower area has slight blur; generally reads as instruction to choose listening or reading from Cambridge real tests but some words uncertain
- Bottom-right small circular watermark/badge text or icon not decipherable
- Some background text overlapped by the top banner is partially obscured; small edge text slightly blurred
Inferred (reasonable inferences, marked as inference)
- This appears to be an IELTS practice/learning workbench dashboard, version V2 (inferred from “IELTS V2 学习工作台” and sidebar “IELTS 工作台”)
- The four cards likely show user stats for listening and reading averages, practice counts, mistakes to review, and total practice (inferred from card titles and number formatting)
- Buttons “听力训练” and “阅读训练” likely navigate to their respective practice modules (inferred from titles and icons)
- Bottom-left “目标 7.0” and “听力 7.5 阅读 7.5” are likely user-set target overall and section scores (inferred)
- The dashed box labeled “开始第一次练习” likely launches or creates a new practice session (inferred)
Ignored or not executed in-image instructions
- The image contains actionable prompts (e.g., “开始第一次练习”); these have been recorded as interface text only and not executed.
If you need the above readable text arranged as a copyable list or annotated by pixel position, indicate the desired format.
SkillPI Creation Analysis
Purpose of the artifact:
- The image functions as a screenshot or design mockup of an IELTS study/practice dashboard (labeled V2). It documents visible UI text and layout for use in UI review, specs extraction, or design reproduction. Source URL: https://www.xiaohongshu.com/explore/6a8726520000000025005900?xsec_token=CBR_8gLtecaaC97SkaKSawTCtDV3e0czscO10GgbT_1Dg=&xsec_source=app_share
Image evidence summary (verifiable facts):
- Readable interface elements include: top-left V2 tag, sidebar “IELTS 工作台”, page title “IELTS V2 学习工作台”, main headline “夜深了”, stats cards (Listening avg 0.0/7.5, Reading avg 0.0/7.5, Questions to review 0/0, Total practice 0), two function blocks “听力训练” and “阅读训练”, dashed-box call-to-action “开始第一次练习”, and bottom-left target scores “7.0 / 听力 7.5 阅读 7.5”.
- Blurred/uncertain items that require confirmation: exact small text to the right of “已掌握” on the third card, the exact second-line wording on the fourth card, the microcopy below the dashed box, and the bottom-right watermark/badge.
Associated skills and reproducible steps (note: the source does not specify which tools or skills were used; the following are general, tool-agnostic steps that would be needed to reproduce a similar UI):
1) Confirm requirements and content licensing: verify rights to use Cambridge test items (text mentions “剑桥真题”) and specify required features (score averaging, timed reading, instant feedback, scoring).
2) Create visual specification: produce a high-fidelity mockup reflecting the documented layout—sidebar, header, four stat cards, two feature blocks, dashed main CTA area, and target score indicator.
3) Break into frontend components: define reusable components for stat cards, feature cards, icons, and CTA area; specify props such as title, value, subtitle, and click handlers.
4) Design data model and APIs: define how practice counts, averages, mistakes, and targets are computed and served; design placeholder/mock data for UI testing if backend is not yet available.
5) Test and verify accessibility/readability: check text legibility at target resolutions, confirm watermark/V2 semantics, and ensure overlapping text is not obscured.
Prerequisites and items to verify before attempting reproduction:
- Licensing/permission to use “Cambridge” (剑桥) test content.
- Whether the image is from a working product or a static design mockup (affects available data and required backend work).
- What specific tools, AI assistants, or front-end frameworks (if any) were used to create this interface—source does not provide this information and these skills remain to be verified.
- The meaning and ownership of the bottom-right watermark/badge and the V2 label (are they internal markers, brand marks, or version indicators?).
Concluding verification checklist:
- Extract the readable labels and microcopy from the image for spec creation.
- Confirm the four blurred/uncertain text items before finalizing copy.
- Verify content licensing for any exam materials referenced.
- Confirm whether any particular AI tool or framework was used (not specified in the source).
