20:"$Sreact.view_transition" 21:I[9754,["/_next/static/chunks/2t36f5p4pjzlb.js","/_next/static/chunks/1gyqeidjm5eoa.js","/_next/static/chunks/0_fjnxc4tt_l_.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/3kv2zf0i7s2wc.js","/_next/static/chunks/1vs_3g_g75zmk.js","/_next/static/chunks/2g4dh802s8oz3.js","/_next/static/chunks/1bc3f0shukf1j.js","/_next/static/chunks/192kgs9v_t14j.js","/_next/static/chunks/0z6pw0v5c_lx5.js","/_next/static/chunks/08r60e6icmtkc.js","/_next/static/chunks/3trx6c0i7_x-3.js","/_next/static/chunks/40sro5bzp9bi_.js","/_next/static/chunks/1wgf3tk38y6cf.js"],"ProjectDetail"] 22:T44cd, vibecoding · 用 Claude Code 自学 Vibe Coding

vibecoding · 官方 GitHub · taehojo

从提示词出发，
让工具为你写代码。

《独自学习 Vibe Coding with Claude Code》官方仓库

每一章的应用都不是凭空出现的——它们都从一行提示词开始。PROMPTS.md 记录着从手写识别到购物清单的全部指令；读一行，落一个成品。我们把"读法"排成从上到下的序列：左栏是脚本，右栏是它浇铸出的 artifact。

8 章实践项目

每章一个在线演示

配套免费 YouTube 课程

GitHub · taehojo/vibecoding

01 · 脚本即成品

"给一张 28×28 的手写数字图，告诉我它是几。"

"帮我做一个能记住我待办事项的小工具。"

"读冰箱里的食材，给出今晚菜单。"

"把这份 PDF 缩成三行要点。"

recognize · 识别手写数字识别

track · 待办待办事项应用

inventory · 库存冰箱食材识别

summarize · 摘要PDF 摘要 AI

02 · 提示词合集

01本章的命令与参数，逐行写进 PROMPTS.md。

02每行提示对应一个章节的成品：读了，就该能落地。

03从识别到购物清单，指令随即生成应用，不是图片、不是截图。

04读法即用法：照着敲，工具替你搭骨架。

真正的"产品"是这一长串指令本身——每个应用都由它出生。整个合集从基础到进阶排列，按条读，等于把教程过了一遍。

03 · 成品账册

01recognize手写数字识别

给一张手写图，模型说它是几。

在线演示

02track待办事项

记住零碎的日程，一条一条划掉。

在线演示

03quiz常识问答游戏

出题、作答，检验即学的语料。

在线演示

04inventory冰箱食材识别

认得出你冷藏室里的东西。

在线演示

05empathizeAI 共情日记

写下情绪，让模型接着读。

在线演示

06summarizePDF 摘要 AI

一页文件，缩成几句。

在线演示

07shop购物清单应用

记你要买的东西，出门不忘。

在线演示

08+ more每章配实时演示

从手写识别一路到购物清单，都在官方仓库。

查看仓库

04 · 起步备忘

install

装就完事

把仓库 clone 下来，装好依赖，照着 PROMPTS.md 从第一章跑起。

lecture

免费课程

配套的 YouTube 播放列表，跟着视频把每一章过一遍。

打开课程

guides

读者指南

不同印刷版本有各自的安装与阅读说明，先认对版本再动手。

查看指南

05 · 版本与勘误

版本对照内容跟着书中某一版走，动手前留意你看的是哪一版。

勘误表书里若有笔误或过期示例，勘误会追着更新。

外接服务部分示例依赖外部 API，个别演示需要联网才能跑起来。

06 · 你的第一行提示

$ 把仓库 clone 下来，装上依赖，照着 PROMPTS.md 从第一章开始—— 第一行提示，会变成一个能跑的成品。

vibecoding · 由提示词浇铸出的实践仓库

23:T4589, vibecoding · teaching Vibe Coding with Claude Code

vibecoding · official GitHub · taehojo

Start from the prompt, and let the tool write the code.

Studying Vibe Coding with Claude Code — official repo

No chapter app appears out of nowhere. Each one begins as a single line of a prompt. PROMPTS.md holds the whole instruction set — from handwriting recognition to the shopping list; read a line, land the artifact. We arranged that reading experience top to bottom: the script on the left, the thing it casts on the right.

8 chapters of practice

a live demo per project

free YouTube course

GitHub · taehojo/vibecoding

01 · script becomes artifact

"Given a 28×28 image of a handwritten digit, tell me what it is."

"Build me a small tool that remembers my to-dos."

"Read what's in my fridge and suggest tonight's menu."

"Squeeze this PDF down to three bullet points."

recognizehandwriting recognition

trackto-do app

inventoryfridge ingredient recognition

summarizePDF summarizer AI

02 · the prompt collection

01Every chapter's command and parameter is written line by line into PROMPTS.md.

02Each prompt line maps to one chapter's artifact: read it and it should be runnable.

03From recognition to the shopping list, instructions cast applications — not images, not mockups.

04Reading is the workflow: type along and the tool scaffolds the rest.

The real "product" is the chain of instructions itself — every app is born from it. The full collection runs from beginner to advanced; going through it line by line is nearly the whole course.

