Automatically translated.View original post

🔥 Use AI and get a "misfit" web? The problem may be "Prompt"!

💡 EP.8 of Web App 101, we will teach Prompt to AI to design a "direct, practical" Web App.

🎯 got the results from AI straight up.

Reduce sitting time to edit code / design

Can be used to create projects or actually sell

🧠 Good Prompt = clear + complete + with frame 🧩

The structure should be:

🎯 Goal: What Web App Do?

👤 User: Who uses it?

⚙️ Feature: What does it have to be?

🎨 UI / Style: Tone Color Mood

🧠 Tech: What language / framework is used?

📦 Output: Want Code / Flow / UI

💡 Trick important.

Identify "clear" better than "broad."

Separate into verses, AI will be easy to understand.

Step by step. Get better results.

❌ General Prompt:

"Help Create a Web Record of Expenditure Revenue."

✅ good Prompt:

"Create a Web App to save revenue-expenditure for the average person.

There is an add / delete list feature, monthly graph summary.

Minimalist Tone UI. Use React + Node.js + MongoDB.

Let's be a project structure + code sample. "

👉 Results: Continue to work!

🛠️ How to

Write Prompt according to this:

Define Goal + User

List of must-have features

Select Style / Tech

Specifies the desired Output

Adjust Prompt one cycle at a time (Iterate)

🚀 "TEMPLATE" comment 👇

Prompt Template will be available immediately!

# WebApp 101 # PromptEngineering # AI creates web # NoCode # LowCode

5/2 Edited to

... Read moreจากประสบการณ์ส่วนตัวที่ผมได้ลองใช้ AI ในการสร้างเว็บแอป พบว่าการเขียน Prompt ที่ละเอียดและมีโครงสร้างชัดเจน ช่วยให้ผลลัพธ์ของ AI ตรงกับความต้องการมากขึ้น เช่น การกำหนดเป้าหมายว่าเว็บแอปนี้มีไว้ทำอะไร พร้อมระบุผู้ใช้เป้าหมายอย่างชัดเจน ทำให้ AI สามารถโฟกัสกับฟีเจอร์หลักที่จำเป็นจริงๆ อย่างเช่น เว็บบันทึกรายรับรายจ่ายที่มุ่งเน้นผู้ใช้ทั่วไป จำเป็นต้องมีฟีเจอร์เพิ่ม-ลบรายการ และสรุปข้อมูลเป็นกราฟรายเดือน นอกจากนั้นการเลือก UI/Style อย่างโทนมินิมอล และกำหนดเทคโนโลยีที่ต้องการใช้ เช่น React, Node.js และ MongoDB ช่วยให้ AI ส่งมอบโค้ดตัวอย่างและโครงสร้างโปรเจกต์ที่สามารถนำไปใช้งานต่อได้ทันที สิ่งที่ผมเรียนรู้จากการใช้งานคือการแบ่ง Prompt ออกเป็นข้อ ๆ และสั่งงานทีละขั้นตอน ทำให้ AI เข้าใจง่ายและสามารถแก้ไขคำสั่งได้เร็วขึ้น อีกทั้งยังช่วยลดเวลาที่ต้องนั่งแก้โค้ดหรือปรับดีไซน์อย่างมาก แนะนำให้ลองปรับ Prompt อย่างต่อเนื่อง (Iterate) เพื่อให้ผลลัพธ์สมบูรณ์มากขึ้นตามความต้องการจริงของโปรเจกต์ ซึ่งแนวทางนี้ไม่เพียงแต่เหมาะสำหรับผู้ที่ต้องการใช้ AI สร้างเว็บด้วยตัวเอง แต่ยังเหมาะสำหรับนักพัฒนาเว็บที่ต้องการเพิ่มประสิทธิภาพการทำงาน ลดความซับซ้อน และสร้างสรรค์ผลงานที่ลูกค้าพึงพอใจได้อย่างรวดเร็ว ลองนำเทคนิคการเขียน Prompt นี้ไปใช้ดู รับรองว่าเว็บที่ AI สร้างจะตรงใจคุณมากขึ้นจนเห็นได้ชัดเจน

