First, distinguish clearly: product retrospective, GitHub Skill, and online service
This note on Zara Zhang Zala's historical product portfolio is suitable for studying “how a specific need becomes a shareable small tool”: presentations, tab management, and information reading correspond to different tasks. It preserves the author's launch experience and feedback at the time and is not a current product ranking. Star counts, followers, likes, and prices at the time each have their own timestamps; old tables cannot be treated as today's statistics, and follower counts cannot be used to infer revenue or a reusable success rate. Supplementary fact-check date: 2026-10-25.
Read according to what you want to do
- If you want to turn aesthetics and a generation workflow into reusable instructions, start with the Frontend Slides case.
- If you want to turn your existing usage habits into a small tool, see Tab Out's needs and entry-point choices.
- If you want to organize ongoing information input, see follow-builders' product approach; for actual installation and use, also see the related article below.
- If you need to hand something to someone else for continued editing, see the boundary between editable deliverables and comment feedback.
Frontend Slides' current official entry point
This time, only the public description in the author's repository was checked in read-only mode; the entry point is the GitHub repository and README. It describes the core capability as generating HTML presentations or converting PowerPoint input into web presentations. The plugin installation entry point in Claude Code, standalone Skill usage, and invocation methods in other coding assistants differ; refer to the README for specifics. This review only read documentation and did not install the plugin, generate presentations, or test export.
Therefore, it should first be made clear whether the recipient wants a browser presentation, a PDF, or a native PPTX that can continue to be edited. Being able to take a PowerPoint file as input and convert it into a webpage does not automatically mean that a native PPTX can be fully exported; nor can the GitHub Skill's capabilities be combined into promises involving the AnyGen hosting functionality or Feishu whiteboard functionality from the old article. Old installation methods, tool pricing, and platform compatibility should be understood according to the materials at that time.
A verifiable product-retrospective method
This site recommends: choose only one need, clearly state how the user originally completed it, which step your tool reduces, and what is ultimately delivered. First use a one-page small piece of material containing Chinese text, images, and one table to check presentation, modification, sharing, or export, then record the obstacles recipients actually encountered. Record “the presentation looks good,” “the file can be opened,” “someone else can continue editing,” and “someone paid” separately; do not use one item to replace the other conclusions. This is a design exercise, with no newly added product-growth or commercialization test.
Continue reading:follow-builders installation and first use,Zara's content creation and public learning.
Timeline:2025-12 → 2026-05 (roughly half a year of intensive output) Core positioning: turn “small products made through vibe coding” into public GitHub skills or launched tools, so that those among 260,000 followers who need them can
clone / fork / pip installStar product: Frontend Slides (16k+ stars, No. 1 in the PPT field) + Excalicord (the first end-to-end independently launched product, whiteboard screen recording)
Full product landscape (in launch order)
| # | Product / Skill | Launch time | Type | Form | Data |
|---|---|---|---|---|---|
| 1 | Frontend Slides | 2026-02 | Claude Skill | GitHub | 16k+ star, No. 1 in the PPT field |
| 2 | AI learning-resource website | 2025-Q4 | Website (Faces) | Deployed at faces.site | 5753 likes |
| 3 | Excalicord(whiteboard screen recording) | 2026-04 | Independent product | Web client + own domain name | The first product shipped end to end |
| 4 | Tab Out(browser extension) | 2026-04 | Browser extension | Chrome Web Store + open source | “Closing tabs becomes addictive” |
| 5 | follow-builders skill | 2026-05 | Claude Skill + data feed | GitHub | "Centrally fetch locally Remix" |
| 6 | Feishu CLI agent skill | 2026-05 | Claude Skill | GitHub | Meeting todos become done |
| 7 | Long-video-to-short-video skill | 2026-04 | Claude Skill | GitHub | Automatically extract highlight clips |
| 8 | Language-learning app(paper books come alive) | 2026-04 | iOS prototype | Personal use | “A product made for myself” |
| 9 | OpenAI Realtime + Feishu CLI | 2026-05 | Browser extension demo | Demo | Rapid-fire document writing |
| 10 | Whiteboard video recording tool(Excalicord prototype) | 2026-03 | Tool | Personal use | Later became the launched version of Excalicord |
1. Frontend Slides (the signature of the product portfolio)
1.1 Product = one viewpoint
Core argument: “PPT should not be PowerPoint; it should be HTML with front-end design capability”
Frontend Slides is a Claude Skill that lets users generate interactive HTML presentations in natural language.
When it is used: Zara now uses it on all occasions (Bay Area vibe coding jam event with 70+ people / 12-minute sharing / 20-minute talk)all use Frontend Slides to replace traditional PPT.
Key selling points:
| Dimension | Traditional PPT | Frontend Slides |
|---|---|---|
| Design sensibility | Template-based | Strong(using front-end design capability = real web design) |
| Interactive | ❌ | ✅(embedded videos / forms / animations) |
| Generation time | Half a day–1 day | 3 minutes(natural language → generated by Claude) |
| Editing PPT | Changing styles is troublesome | Tell Claude one sentence and it is changed |
Data results:GitHub 16k+ star(figures as of 2026-05), “the hottest skill in the PPT field.”
1.2 How the data surged (from 6k to 16k+)
Zara later posted a retrospective titled “What I learned after making a 10,000-star skill” (Post 030, text version). Core observations:
| Promotion method | Effect |
|---|---|
| Continuously posting demonstration works on Xiaohongshu (using HTML PPT presentations for every meeting) | High |
| Tutorial post “How to make good-looking HTML slides (0 code)” | Medium |
| Emphasizing Zara's Harvard / Feishu / VC background | Medium (trust anchor) |
Contrarian view: Zara does not do heavy selling in the README;let users use it = see the works.
1.3 Product strategy principles
| Principle | How it appears in Frontend Slides |
|---|---|
| Opinionated product | “PPT must be interactive” is a viewpoint, and people who accept that viewpoint come to use it |
| Standing on the shoulders of giants | Based on the ready-made web design ecosystem, not reinventing it |
| Build to learn | Zara learns front-end development while building |
Details Zara Zhang Zala / Vibe Coding principle system §3 / §6.
2. follow-builders (a skill driven by self-expression)
See Zara Zhang Zala / follow-builders skill and the methodology for carefully selecting AI information sources(a wiki already exists, so this section does not repeat it).Most core mechanism:
┌─────────────────────────────────────────────────────┐
│ Centrally Fetch (Zara crawls centrally) │
│ · Zara manually selects X + podcasts from 25 AI builders │
│ · Crawls them using X API / YouTube transcript API │
│ · Users cannot change the information sources │
└─────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────┐
│ Locally Remix (user customization) │
│ · Change to Chinese / English / bilingual Chinese-English │
│ · Change to Feishu docs / terminal briefing / Slack messages │
│ · Change summary granularity (deep / shallow) │
│ · Change to only tweets or only podcasts │
└─────────────────────────────────────────────────────┘
Core mechanism 1: viewpoint ≠ tool
There are dozens of “AI news scraping skills” on the market,Users choose follow-builders because they accepted the idea "Follow builders, not influencers" — accepting the unchangeable fact that the author personally selected 25 people.
Core mechanism 2: Centrally fetch solves the token-waste problem of "every agent crawling once"
Zara alone crawls 25 X accounts + 25 podcasts = one central feed → the user's agent directly consumes this feed instead of crawling repeatedly.
3. Tab Out (a signature case of a technology-driven idea)
3.1 How this idea came about (a typical path starting from technology)
It was not "I have pain point X (too many tabs)" → then build a product.But the reverse:
1. Zara saw on X: someone made a small tool using Chrome browsing history
2. Realized: "My Chrome browsing history is stored locally"
3. Asked Claude Code: "What can be made based on this?"
4. Claude Code suggested: "You have so many tabs open that you don't close them; can I help you close tabs?"
5. Claude Code also suggested: put the entry point on the New Tab page (Zara did not know the new tab page could be customized)
6. Tab Out was born
This is a signature case of the "find ideas starting from technology" approach that Zara publicly advocates. Details Zara Zhang Zala / Vibe Coding Mental Model System §4.
3.2 Key decisions in product design
| Decision point | Zara's choice | Why |
|---|---|---|
| Entry point | New Tab page replacement | Forced surface — seen every time a new tab is opened. Claude suggested it; Zara would not have thought of it herself |
| Tab-closing feedback | Sound effect + confetti animation | Addictive gamification (user feedback: "very satisfying") |
| Duplicate detection | "Close all duplicates" in one click | High-frequency pain point |
| Form | Open source + encourage forks | Does not want everyone to use Zara's version, but to remix it (Dark Mode / custom start page) |
3.3 Counter-consensus practice: Fork is better than PR
"I don't want everyone to use my product directly; I want you to remix my product. Everyone can modify a version of their own."
Submitting a PR (modifying Zara's repo) < Forking your own version → everyone has their own Tab Out. Details Zara Zhang Zala / Vibe Coding Mental Model System §3.3.
4. Excalicord (the first product shipped end-to-end independently)
"This was my first time, without a programmer, trying to launch a product only by myself together with Claude Code." — April 2026 launch retrospective (Post 047)
4.1 What the product is
Excalicord = whiteboard screen-recording tool, based on the open-source Excalidraw whiteboard + screen recording added + transparent teleprompter added. Zara uses it to record all her "whiteboard videos" on Xiaohongshu.
4.2 Key decision: stand on the shoulders of giants
Zara did not build a whiteboard from scratch,directly based on open-source Excalidraw, only adding the recording feature → greatly reduced difficulty.
"You are assembling Lego, not reinventing the wheel from scratch."
This is one of her 2 starting recommendations for beginners.
4.3 Key insight: Coding ≠ Shipping (the core lesson for independent developers)
Vercel CEO's viewpoint + Zara's empirical evidence:Shipping is another skill
| Coding (writing code) | Shipping (end-to-end launch) |
|---|---|
| AI can help you do it very well | It still requires you |
| 30% of the time | 70% of the time |
| Claude can write it with a prompt | System integration / testing / marketing / user support |
The 8 systems used by Excalicord (non-code parts):
- Claude Code(AI programming)
- Supabase(database)
- Vercel(deployment)
- Resend API(email)
- Namecheap(domain name)
- Posthog(data analytics)
- Google Sign in(account system)
- Stripe(payments)
zara: "A lot of time is spent connecting all these things."
4.4 Making for yourself vs. making for users (an order-of-magnitude difference)
| Making for yourself | Making for users |
|---|---|
| One AI programming tool + running locally is enough | Requires all the above 8 systems to be fully connected |
| Your browser + one computer model is OK | All kinds of bizarre browsers / devices / performance issues |
| You testing once is enough | A pile of edge cases is discovered only after shipping |
Zara's reminder: a web product works in Chrome,but switching to Edge may make it stop working.
4.5 Debugging lesson: when a bug cannot be solved, have AI search online
"8 out of 10 times, after Claude Code searches online, it solves it directly."
Zara's experience: for a bug that cannot be solved after several rounds with Claude Code,tell it to "search online for how others solved it". Claude Code has built-in deep research + Web Search capabilities, and this capability is not generally used well.
4.6 Design lesson: have Claude make several versions for you to choose from
"When using Claude Code, you must invoke its Frontend design skill, and have it make several versions."
Zara's approach: have Claude make a playground containing various different versions, and Zara chooses as if picking design drafts.
4.7 Iteration speed on the first day after launch (the thrill of independent development)
One day after Excalicord launched, Zara shipped 4 new features:
- Transparent teleprompter(can be overlaid on the screen)
- Persistence(after closing and reopening the browser, the drawn content is still there)
- Multi-browser compatibility(Safari / Edge / Firefox video download stability)
- New discovery: Excalidraw's built-in web embed (directly embed X posts / YouTube videos)
"One very satisfying thing about independent development is that you can iterate however you want... the teleprompter transparency thing might just be me chatting with Claude for two or three rounds, and it gets done; it's a matter of a few minutes."
5. Two starting recommendations for beginners (Zara's retrospective summary)
Source: Post 047 (Excalicord launch retrospective)
5.1 First make products for yourself, then make products for users
| Stage | Difficulty | What you learn |
|---|---|---|
| For yourself (local tool) | Low | Validate the vibe coding psychological comfort zone |
| For a small circle (friends use it) | Medium | Learn deploy + simple distribution |
| For users (end-to-end ship) | High (a completely different league) | Learn the 8 systems of Shipping + all kinds of bizarre user environments |
5.2 Stand on the shoulders of giants (assemble Lego, don't reinvent the wheel)
| ❌ Counterexample | ✅ Positive example (Excalicord) |
|---|---|
| Build a whiteboard + screen recording from scratch | Based on open-source Excalidraw + only add screen recording |
| Self-developed SSO | Integrate Google Sign in |
| Build payments in-house | Integrate Stripe |
| Build email sending in-house | Integrate Resend API |
"Pay attention to what open-source software / libraries / APIs exist on the market, and add your own small features on top of them."
6. Patterns in the product portfolio over one year
Cross-cutting mental models across 10+ products:
| Mental model | Which products embody it |
|---|---|
| Find ideas starting from technology | Tab Out (browser history) / OpenAI Realtime + Feishu CLI / long-video-to-shorts (automatic editing with AI) |
| Opinionated | follow-builders (25 selected people, unchangeable) / Frontend Slides ("PPT must be interactive") |
| Skill form > SaaS form | Most products are first made as Claude Skills (open source on GitHub + users fork) rather than web apps |
| Stand on the shoulders of giants | Excalicord is based on Excalidraw / AI learning website is based on Faces / Feishu CLI skill is based on lark-cli |
| Build in public | Publish a video retrospective one day after launch (047 / 049) + reflection post (030) |
| Followers are the distribution engine | Does not rely on PH / HN; directly distributes through 260,000 Xiaohongshu followers + 50,000 Twitter followers |
7. The reverse: what Zara does not do
| Does not do | Why |
|---|---|
| Large-scale SaaS | High team + capital requirements, inconsistent with the individual rhythm of vibe coding |
| Generic tools (generic chatbot/IDE) | No viewpoint → easily replaced by Claude |
| Databases / backend tools | Not good at it + no motivation |
| B2B sales | Not good at it + no motivation |
| Bet everything on one model | Models switch frequently → tools/skills should be model-agnostic |
8. Comparison with other independent developers
| Dimension | zara | newtype Lao Huang | Wang Kai | dontbesilent |
|---|---|---|---|---|
| Main shipping form | Skill + website | Skill + Cloudflare Workers | Feishu bot / CLI / overseas SaaS | Skill + content |
| Promotion engine | 260,000 followers on Xiaohongshu | YouTube + Substack | Knowledge Planet | Xiaohongshu + Twitter |
| Style | Liberal arts background + opinionated | Engineering + extreme SOP | Multi-agent matrix | AI self-media |
| Signature products | Frontend Slides | Super Analyst Pro / newtype OS | tokrepo / FastFacts | Multi-skill suite |
Details Vibe Coding and Independent Development (cross-author thematic synthesis) Cross-author thematic summary.
Related wiki
- zara Zhang Zala / Vibe Coding Mental Model System — zara vibe coding mental model system (the "Why" layer of this document)
- zara Zhang Zala / follow-builders skill and methodology for carefully selecting AI information sources — follow-builders skill single-point deep dive
- Vibe Coding and Independent Development (cross-author thematic synthesis) — cross-author vibe coding (zara occupies one section)
- Claude Skill Engineering (cross-author thematic synthesis) — Claude Skill engineering (zara is the core perspective)
- newtype · Vibe Coding Independent Product in Practice — newtype Lao Huang independent product comparison
History
- 2026-05-22 — Created based on a complete review of 10+ product launch / retrospective posts. Core thesis: Coding ≠ Shipping; stand on the shoulders of giants; skill > saas
May–June 2026 supplement: office entry points and editable deliverables
This section is compiled from written explanations and signed replies published by the author; the videos have not yet been transcribed, the accompanying images have not been visually reviewed, and summaries generated by the “Ask” feature in the comments section cannot be treated as the videos’ original words. The following reflects the product experience and ideas at that time, and does not represent a guarantee of current-version functionality.
The value of the Feishu bridge is work context. On May 22, the author described using an open-source bridge to connect Claude Code to Feishu, enabling conversations on mobile as well; in a May 23 reply, the author clarified that mobile remote control was only one aspect, with greater emphasis on connecting with Feishu’s work context and interactions. On May 27, the author added a session-organization method of “the same bot, different groups,” and on June 11 explained that the same project already supported Codex. For PMs, the applicability criterion is whether task materials and discussions have already accumulated in Feishu, rather than whether installing one more chat entry point will improve efficiency. Some people in the comments reported anomalies with tool calls, CLI downloads, and context, so a successful connection cannot replace acceptance testing of actual read/write tasks; this supplement does not elevate solutions from the comments into an installation tutorial.
The significance of SVG (Scalable Vector Graphics) lies in post-delivery modification. On June 2–3, the author introduced the Feishu whiteboard skill, emphasizing that elements can be dragged, collaboratively edited, and commented on individually; it can be used for codebase/architecture explanations, meeting or paper summaries, data graphics, and long social images, and the author also proposed a way to mix graphics and speaking scripts in the same document. Why: if colleagues need to continue revising the structure or point out problems with a specific element, an editable whiteboard is easier to hand over than a final screenshot; when only one presentation is needed, there is no need to force replacement of existing presentation tools. The author explicitly distinguishes: the Feishu CLI provides the ability to invoke the whiteboard, while the skill mainly supplements aesthetic standards. A beautiful whiteboard does not itself verify the correctness of data and argumentation, and the effects in the attached images were not reproduced in this instance.
Desktop interaction and continuous running should be accepted separately. On May 29, the author regarded the Codex Mac app as an office assistant for non-programmers; in replies, the author valued multi-session management and noted on June 1 that many features were not available on Windows at that time. The June 11 explanation mentioned caffeinate and Amphetamine as clues for keeping the device running, without providing device/power-supply conditions verifiable in this instance. It cannot be inferred from a short title that “any Mac will definitely keep running with the lid closed,” nor can one device’s experience be treated as a cross-platform guarantee.
April–June 2026 supplement: lower tool barriers, but also accept-test the final deliverable
On April 16, the author explained that Frontend Slides had launched as an AnyGen feature, positioned as editable, self-deployment-free, and shareable; on May 9, the author explained turning personal aesthetics into more than 30 reusable templates; the May 14 text stated that it was editable and shareable, supported embedded images, and could export PDF/PPT. These were release notes at that time, and the export steps were not reproduced based on them. Comments include feedback about access failures, small font sizes, demands for PPTX delivery, and paid downloads; “the HTML looks good” cannot replace acceptance of the final file, and current pricing cannot be inferred from prices quoted in comments.
Use for PMs: when making interactive demos and web sharing, it can reduce deployment barriers; if recipients must continue editing native PPTX, first use one page of Chinese text, multiple lines of text, and charts to check format fidelity. The latter sentence is an acceptance recommendation summarized by the editor from feedback. On June 2, the author added that the visual rules are design.md, not merely fixed templates; on June 3, the author explained that Feishu whiteboards can edit text, drag elements, and download images. They support the design direction of “rules plus editable objects,” but do not guarantee that arbitrary SVG imports, private deployment, or other whiteboards have the same capabilities.
On April 15, Tab Out’s explicit function was to turn the Chrome new tab page into an entry point for displaying and closing already-open tabs; the April 24 video explanation introduced the creation process, but the existing text does not contain the complete process. User feedback said their new tab page was already occupied by another plugin, so it was changed to a sidebar—this is a third-party adaptation example, reminding us that entry-point selection should fit users’ existing habits, not an author-published sidebar feature.
On May 12, the author described connecting a real-time voice interface with the Feishu CLI into a browser plugin, using dictation to write documents and review meetings. The value lies in connecting expression directly to work materials; some commenters also preferred organizing thoughts while typing. The short description lacks a complete solution for permissions, error correction, and write-back confirmation, so it cannot be used as a basis for recommending writing formal documents without confirmation. The per-minute cost in the comments was not verified and is not used as a cost baseline.
On June 1, the body text of “Making a skill from 0 to 1” contained only one title-style sentence. Commenters proposed making a concrete demo first and then distilling reusable instructions, while others suggested discussing the plan first; neither can be passed off as Zara’s video steps. This item is retained pending transcription.
This batch reviewed the author’s body text and real-person comments captured by scraping; the bot “Ask” summaries were not accepted as transcriptions, images were not visually reviewed, and videos were not transcribed. Real-person feedback on the lid-closed-running post also noted that the network would disconnect and that anti-sleep effects across systems were disputed; therefore, preventing sleep does not mean a task can run reliably and continuously.
Sources and related materials
- https://www.xiaohongshu.com/explore/6a05780c0000000006020d23
- https://www.xiaohongshu.com/explore/6a02a261000000000702ccfa
- https://www.xiaohongshu.com/explore/69fe6f3a000000001a036be4
- https://www.xiaohongshu.com/explore/69eac78d000000002202b86e
- https://www.xiaohongshu.com/explore/6a1ceb8a00000000080306aa
- https://www.xiaohongshu.com/explore/69e04b91000000001a02e03f
- https://www.xiaohongshu.com/explore/69ded448000000001a02f276
- https://www.xiaohongshu.com/explore/6a1018060000000007027155
- https://www.xiaohongshu.com/explore/6a18d4e700000000070136ab
- https://www.xiaohongshu.com/explore/6a1e30000000000007020149
- https://www.xiaohongshu.com/explore/6a2a0bd1000000002102339d
- https://www.xiaohongshu.com/explore/6a1f5d2800000000200397aa
- zara Zhang Zala / Vibe Coding Mental Model System
- zara Zhang Zala / follow-builders skill and methodology for carefully selecting AI information sources
- Vibe Coding and Independent Development (cross-author thematic synthesis)
- Claude Skill Engineering (cross-author thematic synthesis)