03 · the artifact register

01recognizeHandwriting recognition

Feed it a handwritten digit; the model names it.

live demo

02trackTo-do app

Holds scattered tasks; check them off one by one.

live demo

03quizTrivia quiz game

Poses questions, scores your answers.

live demo

04inventoryFridge ingredient recognition

Recognizes what's in your refrigerator.

live demo

05empathizeAI empathy diary

Write down a feeling; the model reads it back.

live demo

06summarizePDF summarizer AI

A full document, reduced to a few sentences.

live demo

07shopShopping list app

Jot down groceries; leave the store with all of them.

live demo

08+ moreA working demo per chapter

From handwriting to shopping, all inside the official repo.

browse the repo

04 · getting started

install

Just run it

Clone the repo, install the dependencies, and work through PROMPTS.md from chapter one.

lecture

Free course

A companion YouTube playlist walks through every chapter alongside the code.

open the course

guides

Print edition notes

Each print edition ships with its own install and reading guide. Find your version before you start.

see the guides

05 · editions & author's notes

Editions Content tracks the book's print edition; check which one you are reading.

Errata Typo or a dated example in the book? The errata keeps up with it.

Live services Some examples depend on external APIs, and a few demos need network access to run.

06 · your first prompt

$ Clone the repo, install the dependencies, and start at PROMPTS.md chapter one — the first line you type will become something runnable.

vibecoding · a practice repo cast from prompts

