KNOWLEDGE NOTES

Knowledge Notes

Explore curated knowledge, course notes and methods, with their existing content and sources preserved.

This index lists complete English editions. Additional Chinese notes and bilingual updates remain available in the Chinese index.

350knowledge notes
Indie Building / Cross-source synthesis

2026 Mainland China GFW Circumvention Anti-Blocking · Airport Selection · Self-Build · Automatic Failover

Complete selection reference for anti-blocking egress in H1 2026 — protocol comparison (Reality is most anti-blocking / protocol does not matter for dedicated line scenarios) + buying off-the-shelf airports (line type IPLC > relay > direct connection / objective judgment signals / limbopro runaway blacklist / candidate list) + self-built VPS (line IPLC > CN2 GIA > GT > direct connection / reality-ezpz) + mihomo url-test automatic failover + list of marketing numbers rejected by adversarial verification. Highly time-sensitive; airport names expire on a weekly basis, methodology remains valid long-term

Web toolsProxy ConfigurationAutomated operations and maintenanceEnglish edition
Indie Building / AI Products and Assisted Design

AI-Driven Product Design / Vibe Coding Workflow (One-Sentence Requirement → Interrogation → PRD → DRD + Coding Prompt → Figma Make Demo → Launch → Visual Iteration)

Will’s complete pipeline for non-technical PMs to go from “idea to runnable prototype”, breaking vibe coding into 7 copyable steps: ① Use 3 tiers of templates to turn a one-sentence product idea into structured input; ② Have AI act as a “requirements interrogator” to ask follow-up questions in sequence and force out a Grill Summary; ③ Use a “top-tier product architect” role prompt to expand the 5 answers into an investment-grade PRD; ④ Extract feature points from the PRD to generate 3 non-overlapping interaction DRD options, then convert the chosen option into a coding prompt that can directly produce a product; ⑤ Feed it to Figma Make (to produce an interactive demo) or Claude (to produce a real launch-ready product) to generate a prototype; ⑥ Feed screenshots back in to let AI spot errors and iterate on its own; ⑦ Publish to mobile (Claude outputs HTML → Netlify Drop drag-and-drop hosting → add to home screen as an App) + one-click reskinning with ReferoStyle. Each step provides reusable prompt skeletons + Why + examples + pitfalls. Three parallel methods (Method 1 Document-driven mainline / Method 2 Document-driven HTML output / Method 3 GPT+Figma natural language UI building). The audience is non-technical product managers who care about “when to use which step, how to copy the prompts” rather than code. Division of labor with [[newtype-ai-coding]]: that article covers tool stack selection and mindset (how to choose Cursor/Claude Code/Codex), while this article covers the concrete action chain and prompt templates for non-technical PMs to run through a prototype from scratch.

Vibe CodingProduct PrototypingAI ProgrammingEnglish edition
Indie Building / Cross-source synthesis

Claude Code Workflows (Cross-Author Thematic Synthesis)

A synthesized rewrite of Claude Code workflows from the perspectives of 7 authors: Cal Rueb (Anthropic internal engineer)/ Wang Kai (independent developer with a multi-device matrix)/ Huang Yihe (main battleground of tool stack evolution)/ Cat Wu (Anthropic PM Head for Claude Code)/ Lao D (non-programmer zero-code user)/ Xiaohongshu vibecoding (skill-based creative applications)/ **zara zhangzala (liberal arts background + Co-founder mental model + Feishu CLI + OpenAI Realtime + Cut features before shipping)**. Covers core positioning, Agentic Search vs RAG, multi-layer CLAUDE.md configuration, Permission/Hooks, three Think Hard levels, Sub-Agent philosophy, Skill system, explicit divergences, and implementation choices.

AI Programming WorkflowsDevelopment toolsAgent CollaborationEnglish edition
Indie Building / AI Products and Assisted Design

Codex + Figma Toolchain (Steps and Skills for Installing Figma Skill/MCP · Generating Chart Component Library Slides · Converting Prototypes to Figma · Automatic SVG Icon Replacement)