Related posts

Generate A Business Name Using Canva! 🤯
Canva Hack! How To Generate Business Name Ideas Using Canva! 💡✨ #canvahack #canvatips #canvatemplates #canvatutorial #canvaforbeginners #canvaforbusiness #canvaforentrepreneurs #onlinebusiness
Inuri

Inuri

241 likes

AI tools to make money as a side job
1. Copywriting: Writesonic 2. E-commerce art: Pebblely 3. Illustration design: Stable diffusion 4. Photo editing: Paint By Text 5. Graphic design: StockImg AI 6. Website development: Codeium 7. Video editing: Runway 8. AI modeling: Kinetix 9. PPT making: Prezo #ai #toolbox #websites
Valder

Valder

786 likes

The image features a laptop screen displaying four smartphones with various app interfaces, set against an outdoor background with trees and sunlight. The overlay text reads: "Vibecode anything with AI even if you can't code! [5 tips w/ prompts]".
This image, set against an outdoor laptop keyboard background, presents the tip "Plan & Microprompt." It advises planning web apps with AI and making small, credit-saving changes, including a prompt example for resource tab modifications.
Against an outdoor laptop keyboard background, this image displays the tip "Experiment with UI design." It suggests borrowing UI styles from sites like 21st.dev and using AI to adapt the visual vibe, with a prompt example for layout recreation.
5 prompts to build no-code web apps with AI
5 copy-paste prompts to build anything with AI - even if you can’t code. Steal the prompts, try them, & build something amazing. Then take my free quiz to discover which no-code tool fits YOUR building style! #nocodeapps #vibecoding #aitools #digitalproductideas #stansoci
Bria | Social Media Marketing

Bria | Social Media Marketing

9 likes

A watercolor painting for Peachtober 01: Acorn, featuring a person with green hair and an acorn beret. Art brushes and a paint palette with colors are visible around the artwork.
A flat lay of art supplies including various bottles of acrylic ink, a flower-shaped palette with mixed colors, and several paintbrushes, labeled 'The supplies'.
A creative prompts list for Peachtober by @furrylittlepeach, showing 31 daily prompts including '01 ACORN'. The title 'PEACHTOBER' is illustrated with playful graphics, and '2025 #PEACHTOBER25' is at the bottom.
Peachtober 01: Acorn
Peachtober day 1 prompt is acorn. Is anyone else on here doing peachtober? Or any of the other art challenges? #peachtober #peachtober25 #acorn #inktober #inkdrawing
Ahtea Mickey

Ahtea Mickey

2 likes

A hand holds a Porsche car key in front of a Porsche steering wheel, with the text overlay "ChatGPT prompts to level up your tech career FROM A TECH GIRLIE," suggesting a guide for career advancement.
The image displays a prompt for "1. Skill Development" on a white background, asking about essential skills and tools for specific tech roles in 2024 and effective learning methods. A small bottle is visible in the background.
This image shows an outdoor night scene with houses and a table, featuring a prompt for "2. Interview Preparation." The prompt asks for help with technical interviews, including common questions, coding challenges, and best practices.
ChatGPT prompts to boost your tech career
1. Skill Development - Prompt: "What are the essential skills and tools required for [specific role, e.g., Cloud Engineer, Data Scientist] in 2024, and how can I learn them effectively?" 2. Interview Preparation - Prompt: "Help me prepare for a technical interview for a [spec
vedha | career tips (tech) 👩‍

vedha | career tips (tech) 👩‍

185 likes