a:[["$","$20",null,{"enter":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-enter","default":"none"},"exit":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-exit","default":"none"},"update":{"secondary-forward":"secondary-forward","secondary-back":"secondary-back-update","default":"none"},"default":"none","children":["$","$L21","cmt2zh34y01o462717zhxtyjg:zh-CN:beautified",{"project":{"id":"cmt2zh34y01o462717zhxtyjg","slug":"taehojo-vibecoding","name":"vibecoding","description":"《独自学习 Vibe Coding with Claude Code》官方 GitHub 仓库","authorName":"taehojo","authorVerification":{"verified":false,"verifiedAt":null},"category":"development_tools","subcategory":"data_ai_tools","experienceUrl":null,"qualityScore":43,"featured":false,"officialSite":null,"views":{"original":{"available":true},"official":{"available":false,"reason":"disabled_by_policy"},"beautified":{"available":true,"reason":null},"defaultView":"beautified"},"beautifiedView":{"revisionId":"cmt2zh35i01og6271ghohqvwt","kind":"artifact","artifact":{"schemaVersion":"localized-static-html-v4","kind":"static_html","locales":["zh-CN","en"],"defaultLocale":"zh-CN","documents":{"zh-CN":"$22","en":"$23"},"designDirections":{"schemaVersion":"dodot-design-directions-v1","directions":[{"id":"chapter-progression-rail","name":"Chapter Progression Rail","projectMetaphor":"The repository is a curated book-course: a linear chain where each chapter (handwriting, to-do, quiz, fridge, AI diary, PDF, shopping list) is a sequential progress node that accumulates into a complete Vibe Coding practice track.","signatureVisual":"A horizontal progress rail of 8 distinct nodes, each node shown as a compact unit whose ink/scaffold style changes as you advance — earlier nodes as plain scaffolding, later nodes denser and more finished — conveying cumulative skill growth.","heroGeometry":"A long horizontal ledge/scanline across the hero; the project sits mid-rail, flanked by chapters leading in and out, forming an arrow of progression rather than a centered card.","sectionSequence":["rail-intro","chapter-map","workspace-joins","lecture-release","source-access","start-line"],"surfaceModel":"Rail-and-slot surfaces: a persistent horizontal spine plus raised node plaques at fixed slots, no floating cards, edges aligned to the spine.","palette":"Deep ink-on-paper: near-black indigo text, off-white paper field, a single accent coral for 'go/active', muted amber for 'in progress', quiet slate for finished nodes.","typography":"Serif book title pairs with a mono operational face for commit/labels; tight but tall leading, strong chapter numerals.","desktopComposition":"Non-centered spine: header left, the full-width progress rail as the main stage, chapter nodes tiled on the rail from left to right, details in a right-leaning sidebar.","mobileTransformation":"The horizontal rail curls into a vertical spine; nodes become stacked step rows, each with its own progress tick, previous-finish lines connecting them top to bottom.","mediaStrategy":"No media region; chapter identity shown through monospaced node labels and typographic ticks, never fake screenshots.","forbiddenPatterns":["centered marketing hero with three stat cards","generic feature-card wall","browser/phone/terminal shell mockup","decorative glow grid or particle field"],"compositionFingerprint":"linear-rail-8-nodes-progress"},{"id":"prompt-as-backbone","name":"Prompt-as-Backbone","projectMetaphor":"Every project in the repo is generated from written prompts (PROMPTS.md); the true product is the chain of instructions from which each app is born, so the page is organized as a script-to-artifact reading flow.","signatureVisual":"A flowing 'script stream' — a continuous vertical stream of prompt lines where each line flips into the artifact it produces (chapter app), materializing output out of textual instruction.","heroGeometry":"A two-sided diagonal: a column of plain prompt text on the left tipping into a bold artifact mark on the right, visually 'compiling' from words to thing.","sectionSequence":["script-stream","prompt-collection","artifact-catalog","install-notes","edition-errata","first-prompt"],"surfaceModel":"Flat writing-sheet surfaces with hard rules/underlines; no raised cards, prompts sit on ruled lines, artifacts on solid fields, strong contrast between text-surface and thing-surface.","palette":"High-contrast document palette: white/cream sheets, near-black text, one electric-teal for 'commands/active-line', rust for artifact content.","typography":"Monospace dominates for prompts, transitional serif for narration, telegraphic caps for artifact names.","desktopComposition":"Asymmetric split: left 40% is a continuous script/prompt column, right 60% the artifact register; a diagonal seam between them is the signature moment.","mobileTransformation":"The diagonal collapses into a top-to-bottom line-by-line story: each prompt line followed directly by its produced artifact, no side columns.","mediaStrategy":"No media region; the script stream and artifact typography are the visual content, no fake product shots.","forbiddenPatterns":["three-metric-card hero","generic feature card grid","device/editor shell frame","decorative particle or glow background"],"compositionFingerprint":"script-stream-diagonal-materialize"},{"id":"workshop-evidence-wall","name":"Workshop Evidence Wall","projectMetaphor":"The repo is a self-study workshop with a working output for each lesson; the page is a wall of evidence where each practice output is a verifiable artifact pinned by what it does, not a marketing claim.","signatureVisual":"A 'wall of doings' — a collage of seven distinct practice artifacts (recognize, track, quiz, inventory, empathize, summarize, shop), each a minimal labeled operation mark rather than a screenshot.","heroGeometry":"A staggered brick/pin layout occupying the full viewport, no centered hero capsule; the wall itself is the opening image.","sectionSequence":["workbench","artifact-wall","lecture-release","source-access","final-artifact"],"surfaceModel":"Pinned-clip surface model: flat labeled plaques pinned onto a faint cork/pin field with visible attachment points, each artifact independently legible, no uniform card grid.","palette":"Workshop palette: warm neutral backing, deep graphite text, one signal vermillion for pins/actions, olive for 'built', cool gray for structure.","typography":"A sturdy grotesk for artifact titles, mono captions for the operation each artifact performs, large icon-kind marks without icon libraries.","desktopComposition":"Deliberately irregular staggered grid with horizontal rhythm; columns break rank, each artifact carries its own axis, spacious negative zones.","mobileTransformation":"The wall rehangs as a vertical pin-stack: each artifact expands to a full-width defined row with its operation caption and source-join action, reordered by learning path.","mediaStrategy":"No media region; artifact identity rendered as typographic operation marks and labeled structure, no fake product representations.","forbiddenPatterns":["centered hero with stat cards","uniform feature-card wall","app/browser/terminal shell","decorative grid-glow particle backdrop"],"compositionFingerprint":"evidence-wall-7-artifacts-pinned"}],"selectedDirectionId":"prompt-as-backbone","selectionRationale":"Chosen for strongest mechanism fit and lowest similarity risk. The repo's verified core is a book-course where every chapter artifact is generated from a written prompt (PROMPTS.md is a real, extracted fact). 'Prompt-as-Backbone' makes that script-to-artifact mechanism the signature visual, rather than defaulting to a marketing hero or metric cards. It also best supports the weakest evidence (partial English localizations) by relying on typographic structure instead of imagery, and its antiTemplateContext fingerprints are empty, so the script-stream diagonal introduces a unique composition."},"designBrief":{"schemaVersion":"dodot-design-brief-v1","selectedDirectionId":"prompt-as-backbone","projectMetaphor":"Every project in the repo is generated from written prompts (PROMPTS.md); the true product is the chain of instructions from which each app is born, so the page is organized as a script-to-artifact reading flow.","signatureVisual":"A flowing 'script stream' — a continuous vertical stream of prompt lines where each line flips into the artifact it produces (chapter app), materializing output out of textual instruction.","compositionFingerprint":"script-stream-diagonal-materialize","heroGeometry":"A two-sided diagonal: a column of plain prompt text on the left tipping into a bold artifact mark on the right, visually 'compiling' from words to thing.","sectionSequence":["script-stream","prompt-collection","artifact-catalog","install-notes","edition-errata","first-prompt"],"surfaceModel":"Flat writing-sheet surfaces with hard rules/underlines; no raised cards, prompts sit on ruled lines, artifacts on solid fields, strong contrast between text-surface and thing-surface.","palette":"High-contrast document palette: white/cream sheets, near-black text, one electric-teal for 'commands/active-line', rust for artifact content.","typography":"Monospace dominates for prompts, transitional serif for narration, telegraphic caps for artifact names.","desktopComposition":"Asymmetric split: left 40% is a continuous script/prompt column, right 60% the artifact register; a diagonal seam between them is the signature moment.","mobileTransformation":"The diagonal collapses into a top-to-bottom line-by-line story: each prompt line followed directly by its produced artifact, no side columns.","mediaStrategy":"No media region; the script stream and artifact typography are the visual content, no fake product shots.","evidencePlan":["Chapters roster (handwriting, to-do, quiz, fridge, AI diary, PDF, shopping) rendered as the artifact register — sourced from readme evidence.","PROMPTS.md prompt-collection manifest presented as the script stream — sourced from readme evidence.","Companion free YouTube lecture and install guide surfaced as separate install/lecture sections — sourced from readme evidence.","Install notes plus edition errata run as supporting note rows, not marketing claims — sourced from readme evidence."],"localeContract":{"zh-CN":"文案按中文自然密度书写，章节与操作以中文表述，保留必要英文专名（Claude Code、PROMPTS.md、YouTube）。","en":"Copy written at natural English density; chapter and operation labels in English, retaining proper nouns (Claude Code, PROMPTS.md, YouTube)."},"forbiddenPatterns":["three-metric-card hero","generic feature-card wall","device/editor shell frame","decorative particle or glow background"]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了选定的 prompt-as-backbone 设计方向：script-stream 2fr/3fr 不对称斜向接缝区真实存在，提示词在左、artifact 在右，'↘' 斜向标记凸显编译式转译瞬间；六章 section 序列与 brief 完全一致；全部文案均有 material.json 证据支撑（8 章、在线演示、免费 YouTube 课程、PROMPTS.md、安装指南、勘误、外部 API 依赖），未虚构数据；双语 zh-CN/en 结构一一对应且自然，均保留 Claude Code/PROMPTS.md/YouTube 专名。回退到通用 Hero/三卡/卡片墙/设备壳/装饰渐变的禁止模式均未出现，所有链接指向真实仓库地址，无假控件。仅有一处非阻断性的移动端成对展开偏离，故 approved。","checks":{"projectFit":{"passed":true,"evidence":"源码采用 brief#prompt-as-backbone 的核心机制：.script-stream grid-template-columns:2fr 3fr 构成左40%脚本列/右60% artifact 账册列，分隔处 dashed 缝线加 '↘' 斜向标记，直观表达'从文字浇铸为成品'的编译式转译。六个 section（script-stream, prompt-collection, artifact-catalog, install-notes, edition-errata, first-prompt）与 design-brief.sectionSequence 逐项一致（QA 报告 h2Count=6, sectionCount=6）。表面模型使用平贴书写纸面、硬边规则线与下划线，artifact 落在 cream 实色字段、rust 强调，符合 surfaceModel；teal 专用于命令行/活动行，符合 palette；monospace 主导提示语 + Georgia serif 叙述 + 大写 op 标签，符合 typography 约定。"},"evidenceBound":{"passed":true,"evidence":"所有断言均可追溯至 material.json：'8 章实践项目'对应 summary 之一/overview 的'8章完整实践项目'；'每章一个在线演示'对应 claim2 'with live demos'；'配套免费 YouTube 课程'对应 claim4 'free YouTube lecture playlist'；PROMPTS.md 提示词合集对应 claim3 '完整提示词集合（PROMPTS.md）'；安装指南、勘误对应 claim3；外接 API 依赖与需联网对应 localizations 的 caveats。artifact 账册 7 项（recognize/track/quiz/inventory/empathize/summarize/shop：手写识别、待办、问答、冰箱、AI日记、PDF摘要、购物清单）与 brief.evidencePlan 及 readme 章节清单逐项吻合，无虚构章节。GitHub taehojo/vibecoding 与仓库事实一致。"},"signatureVisual":{"passed":true,"evidence":"signatureVisual 'script stream'（一条连续的提示词垂直流，每行翻转为它产出的 artifact）真实存在于 #script-stream：左 script-col 四条 instruc 提示行（28x28 数字识别、待办、冰箱、PDF）在 ruled 线上，右 artifact-col 对应四条 item（recognize/track/inventory/summarize 的 .op 标记），形成提示词到成品的逐行对应；2fr/3fr 加 '↘' 箭头完成对角线接缝，是实质性的图形机制而非占位符。heroGeometry '文案自左向右 tip 进 artifact 标记' 的编译式对角结构已落实。"},"mobileTransformation":{"passed":true,"evidence":"移动端（@media max-width:820px）将 .script-stream 切换为 display:block，移除右侧缝线（border-right:none）与 '↘' 标记（::after display:none），.artifact-col 改为顶对齐单列留白（padding:40px 0 0），形成自上而下的单列流、无侧栏，符合'对角崩塌为上下叙事、去侧栏'的重构。QA 移动端 scrollWidth=390=clientWidth，无横向溢出。轻微偏离见 issues：未做到严格'每行提示紧跟其成品'的成对交错，但已消除侧栏并形成连贯纵向叙事，不构成本质缺漏。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 在结构、section 序列、章节列表、文案密度上完全对等且翻译自然；QA 显示 en cjkCount=0 而 zh cjkCount=714，语言隔离正确。两版均保留专名（Claude Code、PROMPTS.md、YouTube）。轻微差异：05 节标题 zh '版本与勘误' 对应 en 'editions & author's notes'，语义等价的自然英文表达，非内容缺失。"},"antiTemplate":{"passed":true,"evidence":"未回退到受禁模式：masthead 使用 4 行平贴 ruling 走线（rail-proof），而非三指标卡 Hero；artifact-catalog 为平贴实色账户网格（register），非通用 feature 卡墙；无浏览器/编辑器/终端壳（first-prompt 的 $ 块为平贴文字提示行，无窗框/标签/镀铬）；调色板为平面高对比（paper/cream/ink/teal/rust），无装饰性渐变/粒子/自发光背景。唯一'↘'为承载语义的接缝指示，非装饰。"},"noFakeUi":{"passed":true,"evidence":"全部链接指向真实的 https://github.com/taehojo/vibecoding，无 # 占位或死链；QA fakeControlCount=0, emptyLinkCount=0, brokenImageCount=0；无媒体区域亦无假产品图。proof-line/ledger/note 均为文本行而非伪装按钮，在线演示与打开课程等链接真实可用，无假控件。"}},"issues":[{"code":"mobile-stream-not-interleaved","severity":"warning","locale":"all","description":"brief.mobileTransformation 要求移动端'每行提示紧随其产出的 artifact'的成对交错叙事，当前实现将 4 条提示先行排列、4 个 artifact 随后排列，而非一一成对紧跟。已满足'无侧栏、自上而下'的核心要求，属表达方式偏离。","repairInstruction":"在移动端用 flex/grid 上下结构将每条 .instruc 与对应 .item 配对交错排列（脚本行后紧跟其 artifact），使纵向流呈现明显的行对→成品节奏；桌面端保持不变。"}]},"repairEvidence":[{"attempt":1,"before":{"qaPassed":false,"designReviewApproved":false,"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":false,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":0,"sectionCount":6,"textLength":1299,"cjkCount":711,"latinLetterCount":260,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":3902,"h1Top":143.1875,"bottomInset":80.09375,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"09a3d1d45b5a770d25d443f2f0e40311dac6893c650f55215b887084a629c61b","middle":"1f1e2ea0b943452a0dde7d5eb307b94a18d029759c9fe67a6f0f990ed28f7fed","bottom":"88e487443ae1459b2df1c470a455f7db2c352bde70476ac2bb51abe337ddbf07"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":false,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":0,"sectionCount":6,"textLength":1299,"cjkCount":711,"latinLetterCount":260,"scrollWidth":390,"clientWidth":390,"scrollHeight":5375,"h1Top":135.1875,"bottomInset":80.0625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"e9082915211672e9de24928fc57e19458af14ca602822e622221863fc0858ff3","middle":"9192a5c95bedade61ec4f96597261d15bfc4af4f4b2596b4bc64c263bb383b5e","bottom":"ca9879e01c40ce68f5c4fb6d88cabc5b1ebd7e7b8e7ef63e87fa026e60778ca3"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":false,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":0,"sectionCount":6,"textLength":3127,"cjkCount":0,"latinLetterCount":2436,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4270,"h1Top":143.1875,"bottomInset":80.171875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"8b0603435d431422c3ef2d46c77ba7c747f20b7135ce88ab85a92305519aec19","middle":"94a9b37e1601e854fdebce0e2232ca117f9916376504b825b31e2b73be07b7f6","bottom":"7143c60d7005b6fc045e14489121f4e4dabe91d83c3b4db52b73717d2004405f"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":false,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":0,"sectionCount":6,"textLength":3127,"cjkCount":0,"latinLetterCount":2436,"scrollWidth":390,"clientWidth":390,"scrollHeight":6241,"h1Top":154.375,"bottomInset":80.390625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"7b18db81a566970efd28434c6c7f8a0f596347bedfe8ba77837d1629b20164da","middle":"867770064d92b6c0efae01443193f0ddb2e0c0de90c5cddbf640cca9be41fdbe","bottom":"e30ac38bc504e45e0b853ba37119b43a16a0c4f4865ea459c0fbc554bf4d2ef6"},"consoleErrors":[],"networkRequests":[]}]},"visualReview":null},"after":{"qaPassed":true,"designReviewApproved":true,"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":1331,"cjkCount":714,"latinLetterCount":271,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4215,"h1Top":143.1875,"bottomInset":95.625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"9defbd305d2cb2262214a65e5d84d042aca88b920fe7b9bbecd79e7ab89af2ae","middle":"0f21b02402511ba937882053984626c41edefbba3148079e11d02a9e8ee46b9b","bottom":"b56791731b947be6a6be4a0cd11ee88c9e698e657eb2700efa567dc4124f9fb4"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":1331,"cjkCount":714,"latinLetterCount":271,"scrollWidth":390,"clientWidth":390,"scrollHeight":5229,"h1Top":135.1875,"bottomInset":96.46875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"134830f717869cda2ecb0c5e41d4442140bf14d78a5ea517509a57202a5e1ae0","middle":"4defab69ff407d76a45a6d8c31f94e52f1838244dbf49af832eaa76394f8222c","bottom":"f33fc7dde51d4594013dec98ff051c96a96f4af2049ffaff16dc0b205ecfbf40"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":3154,"cjkCount":0,"latinLetterCount":2444,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4344,"h1Top":143.1875,"bottomInset":96.265625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"a2b69084cdf77a454a0c5d72134dc6129f38594286ed3e247a1d2360b0feb9ae","middle":"a99d2ee3d183d25b793a679a04ccf8197ffc1edc3ca96ce5b42fd4a100c97f0d","bottom":"10b05266bae8a1e3074d7830a6ef50f9e06d6fc65ca77758e53ca8ffed3619b2"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":3154,"cjkCount":0,"latinLetterCount":2444,"scrollWidth":390,"clientWidth":390,"scrollHeight":5845,"h1Top":154.375,"bottomInset":96.0625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"3ea4cb5d88169094248adb76ecdad5726a6f52573a5a58a8b10f82cac81d2906","middle":"686c4434eeacd13d55449ab6445a36607975fba7fd60669075875027c0f7dc65","bottom":"e22622314d0fbc4d216fec56e041aa0009b6cef5b0f4ea59bbf8118eea5a060e"},"consoleErrors":[],"networkRequests":[]}]},"visualReview":{"schemaVersion":"dodot-automated-design-review-v1","status":"approved","summary":"页面忠实实现了选定的 prompt-as-backbone 设计方向：script-stream 2fr/3fr 不对称斜向接缝区真实存在，提示词在左、artifact 在右，'↘' 斜向标记凸显编译式转译瞬间；六章 section 序列与 brief 完全一致；全部文案均有 material.json 证据支撑（8 章、在线演示、免费 YouTube 课程、PROMPTS.md、安装指南、勘误、外部 API 依赖），未虚构数据；双语 zh-CN/en 结构一一对应且自然，均保留 Claude Code/PROMPTS.md/YouTube 专名。回退到通用 Hero/三卡/卡片墙/设备壳/装饰渐变的禁止模式均未出现，所有链接指向真实仓库地址，无假控件。仅有一处非阻断性的移动端成对展开偏离，故 approved。","checks":{"projectFit":{"passed":true,"evidence":"源码采用 brief#prompt-as-backbone 的核心机制：.script-stream grid-template-columns:2fr 3fr 构成左40%脚本列/右60% artifact 账册列，分隔处 dashed 缝线加 '↘' 斜向标记，直观表达'从文字浇铸为成品'的编译式转译。六个 section（script-stream, prompt-collection, artifact-catalog, install-notes, edition-errata, first-prompt）与 design-brief.sectionSequence 逐项一致（QA 报告 h2Count=6, sectionCount=6）。表面模型使用平贴书写纸面、硬边规则线与下划线，artifact 落在 cream 实色字段、rust 强调，符合 surfaceModel；teal 专用于命令行/活动行，符合 palette；monospace 主导提示语 + Georgia serif 叙述 + 大写 op 标签，符合 typography 约定。"},"evidenceBound":{"passed":true,"evidence":"所有断言均可追溯至 material.json：'8 章实践项目'对应 summary 之一/overview 的'8章完整实践项目'；'每章一个在线演示'对应 claim2 'with live demos'；'配套免费 YouTube 课程'对应 claim4 'free YouTube lecture playlist'；PROMPTS.md 提示词合集对应 claim3 '完整提示词集合（PROMPTS.md）'；安装指南、勘误对应 claim3；外接 API 依赖与需联网对应 localizations 的 caveats。artifact 账册 7 项（recognize/track/quiz/inventory/empathize/summarize/shop：手写识别、待办、问答、冰箱、AI日记、PDF摘要、购物清单）与 brief.evidencePlan 及 readme 章节清单逐项吻合，无虚构章节。GitHub taehojo/vibecoding 与仓库事实一致。"},"signatureVisual":{"passed":true,"evidence":"signatureVisual 'script stream'（一条连续的提示词垂直流，每行翻转为它产出的 artifact）真实存在于 #script-stream：左 script-col 四条 instruc 提示行（28x28 数字识别、待办、冰箱、PDF）在 ruled 线上，右 artifact-col 对应四条 item（recognize/track/inventory/summarize 的 .op 标记），形成提示词到成品的逐行对应；2fr/3fr 加 '↘' 箭头完成对角线接缝，是实质性的图形机制而非占位符。heroGeometry '文案自左向右 tip 进 artifact 标记' 的编译式对角结构已落实。"},"mobileTransformation":{"passed":true,"evidence":"移动端（@media max-width:820px）将 .script-stream 切换为 display:block，移除右侧缝线（border-right:none）与 '↘' 标记（::after display:none），.artifact-col 改为顶对齐单列留白（padding:40px 0 0），形成自上而下的单列流、无侧栏，符合'对角崩塌为上下叙事、去侧栏'的重构。QA 移动端 scrollWidth=390=clientWidth，无横向溢出。轻微偏离见 issues：未做到严格'每行提示紧跟其成品'的成对交错，但已消除侧栏并形成连贯纵向叙事，不构成本质缺漏。"},"localeParity":{"passed":true,"evidence":"zh-CN 与 en 在结构、section 序列、章节列表、文案密度上完全对等且翻译自然；QA 显示 en cjkCount=0 而 zh cjkCount=714，语言隔离正确。两版均保留专名（Claude Code、PROMPTS.md、YouTube）。轻微差异：05 节标题 zh '版本与勘误' 对应 en 'editions & author's notes'，语义等价的自然英文表达，非内容缺失。"},"antiTemplate":{"passed":true,"evidence":"未回退到受禁模式：masthead 使用 4 行平贴 ruling 走线（rail-proof），而非三指标卡 Hero；artifact-catalog 为平贴实色账户网格（register），非通用 feature 卡墙；无浏览器/编辑器/终端壳（first-prompt 的 $ 块为平贴文字提示行，无窗框/标签/镀铬）；调色板为平面高对比（paper/cream/ink/teal/rust），无装饰性渐变/粒子/自发光背景。唯一'↘'为承载语义的接缝指示，非装饰。"},"noFakeUi":{"passed":true,"evidence":"全部链接指向真实的 https://github.com/taehojo/vibecoding，无 # 占位或死链；QA fakeControlCount=0, emptyLinkCount=0, brokenImageCount=0；无媒体区域亦无假产品图。proof-line/ledger/note 均为文本行而非伪装按钮，在线演示与打开课程等链接真实可用，无假控件。"}},"issues":[{"code":"mobile-stream-not-interleaved","severity":"warning","locale":"all","description":"brief.mobileTransformation 要求移动端'每行提示紧随其产出的 artifact'的成对交错叙事，当前实现将 4 条提示先行排列、4 个 artifact 随后排列，而非一一成对紧跟。已满足'无侧栏、自上而下'的核心要求，属表达方式偏离。","repairInstruction":"在移动端用 flex/grid 上下结构将每条 .instruc 与对应 .item 配对交错排列（脚本行后紧跟其 artifact），使纵向流呈现明显的行对→成品节奏；桌面端保持不变。"}]}},"changedFiles":["artifact/zh-CN.html","artifact/en.html"]}],"provenance":{"executor":"opencode","model":"deepseek/deepseek-v4-flash","opencodeVersion":"1.1.58","promptVersion":"dodot-showcase-deepseek-v4","inputHash":"22ed520d93e1143dd010b541245b863f2b130a07d5ddeb052bb728f159003a2a","artifactHash":"c33199cef92130f4d06f838e1e319e2119bd67b8f547df420338116b50ca0784","designSkill":"dodot-showcase-design"},"qaEvidence":{"zh-CN":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":1331,"cjkCount":714,"latinLetterCount":271,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4215,"h1Top":143.1875,"bottomInset":95.625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"9defbd305d2cb2262214a65e5d84d042aca88b920fe7b9bbecd79e7ab89af2ae","middle":"0f21b02402511ba937882053984626c41edefbba3148079e11d02a9e8ee46b9b","bottom":"b56791731b947be6a6be4a0cd11ee88c9e698e657eb2700efa567dc4124f9fb4"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"zh-CN","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":1331,"cjkCount":714,"latinLetterCount":271,"scrollWidth":390,"clientWidth":390,"scrollHeight":5229,"h1Top":135.1875,"bottomInset":96.46875,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"134830f717869cda2ecb0c5e41d4442140bf14d78a5ea517509a57202a5e1ae0","middle":"4defab69ff407d76a45a6d8c31f94e52f1838244dbf49af832eaa76394f8222c","bottom":"f33fc7dde51d4594013dec98ff051c96a96f4af2049ffaff16dc0b205ecfbf40"},"consoleErrors":[],"networkRequests":[]}],"en":[{"viewport":"desktop","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":3154,"cjkCount":0,"latinLetterCount":2444,"scrollWidth":1280,"clientWidth":1280,"scrollHeight":4344,"h1Top":143.1875,"bottomInset":96.265625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"a2b69084cdf77a454a0c5d72134dc6129f38594286ed3e247a1d2360b0feb9ae","middle":"a99d2ee3d183d25b793a679a04ccf8197ffc1edc3ca96ce5b42fd4a100c97f0d","bottom":"10b05266bae8a1e3074d7830a6ef50f9e06d6fc65ca77758e53ca8ffed3619b2"},"consoleErrors":[],"networkRequests":[]},{"viewport":"mobile","passed":true,"localePassed":true,"metrics":{"language":"en","h1Count":1,"h2Count":6,"sectionCount":6,"textLength":3154,"cjkCount":0,"latinLetterCount":2444,"scrollWidth":390,"clientWidth":390,"scrollHeight":5845,"h1Top":154.375,"bottomInset":96.0625,"brokenImageCount":0,"missingAltCount":0,"fakeControlCount":0,"emptyLinkCount":0},"screenshotHashes":{"top":"3ea4cb5d88169094248adb76ecdad5726a6f52573a5a58a8b10f82cac81d2906","middle":"686c4434eeacd13d55449ab6445a36607975fba7fd60669075875027c0f7dc65","bottom":"e22622314d0fbc4d216fec56e041aa0009b6cef5b0f4ea59bbf8118eea5a060e"},"consoleErrors":[],"networkRequests":[]}]}},"generatorVersion":"opencode-1.1.58:deepseek/deepseek-v4-flash:dodot-showcase-deepseek-v4","publishedAt":"2026-08-20T09:12:54.195Z"},"rawExtraction":{"projectRevisionId":"cmt2zh35a01oa6271jvqu485c","projectVersion":1,"sources":[{"canonicalKey":"github:taehojo/vibecoding","role":"primary","revisionVersion":1,"url":"https://github.com/taehojo/vibecoding"}],"facts":[{"key":"repository_owner","value":"taehojo","evidence":[{"path":"repository.owner","excerpt":"taehojo"}]},{"key":"repository_name","value":"vibecoding","evidence":[{"path":"repository.name","excerpt":"vibecoding"}]},{"key":"description","value":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지","evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]},{"key":"primary_language","value":"JavaScript","evidence":[{"path":"repository.language","excerpt":"JavaScript"}]},{"key":"source_count","value":"1","evidence":[{"path":"projectRevision.sources","excerpt":"github:taehojo/vibecoding"}]}],"taxonomy":{"category":"development_tools","subcategory":"data_ai_tools","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]},"lifecycle":{"stage":"active","confidence":0.75,"evidence":[{"path":"repository.pushedAt","excerpt":"2026-08-15T18:56:50.000Z"}]},"userIntents":[{"slug":"build_software","label":"构建或改进软件","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]},{"slug":"create_content","label":"创作内容或设计","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]},{"slug":"analyze_data","label":"分析与理解数据","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]},{"slug":"learn_explore","label":"学习与探索","confidence":0.65,"evidence":[{"path":"repository.description","excerpt":"혼자 공부하는 바이브코딩 with 클로드코드 공식 GitHub - 실습 코드부터 최신 업데이트까지"}]}],"readme":{"headings":["📖 어느 쇄를 보고 계신가요?","📢 소식","📖 목차","📦 실습 결과 폴더 안내"],"commands":[]},"changeSet":[{"field":"repository","beforeHash":"00a5052e6bdf97f211dab897f796627d2f10a11612507231a3e40214a53dcead","afterHash":"79b438da59a9509d45d57de2328f63c1c64614ebc0c2878d3c036ffda080a662"}]},"publishedAt":"2026-08-16T12:36:44.833Z","updatedAt":"2026-08-21T13:26:54.015Z","summary":{"id":"cmt2zh35c01oc6271swgtpjtj","projectType":"other","oneLine":"《独自学习 Vibe Coding with Claude Code》官方 GitHub 仓库","overview":"这是韩国书籍《혼자 공부하는 바이브코딩 with 클로드코드》的官方 GitHub 仓库，提供从基础到高级的 Vibe Coding 实践项目。包含手写数字识别、待办应用、问答游戏、AI 食谱推荐、AI 共情日记、PDF 摘要和购物清单等完整示例，每个项目都有在线演示。仓库还提供全部提示词、安装指南、勘误表以及配套的免费 YouTube 课程，适合希望系统学习用 Claude Code 进行 AI 辅助开发的初学者。","highlights":["8章完整实践项目","每个项目含在线演示","配套免费YouTube课程","完整提示词集合"],"bestFor":["想系统学习Vibe Coding的初学者","需要完整实践案例的开发者","希望用Claude Code快速构建应用的人"],"caveats":["部分项目依赖外部API（如AI模型）","部分演示可能需要科学上网","内容基于特定书籍版本，可能需对照勘误"],"categorySuggestion":"education","subcategorySuggestion":"tutorials_courses","lifecycleStages":["idea_requirements","frontend","backend_data","deployment_growth"],"audienceIntents":["learn","build","evaluate"],"confidence":0.85,"evidence":[{"claim":"这是《独自学习 Vibe Coding with Claude Code》一书的官方 GitHub 仓库，包含从实践代码到最新更新的内容。","sourceType":"description","locator":"https://github.com/taehojo/vibecoding"},{"claim":"仓库提供各章节的实践项目，包括手写数字识别、待办事项应用、常识问答游戏、冰箱食材识别应用、AI 共情日记、PDF 摘要 AI 和购物清单应用，并附有在线演示链接。","sourceType":"readme","locator":"https://github.com/taehojo/vibecoding"},{"claim":"仓库包含完整的提示词集合（PROMPTS.md）、勘误表、安装指南以及针对不同印刷版本的读者指南。","sourceType":"readme","locator":"https://github.com/taehojo/vibecoding"},{"claim":"仓库提供了与书籍配套的免费 YouTube 课程播放列表，以及补充材料如“用图工程构建 AI 客服”教程。","sourceType":"readme","locator":"https://github.com/taehojo/vibecoding"}],"publishedAt":"2026-08-17T13:46:20.569Z"},"github":{"url":"https://github.com/taehojo/vibecoding","ownerAvatarUrl":"https://avatars.githubusercontent.com/u/28382194?v=4","starsCount":174,"forksCount":102,"language":"JavaScript","syncedAt":"2026-08-17T13:42:33.407Z","license":null,"defaultBranch":"master","archived":false,"disabled":false,"lastChangedAt":"2026-08-15T18:56:50.000Z","missing":false},"tags":[],"updates":[]},"entryPoint":"discovery","claim":{"state":"unclaimed","verified":false},"initialView":"beautified","community":{"viewer":null,"state":{"likesCount":0,"creativeCount":0,"followersCount":0,"commentsCount":0,"liked":false,"creative":false,"followed":false},"comments":{"comments":[],"nextCursor":null}}}]}],"$L24"]