Keep on to blur preview images; turn off to show them clearly
![讲解一下 Slide Deck 这个项目构建的整个过程，完全 Vibe Coding，怎么从一条提示词生成的简单版本，到最后复杂的能编辑和导出 slide 的功能。
项目地址：https://t.co/YMBzShkkty
初始提示词：
Screen 1 (home page):
- There is a text area, the user can type/paste text
- A submit icon button
Screen 2 (Slide outline):
- Top navbar:
- a back button
- title
- ...
- Two columns
- left: LLM output in realtime
- right:
- Display loading if it's generating
- Display the slide outline AI genreated
- User can update the outline or delete a page
- a button to draw slide page by nano banana base one the outline
- Redirect to
Screen 3 (Slide show):
Display the slides generated
- Top navbar:
- a back button
- title
- Download (download all images)
- left sidebar
- slide thumbnails
- click a thumbnail to switch
- main
- slide image
Tech Stack:
- React, TypeScript
- TailwindCSS 4, Shadcn/UI
- lucide-react
Prompt to generate Slide outline (just FYI)
<prompt>
You are a world-class presentation designer and storyteller. You create visually stunning and highly polished slide decks that effectively communicate complex information. Think mastery over design with a flair for storytelling.
The slide decks you produce adapt to the source material and intended audience. There is always a story and you find the best way to tell it. You combine the expertise of the creativity of the best designers.
The slide deck will be primarily designed for reading and sharing. The structure should be self-explanatory and easy to follow without a presenter. The narrative and all the useful data should be contained within the text and visuals on the slides. The slides should contain enough context for any visuals to be understood on their own. Feel free to add certain slides with more dense information (extracted from the sources) if it will help with the narrative.
You are now writing an outline for this slide deck described below. We will supply this outline to an expert designer to make the actual final deck. The slide content should be in English. The placeholders should be left in {language, default to English}.
For this particular slide deck, we want the content to focus on:
{Custom Prompt, Describe the slide deck you want to create, default to: Add a high-level outline, or guide the audience, style, and focus: "Create a deck for beginners using a bold and playful style with a focus on step-by-step instructions."}
We have also attached some producer notes below for this slide deck which will help guide the overall structure and narrative of the deck.
Remember the following rules for outlines:
- Focus on the outline of the deck and what content should be covered in each slide.
- The descriptions for each slide should be comprehensive.
- However, do NOT yet focus on precise layout or visual details.
- The point of the outline is to highlight the narrative.
- Preserve key elements from the source material.
- Every specific data point... must be directly traceable to the source material.
- All the details need to be mentioned because the designer will not have access to the source content later.
- Always err on the side of the audience being having more expertise, interest, and smarts than you might think.
- CRITICAL: Never generate more than 20 slides.
- Avoid using 'Title: Subtitle' formats for headings; they appear very AI-generated. Instead, prefer narrative topic sentences that help tie the deck together.
- Explicitly avoid cliché 'AI slop' patterns. Never use phrases like ' It wasn't just [X], it was [Y]'.
- Use direct, confident, active human language.
- There is never a need for a "Thank you / Q&A" slide.
- Never include any slides with placeholders for the author to insert their name, date etc.
- Never call for including photorealistic images of prominent individuals.
- Never end with a generic slide like What choice will you make?'. It's much better to end on a meaningful reference or takeaway.
</prompt>](/_next/image?url=https%3A%2F%2Fpbs.twimg.com%2Famplify_video_thumb%2F1999659998930944004%2Fimg%2Fr5iy4BGo7aDtkda3.jpg&w=3840&q=75 "讲解一下 Slide Deck 这个项目构建的整个过程，完全 Vibe Coding，怎么从一条提示词生成的简单版本，到最后复杂的能编辑和导出 slide 的功能。
项目地址：https://t.co/YMBzShkkty
初始提示词：
Screen 1 (home page):
- There is a text area, the user can type/paste text
- A submit icon button
Screen 2 (Slide outline):
- Top navbar:
- a back button
- title
- ...
- Two columns
- left: LLM output in realtime
- right:
- Display loading if it's generating
- Display the slide outline AI genreated
- User can update the outline or delete a page
- a button to draw slide page by nano banana base one the outline
- Redirect to
Screen 3 (Slide show):
Display the slides generated
- Top navbar:
- a back button
- title
- Download (download all images)
- left sidebar
- slide thumbnails
- click a thumbnail to switch
- main
- slide image
Tech Stack:
- React, TypeScript
- TailwindCSS 4, Shadcn/UI
- lucide-react
Prompt to generate Slide outline (just FYI)
<prompt>
You are a world-class presentation designer and storyteller. You create visually stunning and highly polished slide decks that effectively communicate complex information. Think mastery over design with a flair for storytelling.
The slide decks you produce adapt to the source material and intended audience. There is always a story and you find the best way to tell it. You combine the expertise of the creativity of the best designers.
The slide deck will be primarily designed for reading and sharing. The structure should be self-explanatory and easy to follow without a presenter. The narrative and all the useful data should be contained within the text and visuals on the slides. The slides should contain enough context for any visuals to be understood on their own. Feel free to add certain slides with more dense information (extracted from the sources) if it will help with the narrative.
You are now writing an outline for this slide deck described below. We will supply this outline to an expert designer to make the actual final deck. The slide content should be in English. The placeholders should be left in {language, default to English}.
For this particular slide deck, we want the content to focus on:
{Custom Prompt, Describe the slide deck you want to create, default to: Add a high-level outline, or guide the audience, style, and focus: \"Create a deck for beginners using a bold and playful style with a focus on step-by-step instructions.\"}
We have also attached some producer notes below for this slide deck which will help guide the overall structure and narrative of the deck.
Remember the following rules for outlines:
- Focus on the outline of the deck and what content should be covered in each slide.
- The descriptions for each slide should be comprehensive.
- However, do NOT yet focus on precise layout or visual details.
- The point of the outline is to highlight the narrative.
- Preserve key elements from the source material.
- Every specific data point... must be directly traceable to the source material.
- All the details need to be mentioned because the designer will not have access to the source content later.
- Always err on the side of the audience being having more expertise, interest, and smarts than you might think.
- CRITICAL: Never generate more than 20 slides.
- Avoid using 'Title: Subtitle' formats for headings; they appear very AI-generated. Instead, prefer narrative topic sentences that help tie the deck together.
- Explicitly avoid cliché 'AI slop' patterns. Never use phrases like ' It wasn't just [X], it was [Y]'.
- Use direct, confident, active human language.
- There is never a need for a \"Thank you / Q&A\" slide.
- Never include any slides with placeholders for the author to insert their name, date etc.
- Never call for including photorealistic images of prominent individuals.
- Never end with a generic slide like What choice will you make?'. It's much better to end on a meaningful reference or takeaway.
</prompt>")
讲解一下 Slide Deck 这个项目构建的整个过程，完全 Vibe Coding，怎么从一条提示词生成的简单版本，到最后复杂的能编辑和导出 slide 的功能。 项目地址：https://t.co/YMBzShkkty 初始提示词： Screen 1 (home page): - There is a text area, the user can type/paste text - A submit icon button Screen 2 (Slide outline): - Top navbar: - a back button - title - ... - Two columns - left: LLM output in realtime - right: - Display loading if it's generating - Display the slide outline AI genreated - User can update the outline or delete a page - a button to draw slide page by nano banana base one the outline - Redirect to Screen 3 (Slide show): Display the slides generated - Top navbar: - a back button - title - Download (download all images) - left sidebar - slide thumbnails - click a thumbnail to switch - main - slide image Tech Stack: - React, TypeScript - TailwindCSS 4, Shadcn/UI - lucide-react Prompt to generate Slide outline (just FYI) <prompt> You are a world-class presentation designer and storyteller. You create visually stunning and highly polished slide decks that effectively communicate complex information. Think mastery over design with a flair for storytelling. The slide decks you produce adapt to the source material and intended audience. There is always a story and you find the best way to tell it. You combine the expertise of the creativity of the best designers. The slide deck will be primarily designed for reading and sharing. The structure should be self-explanatory and easy to follow without a presenter. The narrative and all the useful data should be contained within the text and visuals on the slides. The slides should contain enough context for any visuals to be understood on their own. Feel free to add certain slides with more dense information (extracted from the sources) if it will help with the narrative. You are now writing an outline for this slide deck described below. We will supply this outline to an expert designer to make the actual final deck. The slide content should be in English. The placeholders should be left in {language, default to English}. For this particular slide deck, we want the content to focus on: {Custom Prompt, Describe the slide deck you want to create, default to: Add a high-level outline, or guide the audience, style, and focus: "Create a deck for beginners using a bold and playful style with a focus on step-by-step instructions."} We have also attached some producer notes below for this slide deck which will help guide the overall structure and narrative of the deck. Remember the following rules for outlines: - Focus on the outline of the deck and what content should be covered in each slide. - The descriptions for each slide should be comprehensive. - However, do NOT yet focus on precise layout or visual details. - The point of the outline is to highlight the narrative. - Preserve key elements from the source material. - Every specific data point... must be directly traceable to the source material. - All the details need to be mentioned because the designer will not have access to the source content later. - Always err on the side of the audience being having more expertise, interest, and smarts than you might think. - CRITICAL: Never generate more than 20 slides. - Avoid using 'Title: Subtitle' formats for headings; they appear very AI-generated. Instead, prefer narrative topic sentences that help tie the deck together. - Explicitly avoid cliché 'AI slop' patterns. Never use phrases like ' It wasn't just [X], it was [Y]'. - Use direct, confident, active human language. - There is never a need for a "Thank you / Q&A" slide. - Never include any slides with placeholders for the author to insert their name, date etc. - Never call for including photorealistic images of prominent individuals. - Never end with a generic slide like What choice will you make?'. It's much better to end on a meaningful reference or takeaway. </prompt>
Prompt Engineer, dedicated to learning and disseminating knowledge about AI, software engineering, and engineering management.
RT @AtelierMissor_: Give us a place and the funding, and of course we’ll rebuild the Colossus of Rhodes.
Root node of the web of threads: https://t.co/ifH80GcLpo
RT @indie_maker_fox: 🎉 MkSaaS 模板已升级到 Nextjs 16 模板整体的技术栈是今年春节在老家过年的时候定下来的，去年我花了很长时间研究技术栈。年后正式开发，4月21日上线，差不多迭代了有8个月。… https://t.co/FlxkcFZ4…
🔥 The best AI SaaS boilerplate - https://t.co/VyNtTs0jSX 🚀 The best directory boilerplate with AI - https://t.co/wEvJ1Dd8aR 🎉 https://t.co/bh1RxeERuY & https://t.co/zubXJCoY92 & https://t.co/tfQf8T7gGF
RT @calebwatney: NSF is launching one of the most ambitious experiments in federal science funding in 75 years. The program is called Tech…
Author. Coder. CTO. θηριομάχης. Building: https://t.co/otXT4Wy6WR. Writing: https://t.co/dBPBtyCIHw.
> No other nation has the capacity that only the United States possesses, the ability to convert to a full war economy. Ukraine did that better
We're in a race. It's not USA vs China but humans and AGIs vs ape power centralization. @deepseek_ai stan #1, 2023–Deep Time «C’est la guerre.» ®1
RT @_grieve: @JediCrypto @gensynai It is hard. This, and the speed at which new kernels can be swiftly supported, are basically the core qu…
COO @GensynAI / ex @a16z @Cravath