A dark desk setup with a large monitor displaying code and a laptop showing a dashboard, illustrating the concept of selling custom GPTs as AI receptionists to local businesses to make money creating custom voice agents.
A desk setup with a monitor and laptop, overlaid with text detailing 'Step 1: Identify Businesses in Need of an AI Voice Receptionist' and a ChatGPT prompt for generating a list of target businesses with contact information and notes.
A desk setup with a monitor and laptop, featuring text for 'Step 2: Create a Custom GPT in ChatGPT' and instructions to go to chat.openai.com/gpts, click Create, then Configure, for building an AI receptionist.
Selling AI Receptionist Agents To Local Businesses
Local businesses lose money daily from missed calls and no-shows. Here’s how I build and sell a 24/7 AI receptionist using ChatGPT — and charge $200–$500+ for setup and monthly hosting. All steps & prompts below ⤷ Step 1: Identify Businesses That Need an AI Voice Agent Target service bu
Deft Point Consulting

Deft Point Consulting

58 likes

Pattern Making made easy in canva
Canva pattern tutorial #designwithcanva #canvadesign #
KENDRAKREATEDIT📲

KENDRAKREATEDIT📲

27 likes

STEP-BY-STEP TUTORIAL on exactly how to add affiliate links to your Instagram reels (new and old) ‼️ This is still new and things change fast, but I hope the misinformation and confusion gets cleared up for you guys in this video because this is HUGE 😍🏃‍♀️ the guide for how to add links to reels i
Michelle Henderson

Michelle Henderson

5 likes

A desk setup with a laptop, iPhone, and plant, featuring the question 'How can Lovable pay your rent?' overlaid on the image, with a colorful heart icon on the laptop screen.
A laptop screen displays complex XML code, illustrating the common misconception of app development as advanced coding, with text stating this is far from the truth.
Mobile phone screens show a 'Digital Product Archetype Quiz' interface, suggesting that creating an app is as simple as telling Lovable what you want to build.
How to pay your rent with no-code apps?
A no-code app can be simple. Like guiding someone through a decision, organizing information they already need, or turning one idea into an interactive experience instead of another PDF. You don’t need features on features OR build “the next big thing.” And you definitely don’t need to kno
Bria | Social Media Marketing

Bria | Social Media Marketing

382 likes

@MisfitEMoto
#gettoknowme #NorthernCalifornia #eridepro #electroandco #coswheel #emoto Northern California
@MisfitEMoto

@MisfitEMoto

4 likes

A classroom scene with students using laptops, one displaying text. Overlay text introduces "The most overpowered study method that only takes 5 mins a day."
A phone screen shows app icons, highlighting the "Flashrecall" app. Overlay text explains combining active recall and spaced repetition, and instructs to get the app.
A tablet screen displays the "Flashrecall" app's flashcard creation options, including "Use Image" and "Upload Text." Overlay text indicates tapping to turn notes into flashcards.
5 mins study hack
#studytok #flashrecall #spacedrepitition #flashcards #activerecall
study.stxcy

study.stxcy

9 likes

A pink-themed desk setup featuring a computer displaying a mind map application with a 'To-do List'. The screen shows categories like 'Work', 'Study', and 'Errands'. Text overlay reads 'AI mind mapping tools to accelerate workflow'.
A screenshot of Xmind.ai showing a 'To-do List' mind map with branches for 'Work', 'Study', and 'Errands'. It is described as a highly customizable mind mapping tool that creates and allows editing of mind maps from prompts.
A screenshot of Gitmind displaying a detailed mind map about the 'HPA axis', including its components, function, regulation, and health implications. It is presented as a multi-functional platform with an AI chatbot for creating mind maps and study slides.
🌸 AI mind mapping tools to work faster
‧°𐐪♡𐑂°‧₊ 🍵 Mind-maps are highly valuable tools we can use to help organise information, understand relationships between concepts, move knowledge to our long-term memory and understand the overall functionality of how things work. If you love using mind-maps, here are some AI-powered tools to mak
peachiesuga ♡

peachiesuga ♡

500 likes