A complete operation manual compiled by Will (will-ai-note) on "using the Codex Agent to write real designs directly to the Figma canvas via Figma MCP". It covers three parts: ① Environment setup — installing the Figma remote/desktop MCP server for Codex (to grant Codex permission to operate Figma) + installing/managing the official Figma Skill; ② Uses and prompts for seven core skills — figma-use (directly modify the canvas: create Frames/components/variables/Auto Layout), figma-use-slides (generate PPT inner pages), figma-generate-diagram (text → editable flowcharts/sequence diagrams/ER diagrams), figma-generate-design (code/HTML → Figma UI), figma-generate-library (codebase → design system Library), prototype-to-figma (running prototype → frame-by-frame Figma state drafts), Community skills; ③ Combined workflows — two-way sync between code prototypes and Figma, direct interface output from base screenshots, interaction framework → new interface, scanning local SVG icons for automatic semantic matching and replacement. Each section provides the Why/when to use/reusable prompts/pitfalls (e.g., figma-use requires a paid Full/Dev seat, Dev seats can only write in drafts, prototype-to-figma has spacing bugs but can split pages frame by frame). Division of labor with [[newtype-ai-coding]]: that article covers AI Coding tool stack selection and core mindsets, while this article focuses on the concrete implementation down to skills and prompts for the "design/prototype engineering" segment.

FigmaPrototype designAI ToolsEnglish edition
Indie Building / Cross-source synthesis

Evolution of the AI Coding Tool Stack (Cross-Author Thematic Synthesis)

Synthesis of 4 schools of perspective on the AI Coding tool stack (2024-08 → 2026-05). Huang Yihe (Cursor shock → v0+Claude+Cursor three-piece suite → Cline self-built MCP → Gemini 2.5 → Claude Code → OpenCode camp) / Wang Kai (product manager path: Cursor $50,000 → Claude Code terminal → disruptive data analysis → hundredfold token consumption) / Xiaohongshu vibecoding (three core mindsets + 0-80 vs 80-100 life-or-death line + Astro Kid 400 million financing) / Lao D (using OpenRouter to connect Claude Code in China without scientific internet access). Covers 4 code retrieval methods / three tiers of Ultra think / Plan Mode / tool stack division of labor philosophy / Vibe Coding cleansing prophecy

AI ProgrammingDevelopment toolsVibe CodingEnglish edition
Indie Building / Newtype

newtype · AI Coding Practice and Tool Stack Evolution

Huang Yihe 2024-09 → 2026-05 AI Coding tool stack practice. Cursor-dominant phase → v0+Claude+Cursor three-piece suite → Cline self-built MCP → Gemini 2.5 large-context codebase scanning → Claude Code main battlefield → Codex/GitHub Copilot/OpenCode + newtype-os multi-Agent orchestration. Vibe Coding experience, AI Coding division of labor philosophy, Cursor internal modes, Ultra think, Plan Mode, Claude Code Sub-agents

AI ProgrammingDevelopment toolsVibe CodingEnglish edition
Indie Building / Newtype

newtype · Vibe Coding Independent Product Playbook

Huang Yihe's non-technical indie development roadmap from 2024-09 to 2026. Blog → Prompt House → LearnFromYouTube → Super Analyst Skill → newtype Profile/CLI/OS. Tool stack (Next.js + Supabase + Stripe + Cursor + Electron) / Business model (global merchant + tax filing) / Network setup (VPS+VLESS+Reality+SOCKS5) / Go Fundamental design philosophy / AI Coding division of labor

Vibe CodingProduct BuildingIndependent developmentEnglish edition
Indie Building / Newtype

newtype Tool Stack: Oh My OpenCode Customization + newtype CLI Multi-Agent Team