How to make a 3D avatar free
Embark on a digital adventure like never before! Transform into a virtual avatar and bring your online presence to life with CoPilot.Microsoft. Step into the realm of immersive self-expression as you create your very own 3D character, capturing your unique style, personality, and flair. Prompt
Curlyssa

Curlyssa

55 likes

A person sits on the floor with a laptop and a portable desk, featuring a notebook and drink. The image has a text overlay: 'WEBSITES YOU DIDN'T KNOW YOU NEEDED (Fun Edition!)', with the Lemon8 logo and username at the bottom.
A laptop displays the 'Gamma' website, showing a 'My Hobby Page' with sections for videos and products. Below, smaller screens illustrate theme customization and various content layouts, highlighting Gamma's ease of use for creating professional pages.
A laptop shows the 'Slow Roads' website, depicting a car driving on a snowy road at sunset. Below, smaller screens display options for changing seasons and weather, emphasizing the website's therapeutic, ad-free driving experience.
Level Up Your Presentations with these 4 tools🚀
1️⃣ Gamma I always wanted a cute page to showcase my hobbies, but I’m not about that complicated design life. Gamma made it so easy! It’s like Notion and Canva had a baby—just type, drag, and boom, you have a professional-looking page. I made one for my favorite books, and it looks like I spent ho
emilie.studygram

emilie.studygram

2367 likes

Two dark romance book covers, "The Misfit" and "The Psychopaths" by J.L. Beck, from the Oakmount Elite series, featuring shirtless male models and floral accents, displayed on a white furry surface.
🧡The Misfit & The Psychopaths❤️ by J.L. Beck
Happy Friday my lovelies! Tonight’s post is books 5 & 6 in the Oakmount Elite Series! So, I’ve heard some things about The Misfit. Particularly how EMOTIONAL this one is. I’ve heard heard it will break your heart, but also piece it back together again. I’ve heard the mental health rep is on poi
Renita🖤Bookstagram

Renita🖤Bookstagram

9 likes

Fruit Bat don’t play. No hair? No vision? No problem. #fyp #trend #funny #rescuedog #dog
misfit_tails

misfit_tails

0 likes

I got gaslit by ChatGPT! 🤣🤦🏼‍♀️
ChatGPT…you failed me! 🤣🤣 #chatgpt #chatgptglitch #chatgpthallucination #woodworkingplans #contentcreation
Astin Hancock

Astin Hancock

51 likes

The image shows a window with a view of a sunset or sunrise over a landscape, with a bed in the foreground. Overlay text reads "Best ways to GIRL ROT," indicating the article's topic.
This image presents facts about "bed rotting," including survey statistics, its benefits for burnout and tiredness, and recommendations for moderation. Illustrations include a bed, flowers, a person in bed, and a candle.
The image suggests making playlists for characters, moods, or activities. It explains that music reduces stress by lowering heart rate and cortisol levels. Several Spotify playlist covers are displayed.
girl rotting tips
Sometimes, girl rotting days are wellness days. Having a lazy day is normal, and can even be a healthy mechanism to cope with stress and exhaustion. #relax #girlsmental #womenselfcare #girlthing #womenwellness #mentalhealth #womenmentalhealth #lazygirlera #rotting #stress
therormachine

therormachine

2713 likes

A laptop screen displays a customized Canvas dashboard with a pink theme and a flower graphic. Text overlays read "How to Make Canvas Cute!!" and "Swipe," indicating a tutorial.
A laptop screen shows the Chrome Web Store page for the "Better Canvas" extension, which offers features like dark mode and class grades. Text instructs to "DOWNLOAD BETTER CANVAS FROM CHROME WEB STORE."
A laptop screen displays the Chrome Web Store page for the "Tasks for Canvas" extension, designed to help users track assignments. Text instructs to "DOWNLOAD TASKS FOR CANVAS ALSO."
How to Make Canvas Cute!!
I’m OBSESSED with my pink canvas! It definitely motivates me to do my work without procrastination! 🛍️💝🎀💘🌸 #school #studytips #studying #customization #Lemon8Diary Charlotte
Randi

Randi

135 likes

A lot of you who are new to 3D printing or looking to get into selling 3D prints ask where to get files especially ones that have commercial licenses. @STLFLIX can be a great option to explore if you want a one stop shop they have over 3500 models across all kinds of catagories and they add new STL
Misfit Printing

Misfit Printing

27 likes

How to secure that scholarship 🤍
🎓 Scholarship Hunting: Tips to Get That Free Money! 💸 Hey friend, scholarship season can be overwhelming, but I’ve got some tips to help you find, track, and ace your applications! ⸻ How to Find Scholarships 1. Start Local: Check with local businesses, organizations, and your school’s fi
Stella Studies

Stella Studies

54 likes

Tool to Reply any email, message, anywhere
Meet your ultimate reply shortcut: effortlessly respond to emails, messages, anytime, anywhere, with just one click! No more juggling tabs or wasting time searching for responses. This tool streamlines your communication, ensuring swift replies with minimal effort. Whether it's an email fro
Reverelia

Reverelia

28 likes

12 Google Gemini Tools for Creators & Growth
12 Real Ways Google Gemini Helps You Grow Online Without Feeling Burnt Out AI tools can feel overwhelming But Google Gemini actually makes life easier Especially if you’re trying to grow online Create content Build a digital product Or just stop doing everything the hard way This post br
fig3lvls

fig3lvls

484 likes

A laptop on a desk displays a workflow diagram, with a larger monitor showing a nature scene behind it. Text overlays promote a "Cool Tool To Automate Your Everyday Tasks," suggesting a solution for daily productivity.
This image showcases the Zapier logo and a detailed workflow diagram illustrating how it connects various apps like HubSpot, OpenAI, and Gmail to automate tasks. It highlights Zapier's ability to streamline daily operations and repetitive chores.
The image illustrates Zapier's integration across various business functions like Sales, Marketing, and Support Operations, showing apps working together. It provides an example of automating email attachment saving to Google Drive and spreadsheet updates without coding.
Cool Tool To Automate Your Everyday Tasks
Ever feel like small tasks eat up your time? Zapier is here to help! ✨ It connects your apps and automates your day-to-day chores—saving files, organizing info, and more.  All you do is set it up, and Zapier takes care of the rest. No tech/coding needed, just smarter workflows to free up your ti
Reverelia

Reverelia

24 likes

Email Guidelines every Student Needs to Know
Your inbox says a lot about you—so let’s make it professional, clear, and effective. 😎 Whether you’re emailing professors, classmates, or potential employers, these tips are a must: ✅ Use a professional email address – your school email or a simple first.last format works best. ✅ Clear subject
Stella Studies

Stella Studies

33 likes

How to create Journal Covers
Follow along to this quick tutorial on how I create my journal covers. 1. Ideogram.ai (sign in or sign up paste your prompt) 2. Download your images 3. iloveimg.com (upscale your image) 4. Upload image into canva #journaldesign #creatingjournals #canvatips United States
CraftedbyTrice

CraftedbyTrice

885 likes

Replying to @Lyd we have an exciting update on the sea monkeys since we last checked in! Now the real question is what do we do next I feel like it could be fun to grow a large colony of sea monkeys! #seamonkeys #seamonkey
Misfit Printing

Misfit Printing

286 likes

Dr. Cynthia Chirwa presents a 10-step guide on building AI agents from scratch. It covers defining agent roles, designing structured input/output, prompting, adding reasoning, multi-agent logic, memory, optional voice/vision, output delivery, UI integration, and evaluation, emphasizing a structured approach.
Everyone is talking about building AI agents
… United States but nobody shows how to build a working agent from scratch! Here's the full guide you can follow 👇
Dr Cynthia Chirwa

Dr Cynthia Chirwa

421 likes

See more