Complete documentation for two core CLI tools built by newtype. The Oh My OpenCode customization guide (1,729 lines) covers two approaches (configuration files versus forking the repository), Chinese-localized names for 10 agents (for example, Sisyphus → Xixifusi and oracle → Shenyuzhe), automated Perl replacement scripts, GitHub Release versus npm deployment, the SUL-1.0 license, and an eight-step walkthrough. The newtype CLI multi-agent content team covers the nt binary, eight specialist AI agents (researcher/writer/editor/fact-checker/extractor/analyst/archivist/chief), eight core commands (research/write/edit/fact-check/analyze/extract/archive/pipeline), JSON envelopes and NDJSON streams, four exit codes, and 12 analysis frameworks. This is the OpenCode-side tool stack complementing [[newtype-claude-code-best-practices]].

Development toolsCLI ToolsMulti-AgentEnglish edition
Indie Building / Cross-source synthesis

Vibe Coding and Independent Development (Cross-Author Thematic Synthesis)

Integration of Vibe Coding and independent development from 5 perspectives. Karpathy (Software 3.0 + definition of Vibe Coding + Iron Man Suit + Agentic Decade) / newtype Lao Huang (6+ practical non-technical independent products + 3 core mindsets on Unit Economics + Vibe Coding cleansing prophecy) / Xiaohongshu vibecoding (three core mindsets + 0-80 vs 80-100 make-or-break line + Ci Le Ge Ci interview + Astro Kid's 400 million financing) / Wang Kai (product manager transition + AI Coding changing collaboration workflows + disruptive nature of data analysis) / **zara Zhang Zala (liberal arts background + Build small + Opinionated products + Build first learn later + Coding ≠ Shipping 70/30 + 4 core mindsets for working with models + Frontend Slides 16k+ stars)**. Covers definition of Vibe Coding, cleansing prophecy, 0-80 vs 80-100 make-or-break line, platformization of Vibe Gaming, and cross-over for liberal arts graduates.

Vibe CodingIndependent developmentAI ProgrammingEnglish edition
Indie Building / Wang Kai

Wang Kai's AI Coding Practice: From Cursor to Claude Code Terminal Workflow

The evolution path of AI Coding recorded across 385 posts: from a product manager who does not write code → using Cursor with a monthly cost of 50,000 USD → switching to the Claude Code terminal workflow → restructuring the basic collaboration process in the AI era. It emphasizes that "AI Coding is a foundational capability, not something for writing code."

AI ProgrammingClaude CodeDevelopment workflowsEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / AI Tools + Skill Tutorial Collection

A collection of 18 hands-on AI tool/Skill tutorials from a Xiaohongshu vibecoding creator. Covers: ① Claude Code Pixel Sprite Agent (virtual office visualized agent) ② Codex + Remotion for making follower surge animations ③ Vibe Marketing Skill for batch video production (FFmpeg concatenation, Skill calling local services) ④ Automated intelligence system (self-evolving scoring Auto-Belief referencing Kafka) ⑤ Getting IELTS 7.5 without paid classes using Claude Code Skill (IELTS Diagnose/Speaking/Writing/Reading Skill suite + Gemini Live + Notebook LM) ⑥ Obsidian skill for diagramming (Skill from Obsidian founder, draws H16Z long-form article logic diagrams in 10 seconds) ⑦ Advanced HTML PPT (3 techniques) ⑧ Google POMLY AI marketing tool ⑨ Reproducing LM with Karpathy's 243-line nanochat ⑩ Gemini+Antigravity dual-platform game

Vibe CodingAI ToolsAutomationEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / AI Webpages + 3D Interaction + Pretext Design Collection

A collection of 23 AI webpage / 3D modeling / real-time typography works by Xiaohongshu vibecoding creators. Covers: ① Pretext, the viral open-source frontend typography library (by Cheng Lou, React animation author, 21 million views) ② SOP for cinematic AI-built webpages (Nano Banana + Higgsfield + Seedance + Google AI Studio + Landingbook) ③ Making premium-feeling Vibecoding pages (Page Flows + Godly godly.website + Mobbin) ④ Bringing pages to life (Unicorn Studio + React Bits reactbits.dev + Design Spells) ⑤ AI 3D modeling (Hitem3D 2.1 hi3d.AI / turn one image into a PBR 3D figurine in seconds) ⑥ Google Genie 3 world generation model ⑦ AI real-time generation of endless webpages (shared by Karpathy) ⑧ 5 ways to play with Gemini 3 3D particle animations + starry-sky particle gesture recognition ⑨ GPT Image 2 360° panoramic images ⑩ Minimax 2.7 Plus, a Vibecoding model accessible in mainland China

Vibe CodingWeb developmentInteraction DesignEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / Data + History + Culture Visualization Project Collection

24 data visualization works by a Xiaohongshu vibecoding creator. **An independent developer's project matrix**: World Animation Map + World Mythology Map + Bringing British Museum Artifacts Home + 360° Panoramic Time-Travel History Game + Star Map of Ten Thousand Films + Beginner-Friendly K-Line Chart (Event-Driven AI Analysis) + Movies Take Me Traveling + Traveling with Poetry / Books / Movies / Music / Sci-Fi (portfolio of the creator of the MIT Road series). **Turning world knowledge into a knowledge graph with vibecoding**

Data VisualizationInteraction ProjectsKnowledge productsEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / Music × Mathematics Collection (Euclidean Rhythm + Whitney Music Box)

A collection of 7 cross-disciplinary music and mathematics works by a Xiaohongshu vibecoding creator. **When Music Meets Mathematics series**: ① Euclidean rhythm (Godfried Toussaint 2004 paper / even distribution on 16-step sequencer / NI Circular plugin / Tidal Cycles + Strudle live coding) ② Whitney Music Box (48 semitones / 4 octaves / 72 divisions of microtonal tones / 21 modes / Prime Numbers Only) ③ Making music while typing (K kick / R rimshot / W woodblock / T tom / CDEFGAB) ④ Music version of Cursor (Strato live coding / Codex) ⑤ Creation with different rhythmic ratios ⑥ Exploration beyond twelve-tone equal temperament ⑦ SuperCollider open-source synthesizer

Creative codingMusic ToolsGenerative artEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / Vibecoding Aesthetics + Creator Economy Collection

A collection of 10 aesthetic methodology and creator economy works from Xiaohongshu vibecoding creators. **Core thesis**: "The model is not the most important thing; aesthetics is." It covers ① Tuning vibecoding aesthetic value worth 100,000 (Xiaozhuang / Kimi 2.6 / 1:1 replication + three front-end terms Hero/Shader/Three.js + high-quality templates) ② Stanford University open course "Aesthetics is the Primary Productivity" (D3 tools + color extraction website + animation usage considerations) ③ Karpathy zero-basic interpretation (with supporting prompts) ④ The viral rise of Pretext = the future of universal creation (mother of two + building an app in 10 minutes) ⑤ Interview with the creator of Cilegeci (10,000 users as an independent developer, the 80→100 score life-or-death line) ⑥ buildinpublic music version of Cursor (Strato live coding)

Vibe CodingProduct AestheticsCreator economyEnglish edition
Indie Building / Xiaohongshu Vibe Coding

Xiaohongshu / Vibecoding Practical Collection (Games/Tools/Mini Programs)

A collection of 40 practical vibecoding works by Xiaohongshu creators. The most intuitive vibecoding reference for non-technical developers beyond Truman: desktop pets / N-day game development diaries / 30-day ARPG challenge / Cozy Cat Fit / Stranger Things / a full game made with Codex in one afternoon / ASCII style converter / 10,000-user interviews for Ci Le Ge Ci / music version of Cursor / terminal Tetris for waiting-mode thinking / gesture-controlled Snake / couple date projects / **Astro Kid's 400 million yuan financing = platformized realization of Vibe Gaming**. Covers the tool stack (Google AI Studio / Codex / Cursor / Gemini 2.5 / Lingguang / Figma) + three core mindsets (state requirements clearly / progress step by step / be a picky client) + the life-or-death line between 0-80 and 80-100 points + business route selection + user retention data + platform-side business models

Vibe CodingGame DevelopmentProduct PracticeEnglish edition